Weboldal készítés

Aktív tab a navigációs menüben PHP nélkül

2007-04-20

A navigációnál használt tab-os/füles megoldások egy problémája szokott lenni, hogy hiába állítjuk be a css-ben, hogy az aktív tab-nak hogy kellene kinéznie, kattintás után mikor újratöltődik a lap, nyoma sincs a kívánt formázásnak. Persze PHP segítségével könnyű, de most az lenne a cél, hogy ezt kihagyva is működjön a dolog.

Alapértelmezetten egy navigáció felsorolás segítségével így nézne ki:

<div id="navigation">
   <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>About</span></a></li>
      <li><a href="#"><span>Our Work</span></a></li>
      <li><a href="#"><span>Products</span></a></li>
      <li class="last"><a href="#"><span>Contact Us</span></a></li>
    </ul>
 </div>

Ezzel a megoldással mindegyik lapon mindegyik tab ugyanúgy fog kinézni. Ahhoz, hogy a kívánt eredményt elérjük (laptól függően a tab-ok kiemelése), kicsit alakítani ezen a kódon is és a css-ben is fel kell venni egy új részt. Először is minden LI-hez társítani kell egy class nevet (érdemes azt adni, amire a tartalom is vonatkozik (pl. home).

<div id="navigation">
  <ul>
      <li class="home"><a href="#"><span>Home</span></a></li>
      <li class="about"><a href="#"><span>About</span></a></li>
      <li class="work"><a href="#"><span>Our Work</span></a></li>
      <li class="products"><a href="#"><span>Products</span></a></li>
      <li class="last contact"><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

Ezután minden oldaladhoz hozzá kell fűzni egy body class-t, mely egyezzen meg a már előzőleg felvett LI-k class neveivel (home, about stb…).

1	<body class="about">...</body>

Most kell felvenni a css selectort, melyben már meg lehet adni, hogy nézzen ki ténylegesen az aktív a tab.

body.home #navigation li.home,
body.about #navigation li.about,
body.work #navigation li.work,
body.products #navigation li.products,
body.contact #navigation li.contact {
  ... az aktuálisan kiválasztott tab tulajdonságai ...
 }

Ennek eredménye az, hogy pl. a „home” tab-ra kattintva a css-ben megadott body.home („home” class-szal ellátott body) #navigaton („navigation” ID-jű div-ben) li.home („home” class-szal ellátott LI) beállításokkal fog megjelenni a tab.

Ha új oldalt akarsz felvenni, akkor nincs más dolgod, minthogy felvegyél egy ugyanolyan class-szal ellátott LI-t és body. … sort a css-ben.

Forrás: http://24ways.org/2005/auto-selecting-navigation