jQuery plugins - Auroramenu
júl 08

Auroramenu

Harmonikaszerű menü cookie kezeléssel

Verzió: 1.0
Kiadás dátuma: 2009/10/18
Fejlesztő: Aurora Design Studio
Liszensz: nincs adat
  • 2664
  • 18348
  • 0
  • -

Bevezető

Igen népszerű, mutatós és nem utolsó sorban helytakarékos megoldás lehet az ún. harmonikaszerű menü alkalmazása. Igen sok ilyen plugin létezik, azonban az esetek nagy hányadában ezek nem működnek tökéletesen. Ami engem leginkább szokott zavarni az az, hogy maga a menük kinyitása/becsukása vagy nem animált, vagy ha animált, akkor sem folyamatos a mozgás, van benne némi "bug".

Az ilyen harmonikaszerű menük esetén egy másik hiba, hogy az oldal frissítése, esetleg az oldalon belüli navigáció során egy új oldal betöltésekor a menü "elfelejti" az aktuális állapotát, azaz pl. minden megnyitott szülőelem becsukódik. Az auroramenu esetében ez másképp van: egy másik, a jQuery plugins oldalain is ismertetett cookie plugin segítségével a fejlesztők kiküszöbölték ezt a kis problémát.

A harmonikaszerű menük esetén a lenyíló részek működését tekintve kétféle megoldásról beszélhetünk:

  • egyszerre csak egy aktív (lenyíló) szülőelem van, azaz egy másik szülőelemre klikkelve a korábban megnyitott minden esetben automatikusan bezáródik
  • a szülőelemek egymástól függetlenül működnek

Jelen plugin esetén utóbbi a jellemző, azaz tetszőleges szülőelem nyitható meg és zárható be, egymástól függetlenül.

Jellemzők

  • oldal frissítése/betöltése esetén megőrzi aktuális állapotát (cookie)
  • a szülőelemek egymástól függetlenül kezelhetők (nyitás/csukás)
  • a plugin könnyedén implementálható bármely oldalba
  • a menü kinézete CSS segítségével teljesen személyre szabható
  • a szülőelemek kinyitott/bezárt állapota megkülönböztethető

Implementálás

Az auroramenu oldalunkba építéséhez szükségünk van a korábban már említett cookie plugin-re, illetve az aktuális jQuery és az aurora kódra, plusz az egyedi kinézethez szükséges CSS file-ra.

CSS

            <link rel="stylesheet" type="text/css" href="css/auroramenu.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery-cookie.js"></script>
            <script type="text/javascript" src="js/auroramenu.js"></script>
          

A plugin implementálása mindössze ennyi volt, nincs szükség deklarációra a head-ben. Mindössze a HTML kód felöli követelményt kell még biztosítanunk, ami nem egy nagy ördöngösség, hisz hagyományos módon, egy lista segítségével kell a felépíteni a menünket:

            <ul>
              <li><a href="#">Főmenü 1</a></li>
              <li>
                <a href="#">Főmenü 2</a>
                <ul>
                  <li><a href="#">Almenü 1</a></li>
                  <li><a href="#">Almenü 2</a></li>
                  <li><a href="#">Almenü 3</a></li>
                </ul>
              </li>
            </ul>
          

Tippek

  • Egyik olvasónknak (Blaner Gábor) köszönhetően elkészült a plugin egy módosított verziója, melyben egyszerre csak egy lenyíló menü lehet aktív. A módosított verzió megtekinthető, illetve letölthető a demo oldalon (köszönjük a beküldött módosítást!).