jQuery plugins - Superfish
okt 26

Superfish

Egyszerű lebomló menü

Verzió: 1.4.8.
Kiadás dátuma: 2008
Fejlesztő: Joel Birch
Liszensz: MIT, GPL

Bevezető

jQuery plugin-ok közt kutatva jó pár menüt megnéztem már és tapasztalataim alapján
a Superfish (a Suckerfish egy továbbfejlesztett verziója) az egyike a legismertebb és legjobb megoldásoknak, amelyet rengeteg oldal használ ilyen vagy olyan formában. Azért írtam úgy, hogy "ilyen vagy olyan formában", mert a rendelkezésünkre bocsájtott paramétereken keresztül a működése kellően jól személyreszabható (pl. az alkalmazott animáció, callback függvények, stb.), ezáltal a Superfish két, különbző implementációja között is találhatunk eltéréseket, akár működés szintjén is.

A plugin képes automatikusan felismerni, ha használjuk a hoverIntent.js plugin-t, amellyel még látványosabbá varázsolhatjuk menünk működését. Az említett plugin felelős pl. azért, hogy az egeret gyorsan áthúzva a menü fölött a lebomló menük nem aktiválódnak, csak abban az esetben, ha az egér lassuló mozgást végez felettük!

Jellemzők

  • Időzíthető késleltetés a menü bezárásakor
  • animáció alkalmazása az almenük megjelenítéséhez
  • billentyűzet használata (a TAB billentyűvel végig lépkedhetünk a menü elemein)
  • támogatja a hoverIntent plugin-t (automatikus detektálás)
  • almenüket tartalmazó menüpontok automatikus felismerése
  • engedélyezhető/tiltható árnyék az almenükre
  • callback függvények használata

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/superfish.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('ul.sf-menu').superfish();
            });
          

Használat

A menü struktúrát - amelyre a plugin-t alkalmazzuk - egyszerű, egymásba ágyazott listákkal valósíthatjuk meg:

            <ul class="sf-menu">
              <li>
                <a href="#">Főmenü 1</a>
                <ul>
                  <li><a href="#">Almenü 1</a></li>
                  <li><a href="#">Almenü 2</a></li>
                  <li><a href="#">..</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Főmenü 2</a>
              </li>
              <li>
                <a href="#">Főmenü ...</a>
              </li>
            </ul>
          

Teljes paraméterlista

  • hoverClass: a hover állapot CSS szelektora (alapértelmezett: 'sfHover')
  • pathClass: CSS szelektor, amellyel egy meghatározott menüpontot aktívvá tehetünk inicializáláskor
  • pathLevels: az előző, pathClass paraméterben megadott CSS szelektor keresési szintje a menü hierarchiájában, pl.: 1 esetén az előző paraméterben megadott CSS szelektort kizárólag a menü legfelső szintjén keresi, 2 esetén kizárólag a második szinten, stb.
    (egész, nullától nagyobb szám) (alapértelmezett: 1)
  • delay: a kinyitott menü bezárásának késleltetése milliszekundumban (alapértelmezett: 800)
  • animation: megegyezik a jQuery-ből ismert .animate() metódus első paraméterével (alapértelmezett: { opacity: 'show' })
  • speed: az animáció sebessége ('slow' | 'normal' | 'fast') (alapértelmezett: 'normal')
  • autoArrows: az almenüpontokat tartalmazó menüpontoknál a jelölő nyilak engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • dropShadows: a lebomló menük árnyékának engedélyezése/tiltása (true | false)
    (alapértelmezett: true)
  • disableHI:a hoverIntent engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • onInit: függvény meghívása a plugin inicializációja után,
    ahol a 'this' kulcsszóval a főmenü ul-je érhető el
  • onBeforeShow: függvény meghívása az animáció kezdete előtt,
    ahol a 'this' kulcsszóval az aktív lebomló menü ul-je érhető el
  • onShow: függvény meghívása az animáció befejeztekor,
    ahol a 'this' kulcsszóval a kinyitott ul érhető el
  • onHide: függvény meghívása az almenü bezárása után,
    ahol a 'this' kulcsszóval a bezárt almenü ul-je érhető el