DJ DinTe RoSu
Mixuri DJ DinTe RoSu, Software, XXX Movies, Music!
|
Lista Forumurilor Pe Tematici
|
DJ DinTe RoSu | Reguli | Inregistrare | Login
POZE DJ DINTE ROSU
Nu sunteti logat.
|
Nou pe simpatie:
Cosminamoraru din Bacau
 | Femeie
25 ani
Bacau
cauta Barbat
30 - 80 ani |
|
Mrrrr
Moderator
 Din: boschetzi
Inregistrat: acum 18 ani
Postari: 1368
|
|
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:
<ul>
<li>Menu</li>
<li>Style</li>
<li>Menu
<ul>
<li>submenu</li>
<li>cool huh?</li>
</ul>
</li>
<li>Style</li>
</ul>
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
//(c)Patrick Griffiths and Dan Webb
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav" ;
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI" {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "";
}
}
}
}
}
window.onload=startList;
Codul ne este pus la dispozitie de Patrick Griffiths si Dan Webb de pe vremea articolului lor Suckerfish Dropdowns din Alistapart. Voua insa nu va mai ramane decat sa formatati meniul si, daca doriti, sa-l intoarceti pe orizontala.
Autor Vlad Fratila
_______________________________________
Multe Instrumentale - 1000++
|
|
| pus acum 17 ani |
|