Cum se creează un meniu orizontal în html. O prezentare excelentă a meniurilor frumoase pe mai multe niveluri cu codepen

Meniu li( float:left; )

Întregul nostru meniu a devenit acum orizontal.

Dacă nu înțelegeți ce s-a întâmplat exact și ce face proprietatea float, vă recomand să căutați pe google informații despre această proprietate și să o studiați cu atenție, deoarece
Nici o singură pagină de aspect nu poate face fără ea, vă pot spune cu siguranță. Ei bine, hai să continuăm!

Meniu li a( display:block;/* Faceți din link un element de bloc*/ padding:12px 20px;/* Setați umplutura */ text-decoration: none; /* eliminați sublinierea */ color:#fff;/* setați legăturile de culoare alb */ background:#444;/* faceți culoarea de fundal întunecată */ font:14px Verdana, sans-serif;/* setați dimensiunea și numele fontului */ )

Una dintre cele mai importante reguli aici este display:block;. Faptul este că, implicit, legăturile sunt elemente inline, iar indentările sunt aplicate diferit elementelor inline din diferite browsere, așa că este recomandabil să faceți din link un element bloc și abia apoi să îi aplicați proprietățile asociate cu indentările externe sau interne. Acum nu vreau să vă împovărez cu informații inutile; în timp, folosind exemple reale, veți înțelege de ce se pune un astfel de accent aici.

Să vedem ce avem, reîmprospătează pagina browserului și gata!:

După cum puteți vedea, nu arată rău, putem spune că, în principiu, meniul nostru este gata. Singurul lucru care mai trebuie făcut este să setați lumina linkurilor atunci când treceți cu mouse-ul și mi se pare că meniul va arăta mai bine cu separatoare între elemente.

Să începem cu delimitatorii:

Meniu li( chenar-stânga:1px solid #666; ) .meniu li:primul-copil( chenar-stânga:niciuna; )

Ce am făcut aici? Da, totul este foarte simplu, ne-am stabilit punctele (

Să vedem din nou ce avem:

După părerea mea, e mult mai bine cu delimitatorii.

Meniu li a:hover( background:#888; )

Din nou, folosind o pseudo-clasă specială, de data aceasta trecem cu mouse-ul, setăm culoarea link-ului când trecem cu mouse-ul peste el, uite:

Cred că e tare :) Sper să ajungi cu același meniu ca al meu.

Aici voi încheia această lecție, sper cu adevărat că v-a fost de folos și acum știți cum să dispuneți un meniu orizontal simplu folosind html și css pur. Desigur, am creat un meniu cu un singur nivel; va fi puțin mai complicat cu un meniu cu două niveluri (cu o listă imbricată), dar acesta este un subiect pentru o altă lecție, asta este tot pentru mine. Hai din nou, ma voi bucura!!!

Habr, salut!

Există o mulțime de soluții bune de la diferiți specialiști care apar pe Codepen și cred că cele mai bune dintre ele ar trebui adunate într-un singur loc. Prin urmare, acum 2 ani am început să salvez scripturi interesante pe diverse subiecte pe computer.

Obișnuiam să le postez în grupul de produse mr cloud IDE. Gefest, acestea au fost ansambluri de 5-8 soluții. Dar acum am început să acumulez 15-30 de scripturi pe diferite subiecte (butoane, meniuri, sfaturi cu instrumente și așa mai departe).

Astfel de seturi mari ar trebui prezentate mai multor specialiști. De aceea le postez pe Habr. Sper că vă vor fi de folos.

În această recenzie ne vom uita la meniurile cu mai multe niveluri.

Navigare orizontală plată

Bară de navigare frumoasă, cu submeniuri care apar fără probleme. Codul este bine structurat și folosește js. Judecând după caracteristicile utilizate, funcționează în ie8+.
http://codepen.io/andytran/pen/kmAEy

Antet Nav material cu meniuri derulante aliniate

Bară de legătură adaptivă cu submeniu cu două coloane. Totul se face în css și html. S-au folosit selectoare css3 care nu sunt acceptate în ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Meniu derulant Smooth Accordion

Meniu vertical elegant, cu elemente care se deschid fără probleme. Se folosește codul js de tranziție, transformare.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Bară de navigare verticală întunecată cu pictograme din ionicoane. Este folosit JavaScript. În ie8, cel mai probabil va funcționa fără animație.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Meniu dropdown cu animație

Meniu elegant cu două formate de ieșire: orizontal și vertical. Sunt folosite pictogramele și animația CSS3. Cu siguranță va arăta groaznic în ie8, dar în alte browsere totul este cool.
Link vertical: http://codepen.io/rizky_k_r/full/sqcAn/
Link către orizontală: http://codepen.io/rizky_k_r/pen/xFjqs

Meniu derulant CSS3

Meniu orizontal cu elemente mari și o listă derulantă de link-uri. Cod curat și minimalist fără js.
http://codepen.io/ojbravo/pen/tIacg

Meniu derulant simplu CSS pur

Meniu orizontal simplu, dar elegant. Folosește font-awesome. Totul funcționează pe css și html, fără js. Va funcționa în ie8.
http://codepen.io/Responsive/pen/raNrEW

Meniu derulant mega Bootstrap 3

O soluție excelentă pentru magazinele online. Afișează mai multe niveluri de categorii și imagini mari (de exemplu, un produs în vânzare). Se bazează pe boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Navigare plată

Bară de navigare elegantă cu submeniu neted. În browserele mai vechi, va afișa probleme.
http://codepen.io/andytran/pen/YPvQQN

Navigare imbricată 3D

Meniu orizontal cu animație foarte cool fără js!
http://codepen.io/devilishalchemist/pen/wBGVor

Mega meniu receptiv - Navigare

Meniu receptiv orizontal. Arată bine, dar versiunea mobilă este puțin șchiopătată. Se folosesc CSS, html și js.
http://codepen.io/samiralley/pen/xvFdc

Meniu Css3 pur

Meniu original. Cu cod simplu și curat, fără js. Utilizați pentru efecte „wow”.
http://codepen.io/Sonick/pen/xJagi

Meniu derulant complet CSS3

Meniu derulant colorat cu un singur nivel de imbricare. Sunt folosite icoane de la font-awesome, html și css.
http://codepen.io/daniesy/pen/pfxFi

Meniu derulant numai Css3

Un meniu orizontal destul de bun cu trei niveluri de imbricare. Funcționează fără js.
http://codepen.io/riogrande/pen/ahBrb

Meniuri derulante

Un meniu minimalist cu efectul original al unei liste imbricate de elemente care apar. Mă bucur că această soluție este și fără javascript.
http://codepen.io/kkrueger/pen/qfoLa

Meniu drop-down CSS pur

O soluție primitivă, dar eficientă. Doar css și html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Concept de interacțiune cu meniu

Concept de meniu interesant pentru un telefon mobil. Nu am mai văzut așa ceva până acum. Utilizează html, css și javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Creați un meniu derulant simplu

Cod curat și simplu, fără js. Cu siguranță va funcționa în ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Meniu derulant CSS pur

Soluția nu este rea, dar folosește prea multe clase. Mă bucur că nu există js.
http://codepen.io/jonathlee/pen/mJMzgR

Meniu derulant

Meniu vertical frumos cu cod javascript minim. JQuery nu este folosit!
http://codepen.io/MeredithU/pen/GAinq

Meniu derulant CSS 3

Un meniu orizontal cu legende suplimentare vă poate decora bine site-ul. Codul este simplu și clar. Javascript nu este folosit.
http://codepen.io/ibeeback/pen/qdEZjR

Soluție frumoasă cu mult cod (html, css și js). Au fost create 3 formate de submeniu. Soluția este potrivită pentru magazinele online.
http://codepen.io/martinridgway/pen/KVdKQJ

Meniuri derulante CSS3 (soluție specială)!

Meniu orizontal întunecat cu treisprezece (13) opțiuni de animație! Cu siguranta te sfatuiesc sa o citesti, iti va fi de folos in viata de zi cu zi.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Sper că v-a plăcut colecția de 23 de soluții. Dacă doriți să continuați să le citiți, atunci răspundeți la sondajul de mai jos.
Bucurați-vă de munca voastră tuturor.

Sarcina de a centra un meniu orizontal poate fi dificilă, mai ales pentru cei care nu folosesc CSS. Căutarea de soluții duce la o listă foarte limitată de metode, dintre care cele mai multe se bazează pe trucuri CSS, JavaScript sau utilizarea unor reguli non-standard care nu sunt acceptate de toate browserele. În acest tutorial, vom parcurge o metodă de centrare a unui meniu orizontal care utilizează doar reguli standard CSS și funcționează în toate browserele.

Mai jos este un meniu orizontal centrat în această coloană, în care este activată a doua filă. Puteți încerca să redimensionați fereastra sau pagina browserului pentru a vă asigura că meniul rămâne întotdeauna centrat și funcțional.

Pe pagina demonstrativă puteți vedea mai multe opțiuni de design pentru un meniu centrat orizontal. Oricare dintre ele poate fi folosit în proiectele dvs.

Toate meniurile prezentate în acest tutorial folosesc o structură simplă. Aceasta este o listă neordonată obișnuită de link-uri plasate într-un element div.

• Primul marcaj
• Al doilea marcaj
• A treia filă
• A patra filă

Mai jos este codul CSS complet folosit pentru a centra meniul. O explicație a principiului de funcționare este dată mai târziu în lecție.

#centeredmenu ( float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; ) #centeredmenu ul ( clear:left; float:left; list-style :none; margin:0; padding:0; position:relative; left:50%; text-align:center; ) #centeredmenu ul li ( display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; ) #centeredmenu ul li a ( display:block; margin:0 0 0 1px; padding:3px 10px; fundal:#ddd; culoare:#000; text-decor: none; line-height:1.3em; ) #centeredmenu ul li a:hover ( background:#369; color:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover (color:# fff; fundal:#000; greutate font: bold; )

Acțiunea metodei se bazează pe poziționarea relativă a elementelor bloc plutitoare unul în celălalt. În primul rând, să vedem cum se modifică dimensiunea elementelor odată cu deplasarea.

Element div(blocul) fără deplasare este întins pe toată lățimea disponibilă.

Dar dacă mutăm div-ul spre stânga, acesta se va micșora automat pentru a se potrivi cu conținutul său. Comprimarea este cheia pentru implementarea acestei metode de centrare a meniului. Vă ajută să mutați meniul în poziția corectă.

Să luăm un meniu standard aliniat la stânga și să-l refacem pas cu pas. Pentru claritate, articolele sunt colorate în culori diferite, astfel încât este imediat clar ce merge unde.

Vă rugăm să rețineți următoarele puncte:

• Element centeredmenu div(dreptunghi albastru) este decalat spre stânga, dar are o lățime de 100%, deci rămâne întins pe întreaga pagină.
• Element ul(dreptunghi roz) este în interiorul elementului meniu centrat divși se deplasează spre stânga. Aceasta înseamnă că va fi comprimat la lățimea conținutului său, adică la lățimea totală a tuturor marcajelor.
• Toate elementele li (dreptunghiuri verzi) sunt în interiorul elementului ulși deplasați-vă la stânga. Astfel, ele sunt comprimate la dimensiunea legăturilor din ele și aliniate într-o linie orizontală.
• În interiorul fiecărei legături (dreptunghiuri portocalii) este afișat textul marcajului: Marcaj 1, Marcaj 2 și așa mai departe.

Apoi compensăm elementul ul la dreapta cu 50% folosind pozitia:ruda; . Când un element este compensat procentual în aceste condiții, este important să ne amintim că lățimea totală a elementelor pe care le conține nu este lățimea sa. În cazul nostru, decalajul are loc la jumătatea ferestrei browserului (sau a spațiului disponibil pentru afișare). Ca urmare, meniul nostru începe în mijlocul ferestrei și se extinde parțial dincolo de limitele acesteia. Și să trecem la pasul următor.

Tot ce rămâne este să muți toate elementele li lăsat cu 50%. Aceasta reprezintă 50% din lățimea elementului nostru ul (containerul care conține meniul). Astfel, marcajele sunt mutate exact în centrul ferestrei.

Când utilizați această metodă de centrare, există câteva puncte importante de reținut:

• Din moment ce elementul ul se extinde parțial dincolo de fereastră, acest lucru are ca rezultat afișarea barelor de defilare. Prin urmare, trebuie să utilizați regula overflow:hidden;. pentru element centeredmenu div. Astfel, partea proeminentă a elementului div va fi tăiat.
• Din moment ce elementul ul nu este aliniat la marcaje, nu puteți utiliza niciun stil vizual pentru acesta. Lăsați elementul ul fără culoare de fundal și fără chenar, astfel încât să devină complet invizibil. Și stilurile pentru marcaje ar trebui folosite numai pentru elemente li.
• Dacă trebuie să setați stiluri speciale pentru primul și ultimul marcaj, trebuie să adăugați o clasă pentru primul și ultimul element li, astfel încât să le puteți modela individual.

Soluția propusă este compatibilă cu toate browserele, nu utilizează JavaScript și acceptă text redimensionabil.

Stil excelent al elementului de interfață sub forma unei liste derulante.

Când treceți mouse-ul peste buton, în partea de sus apare un panou.

Meniu javascript animat cu efect de strălucire.

Meniu proaspăt, frumos folosind jQuery.

Implementarea unui meniu cu un număr mare de articole. Derulează când mutați cursorul mouse-ului în sus sau în jos.

Derulare lină la secțiunea dorită de pe pagină. Plugin de navigare jQuery One Page.

Plugin nou jQuery. Implementare excelentă a navigării pe site animate. Când parcurgeți elementele de meniu, apare un bloc cu o descriere și posibile link-uri și, în funcție de elementul selectat, se schimbă fundalul paginii, care se întinde pentru a umple întregul ecran, indiferent de dimensiunea ferestrei browserului. Asigurați-vă că consultați pagina demo.

Meniu animat cu elemente pop-up.

Când derulați în jos în pagină, meniul rămâne fix în partea de sus a ecranului.

Pentru a implementa un meniu vertical cu un număr mare de articole. Derularea articolelor se face folosind rotița mouse-ului sau folosind link-urile „Anterior” și „Următorul”.

Meniu nou în stil Apple. Pare mai întunecat decât înainte, dar nu mai puțin drăguț.

Meniu derulant cu efect de fundal. Subelementele din meniu se extind în sus. Când treceți cu mouse-ul peste un element de meniu, imaginea de fundal se schimbă.

Meniu animat. Elementele de meniu sunt prezentate sub formă de pictograme și descrieri. Mai multe efecte grozave când treceți mouse-ul peste un element de meniu. Există 8 efecte, pentru a le vedea pe toate - urmați linkurile Exemple1-Exemple8 de pe pagina demo.

Meniu de defilare pe verticală și orizontală. O soluție bună dacă există un număr mare de articole în meniu.

Un meniu apare când faceți clic dreapta pe o anumită zonă.

Când selectați un element de meniu, elementele de submeniu sunt afișate în partea dreaptă.

Meniul original jQuery CSS3 vine în 7 stiluri diferite. Când treceți mouse-ul peste unul dintre elementele de meniu, restul par să se estompeze.

10 meniuri animate creative. Meniuri CSS3 orizontale și verticale cu diferite efecte și tranziții.

Arhiva include și fișierul PSD de meniu original.

Fundalul sau sublinierea unui element de meniu urmează mouse-ul cu o ușoară întârziere, în timp ce fundalul își schimbă ușor culoarea pe măsură ce se deplasează de la un articol la altul. Efect foarte frumos, pare neobișnuit. Atenție: efectul nu funcționează în operă

Un efect excelent când treceți mouse-ul peste una dintre imagini. Efectul amintește oarecum de jQDock descris mai sus.

Meniu orizontal, vertical. Efecte interesante.

Un efect foarte interesant. Perfect pentru proiectarea site-urilor web de portofoliu.

Efectul interesant al miniaturilor care apar la hover.

Efect de tranziție plăcut între articole.

Elementele de meniu sunt prezentate sub formă de miniaturi.

O bară de navigare cu o casetă de căutare care devine translucidă pe măsură ce derulați în jos pe pagină.

Meniu vertical grozav. Când treceți cursorul, apare un element de meniu.

Un efect interesant când treceți cursorul peste un element de meniu.

Când treceți mouse-ul peste meniu, vor apărea elementele acestuia. Elementele care apar sunt afișate sub formă de arc, a cărui rază o puteți seta la configurarea pluginului. În unele browsere nu veți vedea un arc de afișare, meniul va fi afișat direct, dar acest lucru nu va strica impresia generală a implementării acestui meniu jQuery.

Un efect interesant când treceți mouse-ul peste un element de meniu.

Meniu animat proaspăt în tonuri de gri.

O soluție interesantă pentru navigație, care este prezentată sub formă de dungi verticale. Când treceți mouse-ul peste aceste bare, apar o imagine pentru element și o listă de submeniuri. Când faceți clic pe un element de submeniu, apare o pagină cu o descriere. Această implementare este perfectă pentru site-uri promoționale sau prezentări. Asigurați-vă că verificați demo-ul pluginului.

Navigarea pe site este prezentată sub formă de 4 imagini, când treceți cu mouse-ul peste ele veți observa un efect animat interesant.

Panoul de navigare. Făcând clic pe săgeată, pagina derulează. Navigarea derulează împreună cu conținutul paginii.

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.

• Panoul meu de control
• Îi place
• Vizualizări
  • Documente
  • Mesaje
  • Sign out
• Încărcări
• Videoclipuri
• Documente

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.

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.

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.

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).

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
  • Setări
  • 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; 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; 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: 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ț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.