Drop-down fără javascript css
Singurul dezavantaj al meniului drop-down, fără JS este că trebuie să știe în avans cât de mult vor fi investite niveluri. Voi descrie un exemplu cu cinci nivele, care ar trebui să fie suficient pentru aproape orice site.
Meniul va fi construit pe listele neordonate, imbricate. Să scrie o dată codul HTML al meniului nostru drop-down (pentru a nu aduna o listă uriașă am făcut meniurile jos doar al doilea paragraf):
Pentru a face mai ușor de a lucra cu liste, am pus meniul nostru într-un container DIV.
Acum trebuie să reseteze stiluri pentru liste, pentru a aduce frumusete la elementele au fost similare cu butonul, și a ascunde elementele de sub-meniu. Pentru a face acest lucru, vom scrie stilul:
Dacă ați citit articolul meu cu privire la modul de a face un simplu CSS meniu. Este posibil să fi observat unele diferențe. Mai întâi am făcut un cadru folosind frontiera de proprietate, pentru care este destinat; În al doilea rând, indentare, nu am folosit proprietatea padding, și-au făcut înălțimea și linia dreapta liniuță folosind proprietatea text-liniuță. De ce? Dar numai la lățimea meniului a fost aceeași în toate browserele.
Să vedem ce avem:
Acum, sarcina noastră este să treceți cu mouse-ul peste un element de meniu, a scăzut lista copilului. Această problemă este rezolvată foarte simplu pentru Firefox, Opera, Safari b IE7. Adăugați la stilul de următoarele elemente:
Permiteți-mi să explic ce sa făcut. Am folosit planare pseudo-clasă pentru elementul LI și a indicat poziționarea sa relativă, și vizibilitate pentru lista copilului: vizibilă, care afișează de fapt un meniu drop-down. Trebuie remarcat faptul că, dacă ați scrie .cssmenu li: hover ul (nesemnate>), apoi sunt afișate toate nivelurile de meniu imbricate, pe care nu avem nevoie. Am identificat, de asemenea, toate link-urile parentale pe care le puteți vedea tot drumul la elementul de meniu curent.
Asta e ceea ce sa întâmplat în cele din urmă (ar trebui să funcționeze în Firefox, Opera, Safari și IE7):
Dar elementele de meniu imbricate nu suntem în cadrul unei etichete , și după el, și așa nu vor fi afișate elementele de meniu pentru copii. Deci, avem nevoie pentru a pune copiii în lista de etichete . Pentru a rezolva această problemă cu ecranul de meniu drop-down în Internet Explorer sub a șaptea versiune, va trebui să recurgă la comentariu condiționată și tabele. În cazul în care ar trebui să existe un meniu de filială, în loc de tag-ul de închidere am scrie acest lucru:
Și apoi lista de copii adăugați următorul cod:
Ar trebui să obțineți următorul cod HTML:
Rămâne doar pentru a adăuga stil la masa de referință atunci când treceți:
Acest meniu funcționează exact aceleași apare în browsere FF, Opera, IE7, IE6, Safari. Pentru exploratorul sub al doilea, poate fi necesar, în khimichit cu stil pentru a afișa în mod corespunzător lățimea elementului. Eu în mod specific nu a corectat afișajul în IE 5.5, în speranța că ei sunt puțini cei care-l folosesc.