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


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:

1
2
3
4
5
6
7
8
9
<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).

1
2
3
4
5
6
7
8
9
<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.

1
2
3
4
5
6
7
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

Kapcsolódó bejegyzések:
  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Most találtam ezt a remek kis cuccot amivel lehet gyorsítani a sitebuildeléskor kicsit a folyamatokat. A lényege, hogy amikor megírtad a HTML kódot, akkor a forr …

  • A spamáradattal már mindenkinek tele a kis hócipője, itt a lapon is volt már róla szó, hogy lehet ellene védekezni. A minap egy külföldi blogban láttam pár – szá …

  • Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk …

  • A minap olyan megoldásra volt szükség, hogy egy felső navigációs menüt fülekkel kellett megoldani az alábbi kikötésekkel:– legyen rugalmas (a fül szövege hat …

A cikket beküldte: Harder (http://blog.harder.hu)

2 hozzászólás

  1. Feri says:

    Sikerült valakinek ezen az elven a menü aktív linkjét kiemelnie?

  2. imre says:

    Ezzel a funkcióval meg lehet oldani, hogy div-et hívjon meg egy adott oldalon

Szólj hozzá
a Aktív tab a navigációs menüben PHP nélkül c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>