Drop-down css - toate pentru DLE, datalife motor, DLE

Acest meniu funcționează în toate browserele, inclusiv IE 5/6.

Vom începe cu marcaj semantic. Meniul nostru conține trei niveluri, la o dată - este o listă neordonate simplă, și fiecare submeniu în ea - este o listă imbricată. Această abordare are mai multe avantaje:

* Codul de meniu ocupă puțin spațiu
* Meniul este disponibil pentru motoarele de căutare și clienții alternative
* Nu distribuiți conținut și prezentare, controlând clearance-ul folosind doar CSS

In HTML, se pare ca acest lucru:

Nu-ți fie frică de lista de atașamente. Principalul lucru - pentru a urmări corectitudinea etichetelor de deschidere / închidere. În special, fiecare etichetă secundară

Asta e ceea ce avem până acum: Pasul 1.
stil de biți

Acum vom adăuga câteva felii la codul nostru CSS:

#nav, #nav ul lista de stil # 58; nici unul;
marja # 58; 0;
umplutură # 58; 0;
frontieră # 58; 1px solid # 000;
fundal # 58; # 515151;
float # 58; stânga;
lățime # 58; 100%;
>
#nav li float # 58; stânga;
Poziția # 58; relativă;
fundal # 58; # 515151;
fundal # 58; nici unul;
>
#nav li ul de afișare # 58; nici unul;
>

Cele trei reguli care le-am făcut următoarele lucruri:

* Marcatorul a fost eliminat din lista noastră - list-style: none
* Resetarea padding padding și marginea din elemente de meniu
* Decorați meniul de frontieră și în fundal. Fundalul de proprietate: nici unul nu este folosit pentru a specifica toate browserele de fundal transparent, cu excepția IE 5. voi explica mai târziu
* Forțată pentru fiecare element din listă

, stau pe o singură linie cu ajutorul unei reguli float: left
* Submeniul Hid de nivelul 2 și 3, specificând display: none

În cazul în care elementele de bloc au o proprietate float, ele devin „plutitoare“. Acesta vă permite să le construiască într-o singură linie una cu alta. Mai multe informații despre proprietatea float.

Deoarece toate elementele listei

este acum „plutitoare“, lista în sine „se prăbușește“. Acest lucru se întâmplă din cauza incapacității de a determina înălțimea efectivă a elementului, care conține elemente de alte „plutitoare“.

Pentru a combate acest flagel, există mai multe metode, dar ele nu pot lucra în noul IE 7. Deci, aici am decis să utilizeze metoda FNE este de a atribui float proprietate: la stânga la container. Ea ne eliberează de „colaps“, a listei, dar face elementele de bază ale înfășurării partea dreaptă a meniului. De aceea, vom specifica lățimea întregului meniu de 100% - la dreapta pur si simplu nu este perpetuat.

În plus, am putea arăta proprietatea clară: atât pentru elementul de meniu imediat următor. Ar fi determinat să scadă sub toate elementele de „plutitoare“.

Ceea ce avem: Pasul 2.

#nav o culoare # 58; #fff;
text-decorare # 58; nici unul;
afișa # 58; bloc;
lățime # 58; 120px;
umplutură # 58; 4px 10px;
fundal # 58; URL-ul # 40; dot.png # 41; repeat-y din dreapta;
>
#nav un # 58; planare culoare # 58; # 000;
fundal # 58; #ccc;
>
#nav li # 58; planare fundal # 58; # 333;
>

Prima regulă am elaborat link-uri (astfel încât acestea au fost mai mult ca un buton):

Lățimea țintă este o necesitate atunci când se utilizează proprietățile plutitorul pentru toate elementele cu excepția elementului

Selector #nav a: hover este declanșată atunci când vom rezuma cursorul la link-ul și #nav li: Hover - atunci când este însumarea la elementul din listă. Al doilea caz trebuie să ne asigurăm că meniul rămâne o „urmă“ a mișcării noastre (așa cum vom vedea mai târziu).

Ieșire: Pasul 3.
Noi nu suntem în zadar numite „drop-down“ meniul este

