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ă-
Acesta este conținut într-o etichetă
- .
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ă
* 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;
>
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 elementAcum, 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 =)