Új hozzászólás Aktív témák

• #3107 Sk8erPeter nagyúr PumpkinSeed #3105

  Új Válasz 2015-01-15 20:29:28 #3107

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  Sk8erPeter

  nagyúr

  válasz PumpkinSeed #3105 üzenetére

  Ez a kód erősen túl van bonyolítva! Na meg a szerkezete sem jó: a bezáróikon logikailag és látvány szempontjából is az oldalsávhoz tartozik, együtt kell mozogniuk, éppen ezért érdemes strukturálisan is ennek megfelelően rendezni a kódot. Legyen egy közös ősük, és a bezáróikon ehhez képest legyen relatíve igazítva - ezzel azt tudod elérni, hogy a bezáróikon együtt mozog az oldalsávval, nem pedig külön-külön kell toszigálni a bezáróikont is, hogy kövesse az oldalsávot a mozgás során.
  Ezt épp ezért átrendeztem a kódodban, hierarchikusan a toggle icon is a #menu alá került, a #menu kapott egy position:absolute-ot, a .menu_icon (a bezáró-kinyitó ikon) szintén kapott; a #menu ezenkívül némi CSS3 transition segítségével kerül mozgatásra, úgy, hogy a célállapotban (ahol nyitott állapotban van) a left tulajdonságot 0-ra állítom (bezárt állapotban pedig ez visszakerül az eredeti -250px-re). A JavaScript-kódban pedig simán csak az .open osztályt adom hozzá, illetve veszem le róla, ettől történik meg az átmenet.

  http://jsfiddle.net/gd6qqtnh/1/

  Ha pedig régebbi böngészők támogatására is szükség van, és ezeknél is mindenképp szeretnél animációt (de tényleg csak akkor!), akkor azt javaslom, hogy Modernizr segítségével ellenőrizd a transition támogatottságát, majd jQuery UI segítségével animáld a left property-t: http://jqueryui.com/animate/
  if(!Modernizr.csstransitions) { // Test if CSS transitions are supported
  // http://jqueryui.com/animate/
  // ...
  }

  Sk8erPeter

Új hozzászólás Aktív témák