Šareni css meni

[exciter]

Interesuje me kako bi mogao da uradim meni koji bi imao 4 stavke (npr. naslovna, o nama, galerija, i kontakt). Nije problem da napravim pomoću css-a da kad se pređe preko neke stavke sve budu iste boje, ali ja hoću da kad se pređe mišem preko neke stavke, one budu različite boje.

[JohnnyNT]

Zadaj svakom elementu različitu klasu, pa posle u CSS-u definiši različit hover za svaku.

[exciter]

To mi je i palo na pamet, samo sam mislio da možda ne postoji neko "instant" rešenje.

[Dark Champion]

Uvek možeš pomoću javascripte to pokušati, ali najjednostavnije je pomoću CSS-a.

Možeš da svaki element te navigacije selektiraš preko nth-child selektora: http://css-tricks.com/how-nth-child-works/

Slobodno pitaj ukoliko ti ne bude jasno kako radi.

Pozdrav.

[Neutrino]

Pavle Rohalj kaže:

Možeš da svaki element te navigacije selektiraš preko nth-child selektora: http://css-tricks.com/how-nth-child-works/

Slobodno pitaj ukoliko ti ne bude jasno kako radi.

Pozdrav.

nth-child ne radi u IE starijem od IE9.

http://caniuse.com/#search=nth

[Novica89]

Neutrino kaže:

nth-child ne radi u IE starijem od IE9.

http://caniuse.com/#search=nth

Fuck IE !

Ne radi nth-child mozda,ali zato moze da se posluzi jednostavnim Jquery-em,medjutim,najkraca metoda je razlicite klase za svaki menu item.

[Novica89]

Primer preko JQuery-a bi bio recimo :
HTML struktura :

<ul id="menu">
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu2</a></li>
      <li><a href="#">Menu3</a></li>
      <li><a href="#">Menu4</a></li>
</ul>

jQuery kod :

$(document).ready(function () {

$('#menu  li').eq(1).hover(function() {  // sta se desava kada mis predje preko li
      $(this).css({
           'background' : #f1f1f1,
           'color' : #000 
      });
},function () {    // sta se desava kada mis sidje sa li
      $(this).css({
           'background' : default boja,
           'color' :  default boja fonta
});

});

Ovo ce uzeti prvi li iz ul i dati mu navedene atribute nakon sto se mis nadje na njemu. Tako uradi i za 2. 3. i 4. (posto ne radi nth-child u IE),a eq(broj) je Jquery metoda selektovanja i kao takav,kod bi trebao da radi u bilo kom browseru.
Za drugi li samo kopiras kod,podesis boje koje zelis i umesto eq(1),stavis odgovarajuci broj eq(2) eq(3) eq(4) itd.