Meniuri drop-down cu CSS

[juNktw-]

[centru][b]Voi spune de la inceput ca acest stil de meniu nu functioneaza pur CSS decat in IE7. Este stiut faptul ca IE6 nu a implementat :hover decat pentru elementul a. Dar nu fiti dezamagiti, exista un mic script java care va rezolva problema, simuland :hover pentru alte elemente decat a, in cazul nostru, li.

Iata meniul:



Menu
Style
Menu

submenu
cool huh?


Style

Ce este pe primul nivel al listei va fi in primul nivel al meniului, ce este pe al doilea nivel (un ul in cadrul unui li) va fi pe al doilea nivel. Din pacate inca nu-mi dau seama cum ar trebui sa fac sa functioneze pe mai multe nivele.

Pentru a pozitiona submeniurile la locul lor, toate elementele li trebuie sa fie afisate relativ la pozitia elementului imediat superior. Doar astfel se vor putea aseza frumos langa parintele lor. Suna complicat, insa este extrem de simplu:


ul li{
position:relative;
}


Acum, pentru a face submeniurile sa apara, va trebui ca intai sa le ascundem. Totodata, sa le oferim si pozitionarea de care au nevoie.


li ul{
position: absolute;
left: 149px;
top: 0;
display: none;
}


Aceste reguli se aplica tuturor elementelor ul care sunt cuprinse in elemente li: adica exact submeniurile. Pentru a le afisa ne este necesara o singura regula aplicata la pseudo-clasa :hover a li-urilor:


li:hover ul{
display: block;
}


Regula spune browserului ca in momentul hoverului pe un element li, elementul ul pe care acesta il contine va fi afisat ca un block.

Credeti ca am terminat, dar nu uitati ca IE6 face abstractie de la reguli. Pentru a face meniul nostru sa functioneze perfect si in versiunile de Explorer mai mici decat 7, avem nevoie de urmatorul script (de remarcat ca Opera merge bine si fara). Pentru ca scriptul sa functioneze, trebuie rulat la window.onload, iar ul-ul principal al meniului trebuie sa aiba id-ul „nav”.


// JavaScript Document
//©Patrick Griffiths and Dan Webb

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i