Majoritatea site-urilor clasice de pe web folosesc meniul orizontal ca element principal de navigare. Uneori poate conține diverse caracteristici suplimentare - structuri pe mai multe niveluri, pictograme pentru sub-articole, un bloc de căutare, liste complexe etc. Recent, a existat deja o mică selecție pe blog, iar astăzi ne vom uita la 4 exemple practice despre cum să faci un meniu drop-down în CSS + HTML. Informațiile sunt utile pentru dezvoltatorii începători și pentru cei care doresc să schimbe navigarea pe site-ul lor.
Primul tutorial CSS3 Dropdown Menu este cel mai nou din colecție (datat aprilie 2016). Avantajele soluției: în acest meniu vertical orizontal pentru site, există pictograme în sub-articole, implementarea și codul CSS în sine sunt destul de simplu de înțeles și implementat.
Pasul 1 - marcaj HTML
Primul pas este să creați o listă neordonată în HTML cu link-uri ancora (#) pentru elementele sale. Acolo, într-unul dintre articole, adăugăm o altă listă imbricată care va fi responsabilă de submeniu.
Panoul meu de control
Îi place
Vizualizări
Documente
mesaje
Sign out
Încărcări
Videoclipuri
Documente
Panoul meu de control
Îi place
Vizualizări
Documente
mesaje
Sign out
Încărcări
Videoclipuri
Documente
Pasul 2 - afișarea meniului
Eliminarea umpluturii suplimentare în CSS pentru elementele meniului vertical orizontal al site-ului. În aceeași etapă, vom seta o lățime și înălțime fixă a elementelor de meniu și, de asemenea, vom adăuga colțuri rotunjite.
Pe lângă caracteristicile de bază ale stilurilor (font, culoare, înălțime), folosim și creăm o tranziție lină a culorii textului la hover. Adăugăm și separatoare în meniu, eliminând chenarul de la primul element din stânga și ultimul element din dreapta.
.meniu 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; greutate font: bold; dimensiune font: 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-copil 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; margine-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: trece cu mouse-ul > a (culoare: #8fde62; )
Pasul 4 - submeniu
Deoarece avem un meniu derulant de site CSS, ar trebui să setăm și designul listei imbricate. Mai întâi, setați umplutura la 40px în partea de sus și 0px în stânga + adăugați colțuri rotunjite. Pentru a afișa/ascunde submeniul, inițial am setat proprietatea de opacitate la zero, iar la trecerea cursorului, la unu. Pentru a crea efectul aspectului unui submeniu, setați înălțimea listei la zero și treceți cu mouse-ul = 36px.
Setăm lățimea legăturilor = 100px, în partea de jos a tuturor elementelor, cu excepția ultimului, se adaugă un chenar de jos. 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 ; chenar-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 6px fără repetare; )
Personal îmi place ușurința implementării și utilizării pictogramelor. Iată codul final cu codepen:
Versiunea lui Josh Riser este vizual similară cu meniul derulant anterior în HTML și CSS. Nu există un selector de copii „>” în cod (util în modelele stratificate), dar autorul folosește cu succes efectele CSS3 (tranziție, box-shadow și text-shadow) pentru un rezultat mai frumos. Conform linkului din sursă, nu există o descriere a procesului de creare a unui meniu vertical orizontal, așa că voi da imediat codul final:
În acest exemplu, ne vom uita la cum să facem un meniu derulant în CSS, în care, pe lângă articole, va exista 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 în testarea noastră totul a funcționat bine.
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 cele 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 script-ul fără prefixe pentru utilizarea proprietăților CSS fără prefixe. HTML rezultat pentru meniul drop-down arată astfel:
Aplicație
Bord
Opțiuni
Setări
Aplicație
Bord
Opțiuni
Aplicație
Bord
Opțiuni
Setări
Aplicație
Bord
Opțiuni
CSS pentru meniu
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 sunt flotante: aliniate la stânga și poziționate relativ, astfel încât să puteți adăuga ulterior un submeniu cu poziție: absolută;
Elementele de meniu folosesc stilul de bază + . Înălțimea este aceeași ca în clasa de navigație. #settings-ul link-ului de imagine de la începutul meniului este setat să se alinieze.
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.
Atingerea finală ne va permite să facem un meniu derulant 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 o inserare a unei imagini de fundal triunghi (triangle.png) pentru a indica submeniul - nu uitați să specificați calea corectă pentru aceasta și pentru alte imagini în exemplu. Aspectul submeniului este implementat folosind proprietatea opacitate. Soluția finală pe codepen:
Această versiune folosește în principal tehnici CSS2.1, soluția este nouă în plus sau în minus - pentru martie 2015. Dacă vă lipsește un subnivel din meniul vertical orizontal al site-ului, atunci acest exemplu conține trei simultan. Pseudoclasa :only-child adaugă un simbol „+” elementelor pentru a indica prezența submeniurilor.
Î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 schelet HTML și apoi adăugați treptat stiluri pentru acesta. Descărcați codul final de pe linkul către sursă, îl puteți vedea parțial în Codepen:
Total
Mai sus, ne-am uitat la 4 opțiuni pentru cum să faceți un meniu drop-down în CSS + HTML pentru , deși există multe mai multe exemple similare în rețea. 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 grămadă de CSS + HTML este suficientă, mai ales că acum principalele cerințe pentru meniu sunt confortul și viteza de încărcare rapidă.
În sfârșit, două comentarii la codurile de mai sus. Unele dintre exemplele derulante CSS folosesc imagini, așa că va trebui să vă uitați cu atenție la căile imaginilor și să introduceț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ă le verificați suplimentar performanța în diferite browsere.
Dacă cunoașteți alte implementări moderne interesante ale meniurilor derulante orizontale pentru site, trimiteți link-uri în comentarii.
