Tabbed Menu - Queness

Bevezető

A navigáció egyik lehetséges megvalósítása az úgynevezett tab menü (vagy csúnyán, magyarul: füles menü). Praktikus, mivel értékes helyet takaríthatunk meg vele, s ha jól alkalmazzuk, növelhetjük vele honlapunk használhatóságát is.

Ez a plugin (hasonlóan a CSS Globe Tooltip-hez) nem egy teljes értékű plugin, a Queness egyik tutorial-ja. Ebből egyenesen következik, hogy már most, mielőtt belevágnánk az egészbe, kilátásba helyezhetünk némi js buherálást is (opcionális, lehet valakinek a "gyári" állapot is megteszi). A CSS buherát már nem is említem - mivel nem támogatja a ThemeRoller-t (ahogy sajnos a plugin-ok nagy része), így ez magától értetődő.

Jellemzők

• animált váltás a fülek közt (slideDown és slideUp effektek)
• nincs history bejegyzés (a böngésző vissza gombja inaktív a fülek közti váltásra)
• animált linkek

Implementálás

Az eredeti, a Queness honlapjáról letölthető verzió annyira kezdetleges és puritán, hogy ott a CSS illetve a js kód is a HTML oldalba van beágyazva. Ezt igyekeztem normális formára hozni és külön file-ba tettem őket, így a jQuery-plugins.hu-ról letölthető forráskód kicsit átláthatóbb.

Az alábbiakban ennek megfelelően ismertetem az implementálás menetét:

CSS

              <link type="text/css" rel="stylesheet" href="style.css" media="screen" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.tabbed.menu-queness.js"></script>
          

Használat

A plugin használatához nincs szükség deklarációra, csupán a plugin által használt CSS osztályok és azonosítók használatára kell odafigyelni. Természetesen, ha valaki ezeket módosítani szeretné, akkor a CSS és a js kód is könnyedén átlátható (utóbbi agyon van kommentelve).

A menü egy .box div blokkba van becsomagolva. Ezen belül az első elem a füleket megvalósító lista, #tabMenu azonosítóval. Ezt követi a .boxTop és a .boxBottom blokkok által közre zárt tartalmi rész, a .boxBody. Ebbe kell egyenként, külön, mindenféle azonosító vagy osztály nélküli div-ekbe beledobálni az egyes fülekhez tartozó tartalmakat.

A jobb átláthatóság kedvéért a HTML kód struktúrája:

            <div class="box">
              <ul id="tabMenu">
                <li class="selected">Fül 1</li>
                <li>Fül 2</li>
                <li>...</li>
              </ul>

              <div class="boxTop"></div>

              <div class="boxBody">
                <div class="show">Első fül tartalma</div>
                <div>Második fül tartalma</div>
                <div>...</div>
              </div>

              <div class="boxBottom"></div>
            </div>
          

Mint az a kiemelt sorokból látható, CSS osztályok segítségével definiálható a kezdeti fül és tartalom. A fülek esetén az aktív fülnek a .selected osztályt, míg a tartalmi résznél a megfelelő div blokknak a .show osztályt kell megadnunk.

Tippek

• Némely CSS tulajdonság csak a js file-ban módosítható (pl. a li.mouseover osztály esetén a háttérszín módosítása)
• Alapértelmezett esetben a plugin minden lista elemhez definiál click () eseményt, amely zavaró lehet. Ennek megszüntetéséhez a js kódban az alábbi blokkot kell ki kommentelni, vagy törölni:

                  $('.boxBody li').click(function() {
                    window.location = $(this).find("a").attr("href");
                  }).mouseover(function() {
                    $(this).css('backgroundColor','#888');
                  }).mouseout(function() {
                    $(this).css('backgroundColor','');
                  });
                

• A fülek közti váltás animációja, illetve a linkekre alkalmazott effekt szintén nem érhető el paramétereken keresztül, de a forráskódban ezek is módosíthatóak.