Fül (tabs)
Horizontális menü helyett szokás fület használni. Ugyanúgy működik, mint a menü, csak nem menüpontok vannak, hanem fülek.
Itt a fülek címei ugyanúgy ul li tagek között van, viszont a tartalom, ami alul megjelenik az már div-ekkel van elkészítve.
A szükséges állományok: tabs.css, ui.tabs.js.
Használata
Készítsünk egy div-et, melynek example id-t és flora class-t adunk. A div-en belül készítsünk egy listát. Minden listaelem tartalma legyen egy a tag, amely href attribútuma #fragment-1-re mutat (a href="#fragment-1"). Ezután készítsünk a lista alá, de még a diven belül annyi div-et, amennyi listaelemet létrehoztunk a listában. Minden div-nek legyen id-je az a tag href attribútumában hivatkozott érték.
A css-ben módosítható a fülek külseje.
Forráskód
HTML
A head-ben hívjuk meg a szükséges fájlokat!
<script type="text/javascript" src="js/ui.tabs.js"></script>
<link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen" />A body-ban a következő kódrész szükséges.
<div id="example" class="flora">
<ul>
<li><a href="#fragment-1"><span>Első fül</span></a></li>
<li><a href="#fragment-2"><span>Második fül</span></a></li>
<li><a href="#fragment-3"><span>Harmadik fül</span></a></li>
</ul>
<div id="fragment-1">
<p>Ez az első fül tartalma.</p>
<p>Először ez a fül az aktív, ez látszik. Kattinthatunk a második vagy a harmadik
fülre. Akkor annak a tartalma fog látszani.</p>
</div>
<div id="fragment-2">
<p>Ez a második fül. Most ennek a fülnek a tartalma látszik.</p>
<p>Az aktív tartalom füle mindig nagyobb a többinél. Így mindig látszik,
hogy éppen melyik fül lett kiválasztva.</p>
</div>
<div id="fragment-3">
<p>Ez meg a harmadik fül. Ennek a tartalma legyen hosszabb és vegyük észre, hogy ebben az esetben
a fülek alatti rész a dinamikus méretváltoztatás következtében lejjebb tolódik.</p>
<p>Ha visszakattintunk egy másik, kisebb tartalommal rendelkező fülre, akkor a fül
által mutatott terület a kisebb tartalom miatt nem lesz olyan magas, mint a harmadik fül
esetében, így az alatta lévő rész is visszakerül a korábbi magasságba.</p>
</div>
</div>Példa
Ez az első fül tartalma.
Először ez a fül az aktív, ez látszik. Kattinthatunk a második vagy a harmadik fülre. Akkor annak a tartalma fog látszani.
Ez a második fül. Most ennek a fülnek a tartalma látszik.
Az aktív tartalom füle mindig nagyobb a többinél. Így mindig látszik, hogy éppen melyik fül lett kiválasztva.
Ez meg a harmadik fül. Ennek a tartalma legyen hosszabb és vegyük észre, hogy ebben az esetben a fülek alatti rész a dinamikus méretváltoztatás következtében lejjebb tolódik.
Ha visszakattintunk egy másik, kisebb tartalommal rendelkező fülre, akkor a fül által mutatott terület a kisebb tartalom miatt nem lesz olyan magas, mint a harmadik fül esetében, így az alatta lévő rész is visszakerül a korábbi magasságba.