Majoritatea site-urilor web clasice de pe Internet folosesc un meniu orizontal ca element principal de navigare. Uneori poate conține diverse caracteristici suplimentare - structuri cu mai multe niveluri, pictograme pentru sub-articole, un bloc de căutare, liste complexe etc. Recent a fost o mică selecție pe blog și astăzi vom analiza 4 exemple practice despre cum să faceți un meniu derulant folosind CSS + HTML. Informațiile vor fi utile dezvoltatorilor începători și celor care doresc să schimbe navigarea pe site-ul lor.
Primul tutorial CSS3 Dropdown Menu este cel mai nou din colecție (din aprilie 2016). Avantajele soluției: în acest meniu vertical orizontal pentru site, sub-articolele conțin pictograme, implementarea și codul CSS în sine sunt destul de simplu de înțeles și implementat.
Pasul 1 - Markup HTML
Primul pas este să creați o listă neordonată în HTML cu link-uri de ancorare (#) pentru elementele sale. Acolo, într-unul dintre articole, adăugăm o altă listă imbricată, care va fi responsabilă de submeniu.
Pasul 2 - Afișați meniul
Eliminam indentările inutile din CSS pentru elementele meniului vertical orizontal al site-ului. În aceeași etapă, vom seta o lățime și înălțime fixe ale elementelor de meniu și, de asemenea, vom adăuga colțuri rotunjite.
| .menu, .menu ul, .menu li, .menu a ( margine : 0 ; padding : 0 ; chenar : niciunul ; contur : niciunul ; ) .menu ( înălțime : 40 px ; lățime : 505 px ; fundal : #4c4e5a ; fundal : -webkit-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : -moz-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal: -o-linear-gradient (sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : -ms-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : liniar-gradient(sus , #4c4e5a 0% , #4c4e5a 0% ) 2c2d33 100% ); -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px ; ) .menu li (poziție: relativă; list-style: none; float: stânga; afișare: bloc; înălțime: 40px;) |
Meniu, .menu ul, .menu li, .menu a ( marja: 0; umplutură: 0; chenar: niciunul; contur: niciunul; ) .meniu ( înălțime: 40px; lățime: 505px; fundal: #4c4e5a; fundal: - webkit-linear-gradient(sus, #4c4e5a 0%, #2c2d33 100%); fundal: -moz-linear-gradient(sus, #4c4e5a 0%, #2c2d33 100%); fundal: -o-linear-gradient( sus, #4c4e5a 0%,#2c2d33 100%); fundal: -ms-linear-gradient (sus, #4c4e5a 0%, #2c2d33 100%); fundal: linear-gradient (sus, #4c4e5a 0%, #2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li (poziție: relativă; list-style: none; float: stânga; afișare: bloc ; înălțime: 40px; )
Pasul 3 - conectarea
Pe lângă caracteristicile de bază ale stilurilor (font, culoare, înălțime), folosim și creăm o tranziție lină a culorii textului atunci când trecem cu mouse-ul. Adăugăm și separatoare în meniu, eliminând chenarul de la primul element din stânga și din ultimul din dreapta.
| .menu li a ( afișare : bloc ; umplutură : 0 14 px ; margine : 6 px 0 ; înălțime linie : 28 px ; decor text : niciuna ; chenar- stânga : 1 px solid #393942 ; chenar- dreapta : 1 px solid #4f5058 ; font -familie: Helvetica, Arial, sans-serif; greutatea fontului: bold; dimensiunea fontului: 13px; culoare: #f3f3f3; text-shadow: 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- tranziție: culoare .2s ease-in-out; -moz-transition: culoare .2s ease-in-out; -o-tranziție: culoare .2s ease-in-out; -ms-transition: culoare .2s ease-in -out; tranziție: culoare .2s ease-in-out; ) .meniu li: primul copil a (chenar-stânga: niciunul ; ) .meniu li: ultimul-child a( chenar-dreapta: niciunul ; ) .meniu li : hover > a ( culoare : #8fde62 ; ) |
Meniu li a (afișare: bloc; umplutură: 0 14px; margine: 6px 0; înălțime linie: 28px; text-decor: niciunul; chenar-stânga: 1px solid #393942; chenar-dreapta: 1px solid #4f5058; font- familie: Helvetica, Arial, sans-serif; greutate font: bold; dimensiune font: 13px; culoare: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : culoare .2s ease-in-out; -moz-transition: culoare .2s ease-in-out; -o-transition: culoare .2s ease-in-out; -ms-transition: culoare .2s ease-in- ieșire; tranziție: culoare .2s ease-in-out; ) .meniu li:primul copil a (chenar-stânga: niciunul; ) .meniu li:last-child a( chenar-dreapta: niciunul; ) .meniu li: plasați cursorul > a (culoare: #8fde62; )
Pasul 4 - submeniu
Deoarece avem un meniu derulant de site folosind CSS, ar trebui să setăm și un design pentru lista imbricată. Mai întâi, setați o marjă de 40px în partea de sus și 0px în stânga + adăugați colțuri rotunjite. Pentru a afișa/ascunde submeniul, setați inițial proprietatea opacității la zero și când treceți cu mouse-ul la unu. Pentru a crea efectul apariției unui submeniu, setați valoarea înălțimii listei la zero și cu hover = 36px.
| .menu ul ( poziție : absolut ; sus : 40px ; stânga : 0 ; opacitate : 0 ; fundal : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border -radius: 0 0 5px 5px ; -webkit-transition: opacitate .25s ease .1s ; -moz-transition: opacitate .25s ease .1s ; -o-tranziție: opacitate .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacitate .25s ease .1s ; ) .menu li: hover > ul ( opacitate : 1 ; ) .menu ul li ( înălțime : 0 ; overflow : ascuns ; padding : 0 ; -webkit-transition : înălțime .25s ease .1s ; -moz-transition: înălțime .25s ease .1s ; -o-transition: înălțime .25s ease .1s ; -ms-transition: înălțime .25s ease .1s ; tranziție: înălțime .25s ușurință .1s ; ) .menu li: hover > ul li ( înălțime : 36px ; overflow : vizibil ; padding : 0 ; ) |
Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- rază: 0 0 5px 5px; -webkit-transition: opacitate .25s ease .1s; -moz-transition: opacitate .25s ease .1s; -o-tranziție: opacitate .25s ease .1s; -ms-transition: opacitate . 25s ease .1s; tranziție: opacitate .25s ease .1s; ) .meniu li:hover > ul ( opacitate: 1; ) .menu ul li ( înălțime: 0; overflow: ascuns; padding: 0; -webkit-transition: înălțime .25s ease .1s; -moz-transition: înălțime .25s ease .1s; -o-tranziție: înălțime .25s ease .1s; -ms-transition: înălțime .25s ease .1s; tranziție: înălțime .25s ease . 1s; ) .menu li:hover > ul li ( înălțime: 36px; overflow: vizibil; umplutură: 0; )
Setăm lățimea legăturilor = 100px, se adaugă un chenar de jos în partea de jos a tuturor elementelor, cu excepția ultimului. De asemenea, dacă doriți, puteți plasa poze pentru articolele din submeniu (atenție! nu uitați să schimbați căile către imaginile din cod cu cele pe care le utilizați).
| .menu ul li a ( lățime : 100px ; padding : 4px 0 4px 40px ; margine : 0 ; chenar : niciunul ; bordur-bottom : 1px solid #353539 ; ) .menu ul li : ultimul copil a ( chenar : niciunul ; ) .meniu a.documente ( fundal : url (../img/docs.png ) centru fără repetare 6px ; ) .meniu a.mesaje ( fundal : url (../img/bubble.png ) centru fără repetare 6px ; ) .menu a.signout ( fundal : url (../img/arrow.png ) centru 6px fără repetare ; ) |
Meniu ul li a ( lățime: 100 px; umplutură: 4 px 0 4 px 40 px; margine: 0; chenar: niciunul; chenar- jos: 1 px solid #353539; ) .menu ul li:last-child a ( chenar: niciunul; ) . meniu a.documente ( background: url(../img/docs.png) no-repeat 6px center; ) .meniu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( fundal: url(../img/arrow.png) centru de 6px fără repetare; )
Personal îmi place ușurința implementării și utilizarea pictogramelor. Iată codul final de la codepen:
Opțiunea lui Josh Riser este vizual similară cu meniul derulant HTML și CSS anterior. Codul nu are un selector de copii „>” (util în design-urile cu mai multe niveluri), dar autorul folosește bine efectele CSS3 (tranziție, box-shadow și text-shadow) pentru un rezultat mai frumos. Linkul din sursă nu descrie procesul de creare a unui meniu vertical orizontal, așa că voi furniza imediat codul final:
În acest exemplu, ne vom uita la cum să facem un meniu derulant folosind CSS, care, pe lângă elemente, va conține un bloc de căutare. O implementare similară poate fi adesea găsită în . În ceea ce privește timpul de implementare și complexitatea, soluția este puțin mai complicată decât cele anterioare. A fost publicat în mai 2013, așa că poate fi necesar să modificați unele lucruri, deși a funcționat bine la testarea noastră.
cod HTML
Pentru navigare, ca întotdeauna, se folosește o listă neordonată (cu clasa nav). Elementele obișnuite de meniu sunt elemente din listă (li) și conțin linkuri (a href) fără clase sau ID-uri. Excepție fac 3 elemente specializate ale acestui meniu vertical orizontal cu următoarele ID-uri:
- setări — link imagine;
- căutare — un bloc cu o căutare și un buton corespunzător;
- opțiuni - conține un submeniu (implementat printr-o listă cu clasa subnav).
De asemenea, în cod veți vedea un script fără prefixe pentru utilizarea proprietăților CSS fără prefixe. HTML-ul final pentru meniul drop-down arată astfel:
|
-
- Aplicație
- Bord
- Opțiuni
Meniu CSS
1. Stiluri de bază și elemente de meniu
Mai întâi, specificăm fontul Montserrat, un fundal gri închis și o înălțime fixă pentru elementele de meniu. Toate elementele au float: aliniere la stânga și poziționare relativă pentru ca ulterior să puteți adăuga un submeniu cu poziție: absolută;
| @import URL (http://fonts.googleapis.com/css?family= Montserrat) ; * ( margine : 0 ; umplutură : 0 ; ) .nav ( fundal : #232323 ; înălțime : 60 px ; afișare : bloc inline ; ) .nav li ( float : stânga ; tip list-style : niciunul ; poziție : relativă ; ) |
@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margine: 0; umplutură: 0; ) .nav ( fundal: #232323; înălțime: 60 px; afișare: bloc inline; ) .nav li ( float: stânga; list-style-type: niciunul; poziție: relativă; )
2. Formatarea link-urilor
Elementele de meniu folosesc designul de bază + . Înălțimea este aceeași ca în clasa de navigație. Pentru #settings linkul de imagine de la începutul meniului, alinierea este setată.
| .nav li a (dimensiune font: 16px; culoare: alb; afișaj: bloc; înălțime linie: 60px; umplutură: 0 26px; text-decor: niciunul; margine-stânga: 1px solid #2e2e2e ; font-family: Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; inaltime : 24px ; dimensiunea fontului: 10px; înălțimea liniei: 24px; ) |
Nav li a (dimensiune font: 16px; culoare: alb; afișaj: bloc; înălțime linie: 60px; umplutură: 0 26px; text-decor: niciunul; chenar-stânga: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; inaltime: 24px; dimensiunea fontului: 10px; înălțimea liniei: 24px; )
3. Bloc de căutare
Acest element are o lățime fixă și este format din mai multe părți - un câmp de introducere (#search_text) cu un fundal verde și un buton de căutare (#search_button). În unele browsere, culoarea de fundal poate fi gri.
| #căutare ( lățime : 357px ; margine : 4px ; ) #search_text ( lățime : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; chenar : 0 niciunul ; înălțime : 52px ; margine-dreapta: 0; culoare: alb; contur: niciunul; fundal: #1f7f5c; float: stânga; dimensiunea casetei: chenar-box; tranziție: toate 0.15s ; ):: -webkit-input-placeholder ( /* Browsere WebKit */ culoare : alb ; ) : -moz-placeholder ( /* Mozilla Firefox 4 la 18 */ culoare : alb ; ):: -moz-placeholder ( /* Mozilla Firefox 19+ */ culoare : alb ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ culoare: alb ; ) #search_text : focus ( fundal : rgb (64 , 151 , 119 ) ; ) #search_button ( chenar : 0 niciunul ; fundal : #1f7f5c url (search.png) centru fără repetare; lățime: 60px; float: stânga; umplutură: 0; text-align: center; înălțime: 52px; cursor: pointer;) |
#căutare ( lățime: 357px; margine: 4px; ) #search_text( lățime: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; chenar: 0 niciunul; înălțime: 52px ; margine-dreapta: 0; culoare: alb; contur: niciunul; fundal: #1f7f5c; float: stânga; dimensiunea casetei: chenar-box; tranziție: toate 0,15s; ) ::-webkit-input-placeholder ( /* Browsere WebKit */ culoare: alb; ) :-moz-placeholder ( /* Mozilla Firefox 4 la 18 */ culoare: alb; )::-moz-placeholder ( /* Mozilla Firefox 19+ */ culoare: alb; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ culoare: alb; ) #search_text:focus ( fundal: rgb(64, 151, 119); ) #search_button ( chenar: 0 niciunul; fundal: #1f7f5c url (search.png) centru fără repetare; lățime: 60 px; float: stânga; umplutură: 0; text-align: center; înălțime: 52 px; cursor: pointer; )
4. Submeniu derulant
Atingerea finală ne va permite să facem un meniu derulant în CSS care se declanșează pentru ultimul element #opțiuni.
| #opțiuni a( chenar-stânga : 0 niciunul ; ) #opțiuni > a ( imagine de fundal : url (triangle.png ) ; poziție de fundal : 85% centru ; repetare de fundal : fără repetare ; padding-dreapta : 42px ; ) .subnav ( vizibilitate : ascuns ; poziție : absolut ; sus : 110 % ; dreapta : 0 ; lățime : 200 px ; înălțime : automat ; opacitate : 0 ; tranziție : toate 0,1 s ; fundal : #232323 ; ) .subnav li ( float : niciunul ; ) .subnav li a ( chenar-jos : 1px solid #2e2e2e ; ) #opțiuni : hover .subnav ( vizibilitate : vizibil ; sus : 100% ; opacitate : 1 ; ) |
#opțiuni a( chenar-stânga: 0 niciunul; ) #opțiuni>a ( imagine de fundal: url(triangle.png); poziția fundal: 85% centru; fundal-repetare: fără repetare; padding-dreapta: 42px; ) .subnav ( vizibilitate: ascuns; poziție: absolut; sus: 110%; dreapta: 0; lățime: 200px; înălțime: automat; opacitate: 0; tranziție: toate 0,1 s; fundal: #232323; ) .subnav li ( float : nici unul; ) .subnav li a ( chenar-jos: 1px solid #2e2e2e; ) #options:hover .subnav (vizibilitate: vizibil; sus: 100%; opacitate: 1; )
În stiluri veți găsi inserarea unei imagini de fundal triunghi (triangle.png) pentru a indica submeniul - nu uitați să indicați calea corectă pentru aceasta și alte imagini în exemplu. Aspectul unui submeniu este implementat folosind proprietatea opacitate. Soluția finală pe codepen:
Această opțiune folosește în principal tehnici CSS2.1, soluția plus sau minus este nouă - pentru martie 2015. Dacă vă lipsește un subnivel dintr-un meniu vertical orizontal pentru un site, atunci acest exemplu conține trei simultan. Folosind pseudo-clasa:only-child, un simbol „+” este adăugat la articole pentru a indica prezența unui submeniu.
În general, un exemplu bun și simplu. Nu vom descrie procesul de implementare în detaliu, deoarece... este similar cu cele anterioare - mai întâi creați un cadru HTML, apoi adăugați treptat stiluri pentru acesta. Descărcați codul final folosind linkul către sursă; îl puteți vizualiza parțial în Codepen:
Total
Mai sus ne-am uitat la 4 opțiuni pentru cum să faceți un meniu derulant folosind CSS + HTML pentru, deși există multe mai multe exemple similare pe Internet. Există soluții cu jQuery, dar acest lucru este cel mai probabil util doar pentru implementarea unor efecte speciale și sarcini non-standard. În cele mai multe cazuri, o combinație de CSS + HTML va fi suficientă, mai ales că acum principalele cerințe pentru un meniu sunt confortul și viteza de încărcare rapidă.
În sfârșit, două note despre codurile de mai sus. Unele exemple folosesc imagini în CSS pentru meniul drop-down, așa că va trebui să revizuiți cu atenție căile imaginilor și să furnizați valorile corecte pentru site-ul dvs. În al doilea rând, unele dintre soluții au o vechime de 2-3 ani, așa că ar trebui să verificați încă o dată performanța acestora în diferite browsere.
Dacă cunoașteți alte implementări moderne interesante ale meniurilor derulante orizontale pentru un site web, trimiteți linkuri în comentarii.
Dacă site-ul dvs. este mai mult decât o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Meniul este o secțiune a unui site web concepută pentru a ajuta vizitatorii să navigheze pe site. Orice meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul dvs. este să creați un meniu folosind CSS și HTML.
Meniu verticalPrimul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, va trebui să putem identifica lista, așa că îi vom adăuga un atribut id cu identificatorul „navbar”. Fiecare element
Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm căptușeala exterioară și interioară din listă în sine și marcatoarele din articolele din listă. Apoi setați lățimea dorită:
#navbar (marja: 0; padding: 0; list-style-type: niciunul; lățime: 100px; )
Acum este timpul să stilați link-urile în sine. Le vom adăuga o culoare de fundal, vom modifica parametrii textului: culoare, dimensiunea și greutatea fontului, vom elimina sublinierea, vom adăuga mici indentații și vom redefini afișajul element de la inline la bloc. În plus, cadrele din stânga și de jos au fost adăugate elementelor din listă.
Cea mai importantă parte a modificărilor noastre este redefinirea elementelor inline pentru a bloca elemente. Acum linkurile noastre ocupă tot spațiul disponibil al articolelor din listă, adică pentru a urmări linkul nu mai trebuie să plasăm cursorul exact peste text.
#navbar a ( culoare de fundal: #949494; culoare: #fff; umplutură: 5px; text-decor: niciunul; greutate font: bold; chenar-stânga: 5px solid #33ADFF; display: block; ) #navbar li ( chenar-stânga: 10px solid #666; chenar-jos: 1px solid #666; )
Am combinat tot codul descris mai sus într-un singur exemplu, acum făcând clic pe butonul de încercare, puteți accesa pagina de exemplu și vedeți rezultatul:
Titlul documentului #navbar ( marja: 0; umplutură: 0; list-style-type: niciunul; lățime: 100px; ) #navbar li ( chenar-stânga: 10px solid #666; chenar-jos: 1px solid #666; ) # bara de navigare a (culoare de fundal: #949494; culoare: #fff; umplutură: 5px; decor text: niciuna; greutate font: bold; chenar-stânga: 5px solid #33ADFF; afișare: bloc; )
Încerca "Când treceți mouse-ul peste un element de meniu, aspectul acestuia se poate schimba, atrăgând atenția utilizatorului. Puteți crea un astfel de efect folosind pseudo-class:hover.
Să revenim la exemplul de meniu vertical discutat mai devreme și să adăugăm următoarea regulă la foaia de stil:
#navbar a:hover (culoare de fundal: #666; chenar-stânga: 5px solid #3333FF; ) Încercați »
Meniu orizontalÎn exemplul anterior, ne-am uitat la bara de navigare verticală, care se găsește cel mai adesea pe site-urile web din stânga sau dreapta zonei principale de conținut. Cu toate acestea, meniurile cu link-uri de navigare sunt adesea situate orizontal în partea de sus a paginii web.
Un meniu orizontal poate fi creat prin stilarea unei liste obișnuite. Afișează proprietatea elementelor
Pentru a plasa elementele de meniu pe orizontală, creați mai întâi o listă cu marcatori cu linkuri:
Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele din listă de la bloc la inline:
#navbar (marja: 0; padding: 0; list-style-type: niciunul; ) #navbar li ( display: inline; ) Încercați »
Acum tot ce trebuie să facem este să definim stilul pentru meniul nostru orizontal:
#navbar (marja: 0; umplutură: 0; list-style-type: niciunul; chenar: 2px solid #0066FF; chenar-radius: 20px 5px; lățime: 550px; text-align: center; culoare de fundal: #33ADFF; ) #navbar a ( culoare: #fff; umplutură: 5px 10px; text-decor: niciunul; font-weight: bold; display: inline-block; width: 100px; ) #navbar a:hover ( chenar-raza: 20px 5px ; culoare de fundal: #0066FF; ) Încercați »
Meniu derulantMeniul pe care îl vom crea va avea legături principale de navigare situate în bara de navigare orizontală și sub-articole care vor apărea numai atunci când cursorul mouse-ului trece peste elementul de meniu la care se referă aceste sub-articole.
Mai întâi trebuie să creăm structura HTML a meniului nostru. Vom plasa principalele legături de navigare într-o listă cu marcatori:
Vom plasa sub-articolele într-o listă separată, cuibându-l în element
Încerca "
Acum să începem să scriem codul CSS. În primul rând, trebuie să ascundeți lista cu sub-articole folosind afișarea: none; declaration, astfel încât acestea să nu fie afișate pe pagina web tot timpul. Pentru a afișa sub-articole, avem nevoie de asta atunci când trecem cu mouse-ul peste un element
#navbar ul ( afișare: niciunul; ) #navbar li:hover ul ( afișare: blocare; )
Îndepărtăm indentările și marcajele implicite din ambele liste. Facem elemente de listă cu link-uri de navigare plutitoare, formând un meniu orizontal, dar pentru elementele de listă care conțin sub-articole setăm float: none; astfel încât să apară unul sub celălalt.
#navbar, #navbar ul ( margine: 0; padding: 0; list-style-type: none; ) #navbar li ( float: stânga; ) #navbar ul li ( float: none; )
Apoi, trebuie să ne asigurăm că submeniul nostru drop-down nu împinge în jos conținutul de sub bara de navigare. Pentru a face acest lucru, vom seta poziţia elementelor din listă: relativă; , și o listă care conține sub-articole poziție: absolut; și adăugați o proprietate de top cu o valoare de 100%, astfel încât submeniul poziționat absolut să apară exact sub link.
#navbar ul ( afișare: niciunul; poziție: absolut; sus: 100%; ) #navbar li ( float: stânga; poziție: relativ; ) #navbar ( înălțime: 30px; ) Încercați »
Înălțimea listei părinte a fost adăugată intenționat, deoarece browserele nu consideră conținutul plutitor ca conținut element, fără a adăuga înălțime lista noastră va fi ignorată de browser, iar conținutul care urmează listei se va încheia în meniul nostru.
Acum trebuie doar să stilăm ambele liste și meniul drop-down va fi gata:
#navbar ul ( afișare: niciuna; culoare de fundal: #f90; poziție: absolut; sus: 100%; ) #navbar li:hover ul ( afișare: bloc; ) #navbar, #navbar ul (marja: 0; umplutură: 0; list-style-type: none; ) #navbar (înălțime: 30px; fundal-culoare: #666; padding-left: 25px; min-width: 470px; ) #navbar li ( float: stânga; poziție: relativă; înălțime: 100%; ) #navbar li a ( afișaj: bloc; padding: 6px; lățime: 100px; culoare: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover (culoare de fundal: #f90; ) #navbar ul li:hover (culoare de fundal: #666; )
De la autor: Vă urez bun venit pe blogul nostru despre construirea site-ului web. Aceasta este o serie de articole dedicate noii specificații și astăzi aș dori să vă spun cum să creați un meniu în HTML5 și cum diferă acest proces de același din versiunile anterioare ale limbajului.
Care sunt diferențeleÎn primul rând, aș dori să spun că specificația nu este atât de nouă - și-a început dezvoltarea în 2009. De fapt, de atunci a existat o dezvoltare constantă - noi funcții apar în html5, browserele moderne acceptă din ce în ce mai mult aceleași caracteristici, astfel încât în curând va fi posibil să vorbim despre suport complet pentru această tehnologie, deși nu este un singur întreg, este mai degrabă un set de noi posibilități, fiecare dintre acestea fiind independentă.
Ei bine, bine, dar ce este diferit la crearea navigației principale (meniu), deoarece citiți un articol pe acest subiect, atunci ar trebui să existe cu siguranță unele diferențe. Ei bine, cum a fost creat meniul înainte? De obicei, a fost folosită o listă cu marcatori, care a fost plasată într-un container suplimentar pentru toată navigația - un div obișnuit.
Deci, odată cu apariția noilor etichete, acum puteți face ceva mai corect - în loc de o etichetă div, înfășurați meniul în nav - un nou element semantic care a fost creat special pentru a colecta cele mai importante link-uri din el și pentru a le grupa împreună.
Puteți pune fie o listă, fie doar un set de link-uri în nav. Mi se pare că aceasta este o soluție și mai simplă și mai corectă, deși în multe șabloane puteți vedea în continuare implementarea meniului folosind etichetele ul, li, a.
Interesant este că containerul de navigare a fost creat special pentru link-urile prioritare din pagină. De fapt, pe o pagină poate exista mai mult de un astfel de container, dar ar trebui să plasați în ele doar acele link-uri care formează de fapt navigația principală (de exemplu, meniul principal de sus și duplicatul acestuia în subsolul paginii).
Cum să faci un meniu orizontal folosind html5Acasă Servicii Contacte Recenzii
Nici măcar nu aveți nevoie de nicio încadrare în listă; totul va fi afișat inițial pe o singură linie, deoarece linkurile sunt elemente inline.
Un alt lucru este că sunt foarte limitate în design datorită proprietăților lor inline. Veți putea opera numai cu proprietăți precum: culoare, dimensiunea fontului, marginile. Dacă doriți să setați o anumită culoare de fundal, să faceți separatoare și să adăugați umplutură (sau să determinați dimensiunea fiecărui element de meniu), atunci nu veți putea face acest lucru cu o linie.
Aici va trebui să ne transformăm articolele în elemente bloc. Pentru a face acest lucru, trebuie să scrie proprietatea:
afisare: bloc; |
Acum merg de sus în jos, adică navigarea noastră a devenit verticală. Pentru a-l transforma înapoi în orizontală, trebuie să adăugați anumite proprietăți. De exemplu, în loc de un tip de bloc, definiți un tip de linie de bloc pentru ele sau dați-le (float: stânga). Citiți mai multe despre aceste metode.
Navigare pe verticalăDe obicei, pentru a face un meniu vertical în html5, ei folosesc o listă, dar markup-ul pe care ți l-am dat mai sus este potrivit și pentru noi. După cum ați văzut, dacă convertiți link-uri în link-uri bloc, acestea se vor alinia automat unul după altul de sus în jos, deoarece două blocuri nu pot fi pe aceeași linie.
Acum le puteți aplica regulile de proiectare necesare. Blocurile au mult mai multe proprietăți decât un element inline, așa că aveți mult mai multe opțiuni. De exemplu, am adăugat acestea:
a( text-decor: niciunul; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afișare: bloc; fundal: liniar-gradient(la dreapta, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%); lățime: 200 px; text-align: center )
text - decor : nici unul ; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afisare: bloc; fundal: liniar - gradient (la dreapta, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); lățime: 200px; text - aliniere : centru |
Este rar să vezi meniuri orizontale pe un site web care se derulează atunci când treci cu mouse-ul, dar sunt foarte frumoase și funcționale. Sau cum se spune - utilizabil. Astăzi vom crea un meniu derulant orizontal utilizabil folosind cod CSS pur. Am observat adesea că oamenii folosesc javascript pentru a obține acest efect. De fapt, totul se poate face doar cu CSS. Să ne uităm la două opțiuni pentru meniurile derulante orizontale folosind CSS. E bine să ai de ales, cred că ești de acord.
Dacă aveți nevoie de un meniu orizontal simplu. Citind articolul despre creație. După ce ați stăpânit elementele de bază, începeți să creați un meniu derulant.
Opțiunea 1 - Meniu derulant orizontalPentru claritate, consultați captura de ecran de mai jos. Probabil că sunteți familiarizat cu această structură orizontală a meniului.
Pentru o claritate și mai mare, să ne uităm la structura HTML a meniului. Să ne asigurăm ce anume a atins poziția orizontală a meniului și valabilitatea acestuia. Structura meniului css:
Afișarea și ascunderea copiilor meniului se face folosind CSS: ul > li:hover ul. Este destul de simplu. Acest comutator vă permite să definiți comportamentul tuturor meniurilor copil. La crearea unui meniu orizontal obișnuit, pe lângă display:block adăugăm și alte stiluri, cum ar fi culoarea de fundal etc. Singura diferență dintre un meniu obișnuit și un meniu derulant este că nu stilăm UL-urile imbricate. Trebuie să-l plasați pe elementul LI dependent, care este hoverat (UL > LI: hover).
Să ne uităm la codul CSS:
#header (înălțime:120px; poziție:relativ; fundal: url transparent(header_bkg.png) repetare-x derulare sus în centru;) #nav ( margine:0px; padding:0px; poziție:absolut; sus: 70px; afișare:bloc ;) #nav > li ( list-style-type:none; float:left; display:block; margin:0px 10px; position:relative; padding:10px; width:100px;) #nav > li:hover ul ( display :block; ) #nav > li:hover ( background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; ) #nav li ul ( margin:0px; padding:0px; display:none;) #nav li ul li (list-style-type:none; margin:10px 0 0 0;) #nav li ul li a ( display:block; padding:5px 10px; culoare:#A2E200; text- decoration:none;) #nav li ul li:hover a ( background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;) #nav li span ( cursor:pointer; margin :0px 10px; font-weight:bold; )
Iată cum să o faci folosind cod CSS pur. Încă nu îmi pot da seama de ce ar trebui să folosesc JavaScript, cu excepția poate pentru .
Opțiunea 2 - meniu orizontal + soluție pentru IE6Vă rugăm să rețineți că opțiunea 1 nu va funcționa în IE6. Soluția pentru compatibilitatea meniului cu IE6 va fi o bucată de cod js. Mai exact, haideți să creăm un meniu. Mai jos este o captură de ecran a meniului viitor:
Designul meniului este similar cu prima versiune, așa că să trecem la codul în sine.
#meniu ( padding: 0; margin: 0; font-size: 100%; font-family: Georgia; ) #menu li ( list-style: none; float: left; inaltime: 33px; padding: 0; margin: 0 ; lățime: 150px; text-align: center; fundal: #171717; poziție: relativ; padding-top: 12px; ) #menu li ul ( list-style: none; padding: 0; margin: 0; width: 150px; afișare: niciunul; poziție: absolut; stânga: 0; sus: 45px; ) #menu li ul li ( float: niciunul; înălțime: 33px; margine: 0; lățime: 150px; text-align: center; fundal: #7F7F7F; ) #menu li a ( afișare: bloc; lățime: 150 px; înălțime: 33 px; culoare: #fff; text-decoration: none; ) #menu li:hover ul, #menu li.jshover ul ( afișare: bloc; ) # meniu li:hover, #menu li.jshover ( fundal: #424242; )
JS - soluție pentru IE6
jsHover = function() ( var hEls = document.getElementById("meniu").getElementsByTagName("li"); pentru (var i=0, len=hEls.length; i
< ul >
< li > < a href = "#" >Paragraful 1< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punctul 2< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punctul 3< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< / ul >
< / li >
< li > < a href = "#" >Punctul 4< / a >
< ul class = "second" >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< li > < a href = "#" >Sub-clauza< / a > < / li >
< / ul >
< / li >
< / ul >
< / nav >
Înțeleg că este uriaș. Aceasta este problema cu listele imbricate, că trebuie să scrieți mult cod. Dar țineți cont de faptul că facem 4 puncte principale și pentru fiecare va exista un meniu drop-down.
De fapt, am dat întregii navigații un identificator de nav, iar toate listele imbricate o clasă de stil de secundă pentru a înțelege că sunt imbricate.
Grozav, avem marcajul gata, vă puteți uita la rezultat:
Da, arată groaznic. Dar acum vom activa css și în câteva minute navigarea noastră se va transforma. Hai sa muncim.
Scrierea stilurilor CSSPrimul lucru pe care îl voi face este să resetați toate umpluturile la implicite pentru toate elementele. Ele ne vor sta doar în cale; este mai bine să setăm singuri indentările mai târziu, acolo unde este nevoie.
*( marja: 0; umplutură: 0; )
marja: 0; umplutură: 0; |
#nav( înălțime: 70px; ) #nav ul( list-style: none; )
#nav( inaltime: 70px; #navul( lista - stil : niciuna ; |
Acum trebuie să decidem care va fi meniul nostru. Orizontal sau vertical? Vă sugerez să o faceți mai întâi pe cea orizontală și să vedeți totul în exemplul său. Pentru a face acest lucru, trebuie să scrieți următoarele stiluri:
#nav > ul > li( float: stânga; lățime: 180px; poziție: relativă; )
#nav > ul > li( plutește la stânga; latime: 180px; poziție: relativă; |
Rețineți că folosind semnul > ne referim la elementele din listă care sunt imbricate direct în ul, care sunt imbricate direct în nav. Acest lucru este foarte important deoarece împiedică aplicarea stilului la elementele din listă imbricate. Cert este că, după ideea mea, articolele din lista principală vor fi amplasate orizontal, iar în cele imbricate – vertical.
Dar tu, desigur, o poți face altfel, în conformitate cu ideea ta. Vă puteți asigura că toate punctele sunt pe o singură linie.
Oricum, codul de mai sus sper sa intelegi. Forțează ca elementele principale ale listei să fie împinse spre stânga, astfel încât să apară toate pe aceeași linie, chiar dacă sunt elemente de bloc. Le-am dat, de asemenea, o lățime explicită și o poziționare relativă.
De ce pozitionare? Este necesar pentru a poziționa apoi absolut listele imbricate. Dacă ați studiat poziționarea în CSS, atunci probabil știți că dacă dați o poziționare relativă a unui bloc, atunci toate elementele din acesta pot fi poziționate absolut în interiorul acestui bloc particular, și nu întreaga fereastră a browserului.
Între timp, iată ce avem până acum:
Din această captură de ecran vă puteți imagina deja rezultatul aproximativ. Desigur, încă trebuie să proiectăm frumos articolele, astfel încât ochii să nu cerească milă atunci când vizualizează navigația.
#nav li a( afișaj: bloc; fundal: #90DA93; chenar: 1px solid #060A13; culoare: #060A13; umplutură: 8px; text-align: center; text-decoration: niciunul; ) #nav li a:hover( fundal: #2F718E; )
#navli a( afisare: bloc; fundal: #90DA93; chenar: 1px solid #060A13; culoare: #060A13; umplutură: 8px; text - align : centru ; text - decor : nici unul ; #nav li a:hover( fundal: #2F718E; |
În primul rând, linkurile în sine trebuie să fie blocate. Acest lucru este necesar pentru ca umplutura să funcționeze și pentru ca toate proprietățile să fie aplicate corect. Apoi, specific culorile fundalului, textului, parametrilor cadrului, umplutura internă și alinierea centrată a textului. În cele din urmă, anulez sublinierea linkurilor.
Toți acești parametri nu trebuie să fie specificați așa cum am făcut-o eu. Puteți alege culorile în mod arbitrar, faceți un cadru diferit sau nu îl folosiți deloc, indentările pot fi reduse sau mărite.
Vă rugăm să rețineți că în acest caz nu am folosit semnul >, așa că regulile de mai sus se vor aplica tuturor legăturilor, inclusiv celor din paragrafele imbricate. Deci acum avem următoarele:
Grozav, dar înțelegi că sub-articolele nu ar trebui să fie vizibile, ar trebui să se deschidă când treci cu mouse-ul peste elementul dorit. Fără aceasta, meniul nostru arată ca o masă. Ei bine, este timpul să ascundeți elementele imbricate.
#nav li .second( afișare: niciunul; poziție: absolut; sus: 100%; )
#nav li .second( afișaj: niciunul; poziție: absolută; sus: 100%; |
În primul rând, ascundem liste complet imbricate. În al doilea rând, le oferim poziționare absolută și coordonată de vârf: 100%. Aceasta înseamnă că meniul drop-down va apărea clar sub elementul principal căruia îi aparține, clar la 100% din înălțimea articolului respectiv.
Acum vedem doar meniul principal pe pagina web, care este ceea ce avem nevoie.
Să implementăm abandonulCeea ce ne rămâne de făcut este cel mai important lucru - să realizăm căderea însăși. Nu este nimic complicat, uită-te la acest cod:
#nav li:hover .second( display: block; )
#nav li:hover .second( afisare: bloc; |
Acest cod va funcționa impecabil. Când treceți cu mouse-ul peste un element din meniul principal, sublista va deveni vizibilă. În plus, doar lista care este imbricată în elementul peste care trece cursorul.
Există o singură problemă minoră - lățimea elementelor imbricate nu se potrivește cu lățimea celor principale. Dar acest lucru poate fi rezolvat foarte ușor prin adăugarea stilurilor adecvate:
#nav li li( lățime: 180px; )
#navlili( latime: 180px; |
Asta e, problema rezolvata:
Totul funcționează perfect. Când treceți cu mouse-ul peste elementul principal, apare un meniu derulant corespunzător acestuia. Dacă mutați cursorul în lateral, acesta dispare. Dacă mutați cursorul pe elementele imbricate în sine, puteți face clic pe ele și puteți accesa secțiunea dorită a site-ului. Astfel, am creat pentru tine un meniu derulant foarte simplu și ușor, fără absolut niciun script.
Conversia meniului în verticalEi bine, bine, ne-am dat seama complet de navigare orizontală, dar pe lângă aceasta, navigarea verticală se găsește foarte des pe site-uri web și poate fi și una drop-down. De fapt, schimbarea meniului de la orizontal la vertical este foarte ușoară; trebuie să schimbăm doar câteva rânduri de cod.
Mai întâi, va trebui să eliminați float:left din elementele principale ale listei. Această proprietate este cea care asigură că articolele noastre sunt afișate într-o singură linie, dar de ce avem nevoie de aceasta dacă navigarea trebuie să fie verticală?
Acum nu mai rămâne decât să schimbați regulile pentru selectorul #nav li .second, adică pentru listele imbricate, și anume, acestea trebuie poziționate puțin diferit. Ca aceasta:
#nav li .second (afișare: niciunul; poziție: absolut; stânga: 100%; sus: 0; )
#nav li .second( afișaj: niciunul; poziție: absolută; stânga: 100%; sus: 0; |
Adică, este necesar să se înregistreze două coordonate în loc de una. În primul rând, în cazul navigării orizontale, am spus că, așa cum era planificat, articolele din submeniu ar trebui să fie afișate sub elementele principale. În cazul unui meniu vertical, acesta nu este potrivit - elementele ar trebui să fie afișate în lateral.
Prin urmare, schimbăm de sus: 100% la stânga: 100%. În plus, avem nevoie și de coordonatele de sus. Îl setăm la 0, astfel încât submeniul să fie la același nivel cu elementul căruia îi corespunde.
Gata, acum totul funcționează așa cum trebuie. Îl poți testa. După cum puteți vedea, nu am mințit când am spus că va trebui doar să rescriu câteva rânduri de cod.
Meniu orizontal cu mai multe niveluriFolosind aproape aceeași abordare, puteți crea mai multe niveluri de meniu dacă este necesar. De exemplu, haideți să creăm o listă pentru al patrulea element din meniul principal, care va fi imbricat într-unul dintre subarticole.