Ne atașează o regulă existentă:

#nav li ul de afișare # 58; nici unul;
>

#nav li ul de afișare # 58; nici unul;
Poziția # 58; absolută;
fundal # 58; URL-ul # 40; fone-tr.png # 41 ;;
umplutură # 58; 8px 0;
lățime # 58; 138px;
>

Poziția de expresie: folosit absolută pentru element de poziționare absolută submeniului relativă

stratul superior.

Când avem un element de bază, poziționat „relativ“ (de exemplu, având o poziție: .. relativă) relativă, toate elementele absolut poziționate în acesta, va fi poziționat la elementul de bază, dar nu și în ceea ce privește întreaga pagină.

#nav li li o lățime # 58; 118px;
fundal # 58; nici unul;
>
#nav li # 58; planeze afișare ul # 58; bloc;
>

Magia constă în afișajul bara de meniu drop-down: bloc pentru #nav li: hover ul. Asta face un submeniu „apar“ atunci când cursorul se apropie de link-ul, înlocuind modul de afișare instalat anterior: nici unul:

#nav li # 58; planare li ul de afișare # 58; nici unul;
lățime # 58; 138px;
top # 58; -9px;
stânga # 58; 133px;
>
#nav li # 58; planare li # 58; planeze afișare ul # 58; bloc;
>

Lățimea sub noastre pixeli 138 se datorează faptului că se scade 2 pixeli din limitele de fiecare parte: 140 - 1 - 1 = 138 pixeli.

Selector de #nav li: hover li ul afectează meniul de nivel 3. Ne schimbare de la stânga cu o lățime de 133 de pixeli (valoare pur empirică), și ușor în sus (pentru ao aduce la același nivel cu link-ul). Acum, când mutați mouse-ul, sub-meniul nostru va apărea la dreapta de referință.

Drop-down (nu a fost încă pentru IE): Pasul 4.
factorul IE

Viața multor dezvoltatori web ar fi mai ușor dacă nu ar exista Internet Explorer. Situația începe să îmbunătățească datorită eliberării celei de a șaptea versiune, dar propagarea pe scară largă este încă foarte departe.

Acest lucru vă permite să „atașați“ clasa jshover la orice element

, peste care cursorul trece. Această funcție funcționează numai în Internet Explorer - alte browsere nu este pur și simplu nevoie.

Acum, că meniul a câștigat în IE, se adaugă la regulile patru deja existente privind li.jshover selectorului suplimentar:

#nav li # 58; planeze,
#nav li.jshover.
>
#nav li # 58; planeze ul,
#nav li.jshover ul.
>
#nav li # 58; planare li ul,
#nav li.jshover li ul.
>
#nav li # 58; planare li # 58; planeze ul,
#nav li.jshover li.jshover ul.
>

Acum puteți viziona și IE: un pas 5, finala.
informaţii suplimentare

Fundamentul sau translucide submeniu PNG-fișier. IE 6 nu are suport transluciditatea, dar se poate repara.

Datorită utilizării de imagini translucide am avut pentru a elimina culoarea de fundal. Acest lucru a condus la faptul că, dacă dezactivați imaginile sub-litere nu sunt vizibile. Doar o singură cale de ieșire: pentru a seta culoarea de fundal pentru Li #nav, pierde transluciditatea.

Eu folosesc un fundal hack: nici una;, pentru a forța meniul de culoare pentru IE 5. În cazul în care acest lucru nu se face, atunci fundalul browser-ul nu va fi afișat. Poate că acest lucru poate fi corectat într-un fel într-un alt mod, dar nu am nici o dorință de a face cu toate ciudățeniile sale.

UPD. Akella a sugerat că, în unele setări, sistemul de meniu este de spargere la Opera. Acest lucru se datorează utilizării de toate dimensiunile unităților „absolute“ de px. Pixeli - este rău.
Așa că am făcut-o a doua versiune complet pe em (cu excepția lățimii de frontieră). Și din cauza acestui cadru un pixel poate apărea lacune mici, prin creșterea dimensiunii fontului. Exit - Nu utilizați border =)