Principiul de funcționare
Pentru a începe cu, că ați înțeles principiul elementelor verticale, vom înțelege un exemplu simplu. Pentru a face un simplu cod html pentru:
și aplicarea acestui cod astfel de stiluri:
CSS.Intr ne-am ascuns dreptul textului prin schimbarea afișajului său pe ecran: nici unul;. Atunci când cursorul mouse-ului (: Hover) .example_shown elementul de bază au un element de copil .example_hidden schimbarea tipului de afișaj vizibil. Conform acestui principiu și meniurile derulante construite.
Creați meniu derulant
Acum zaymomsya punerea în aplicare a meniului. Pentru organizația sa va utiliza etichetele UL și listele li
După cum puteți vedea din cod, lista principală cu «meniu» id =, vom fi responsabili pentru secțiunile vizibile ale meniului. Sectiunile am pus o altă listă ul, care conține un link-uri drop-down, atunci când plasați cursorul peste titlul secțiunii de meniu. Acum, se aplică acest set de elemente din următoarele stiluri:
În aceste stiluri, vreau să se concentreze pe patru lucruri:
- Fiți atenți la acest simbol #menu> stiluri li. El indică faptul că stilurile nu vor fi aplicate la toate elementele Li, situate în interiorul # meniul ul, dar numai pentru cei care sunt descendentul ul tag-ul # meniul direct.
- O poziționare secțiuni de meniu schimbat în poziția: relativă. Faptul că o etichetă obișnuită cu poziția: absolută coordonate de poziționare duce scorul din colțul din stânga sus al ferestrei de browser. Dar, în cazul în care eticheta este imbricat în tag-ul în poziția: relativă, de numărare va fi realizată din unghiul de tag-ul.
Astfel, nu putem lega listele derulante pentru unele coordonate relative la fereastra, și să coordoneze în ceea ce privește secțiunea a meniului principal. De fapt, partea de sus: 20px și stabilește deviația verticală din partea de sus a secțiunii principale. - opțiune de top în #menu> li> ul trebuie să fie egal cu suma parametrilor #menu> li, cum ar fi înălțimea + padding-top + padding-bottom. În acest caz, ultimii doi parametri nu sunt specificate, valoarea este moștenită de la primul lor stil, și este egal cu zero. Înălțimea Semnificație = 20. Prin urmare, indentare lista noastră verticală este egală cu 20 + 0 + 0 = 20px
- Când traducem cursorul pe lista decăzute (#menu> li> ul> li), fiecare element al listei li se va primi un eveniment Hover Hover. În acest caz, acesta este încorporat într-o listă ul, care, la rândul său, este inclus în #menu> li. eveniment hover va fi transferat de la #menu> li> ul> li toți membrii părinte, inclusiv #menu> li. Din cauza acestei liste este să se prăbușească din nou în ciuda faptului că nu păstrăm cursorul direct peste #menu> li.
concluzie
Drop-down liste - destul de un mod convenabil de a plasa un meniu mare într-un spațiu mic. Dar această metodă are un mare dezavantaj: nu va funcționa pe dispozitivele mobile. De ce? Pentru că ei practic nu au conceptul pluti în aer. Ei au o clică de război. Dar nici un Hover. Deci, nu uitați despre acești utilizatori și să le punerea în aplicare meniu separat face.