• Acasă
• Știri
• Contacte
• Despre noi

Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm extern și căptușeală la lista în sine și marcatori la elementele listei. 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. Vom adăuga la ele culoare de fundal, modificați parametrii textului: culoare, dimensiunea fontului și saturația, eliminați sublinierea, adăugați mici adâncituriși redefiniți afișajul element de la inline la bloc. În plus, cadrele din stânga și de jos au fost adăugate elementelor din listă.

Când treceți mouse-ul peste un element de meniu, acesta aspect se poate schimba pentru a atrage 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 »

Î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, meniul cu link-uri de navigare de asemenea, este adesea amplasat orizontal în partea de sus a paginii web.

Un meniu orizontal poate fi creat prin stilare lista obisnuita. Afișează proprietatea elementelor

Pentru a plasa elementele de meniu orizontal, mai întâi creați listă cu puncte cu link-uri:

• Acasă
• Știri
• Contacte
• Despre noi

Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele listei de la bloc la inline:

#navbar (marja: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Încercați »

Acum trebuie doar să stabilim styling 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 »

Meniul pe care îl vom crea va avea principalele legături de navigare localizate în panou orizontal navigare și sub-articole care vor fi afișate numai după trecerea mouse-ului 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:

• Acasă
• Știri
• Contacte
• Despre noi

Vom plasa sub-articolele într-o listă separată, cuibându-l în element

• Acasă
• Știri
• Contacte
  • Abordare
  • Telefon
  • E-mail
• Despre noi

Acum să începem să scriem codul CSS. Mai întâi, trebuie să ascundeți lista cu sub-articole folosind afișarea: declarația nici unul, astfel încât acestea să nu fie afișate tot timpul pe pagina web. 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. Realizăm elemente de listă cu legături de navigare plutitoare, formând 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 drept 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: nici unul; înălțime: 100%; ) #navbar li a ( afișaj: bloc; umplutură: 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; )

În acest tutorial vom crea un meniu orizontal folosind CSS. Desigur, puteți utiliza deja soluții gata făcute, de exemplu, angajați programatori pentru CMS Made Simple. Cu toate acestea, nu căutați modalități ușoare, nu-i așa? :bătăuş:

În primul rând, trebuie să creăm elemente de listă cu o etichetă pentru fiecare articol din meniul nostru orizontal. Pentru a crea un submeniu trebuie să adăugați o altă listă de copii în interiorul celei părinte.

• Link #1
• Link #2
• Lista verticală
  • Documentație
  • Mesaje
  • Înregistrare
• Link #3
• Link #4
• Link #5

Inițial, meniul arată vertical, pentru a remedia acest lucru vom scrie câteva stiluri, vom edita indentările, marginile, culoarea de fundal și vom rotunji colțurile. Vom fixa lățimea și înălțimea. Vom alinia elementele de meniu la stânga folosind float: left (astfel încât navigarea să capete o structură orizontală).

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, #5c5e6a 0%, #3c3d44 100%); fundal: -moz-linear-gradient (sus, #5c5e6a 0%, #3c3d44 100%), #5c5e6a 0%, #3c3d44 100%); fundal: -ms-linear-gradient(sus, #5c5e6a 0%,#3c3d44 100%): liniar-gradient (sus, #5c5e6a 0%, #3c3d44-border-); radius: 4px; -moz-border-radius: 4px;

Să scriem următorul stil pentru un timp, ascunzând lista derulantă. Acest lucru va face editarea mai ușoară.

În continuare, vom scrie stiluri care adaugă câteva proprietăți CSS de bază, cum ar fi tipul fontului, culorile, umplutura etc. Apoi adăugați o umbră pentru text și tranziții de culoare pentru a crea un efect neted în care culoarea nu se schimbă instantaneu, ci la un anumit interval. Pentru a crea un separator de legături, să adăugăm un chenar la stânga și la dreapta, apoi eliminăm chenarul din stânga de la prima legătură și chenarul din dreapta de la ultima legătură. Când treceți cu mouse-ul peste meniu, doar culoarea se va schimba.

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 #494942; chenar-dreapta: 1px solid #4f5058; font- family: Helvetica, sans-serif: font-size: 1px 1px rgba(0,0,0,.6: color .3s-in-out); transition: color .3s ease-in-out: culoare .3s ease-in-out .menu li:first-child; stânga: niciunul; .menu li:last-child a( chenar-dreapta: niciunul; ) .menu li: hover > a (culoare: #9fde63; )

În primul rând, să eliminăm această linie de cod pe care am adăugat-o în pasul al doilea.

Meniu ul (afișare: niciunul; )

Acum vom edita stilul pentru submeniu. Să adăugăm o poziționare a submeniului de 40px în partea de sus și 0px în stânga elementului de meniu și să adăugăm colturi rotunjite de mai jos. Să setăm opacitatea la zero și să o schimbăm la 1 la trecerea cursorului pentru a crea un efect de fade in/out. Pentru efectul de diapozitiv sus/jos, trebuie să setăm înălțimea listei la 0px când meniul derulant este ascuns și la 36px când trecem cu mouse-ul peste meniul derulant.

Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radius: 0 0 4px 4px -webkit-transition: opacitate .3s ease; 1s; ) .menu li:hover > ul ( opacitate: 1; ) .menu ul li ( înălțime: 0; overflow: ascuns; padding: 0; -webkit-transition: înălțime .3s ease .1s; -moz-transition: înălțime .3s ușurință .1s;

Setați lățimea meniului derulant pe care se poate face clic la 100 px. După fiecare link am adăugat un chenar pentru a le separa. Vom elimina chenarul din ultimul link.

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 #464649; ) .menu ul li:last-child a ( chenar: niciunul; )

Pentru a completa un meniu CSS orizontal, trebuie să adăugați o pictogramă pentru fiecare submeniu derulant. Pentru a face acest lucru, vom crea o clasă personalizată pentru fiecare dintre submeniuri și vom adăuga o imagine de fundal.

Meniu a.d ( fundal: url(docs.png) fără repetare 6px centru; ) .menu a.m ( fundal: url(bubble.png) fără repetare 6px centru; ) .menu a.s ( fundal: url(arrow.png) nu -repetați 6px centru)

Am creat cu succes un meniu vertical orizontal folosind stiluri CSS3 și fără a-l folosi, deși a fost și posibil. Dacă aveți întrebări, spuneți-mi în comentarii.

(descărcări: 398)

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 pure cod css. Am observat adesea că oamenii folosesc javascript pentru a realiza 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.

Pentru 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ă vedem ce anume s-a realizat pozitie orizontala meniul ș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 diferentaîntre meniu obișnuit iar meniul drop-down este că nu stilăm UL 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 CSS pur cod. Încă nu îmi pot da seama de ce ar trebui să folosesc JavaScript, cu excepția poate pentru .

Vă 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.

• Punctul nr. 1
• Punctul nr. 2
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
• Punctul nr. 3
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
  • Subpunctul nr. 4
  • Subpunctul nr. 5
• Punctul nr. 4
  • Subpunctul nr. 1
• Punctul nr. 5
  • Subpunctul nr. 1
  • Subpunctul nr. 2
  • Subpunctul nr. 3
  • Subpunctul nr. 4
  • Subpunctul nr. 5

#meniu ( padding: 0; margin: 0; font-size: 100%; font-family: Georgia; ) #menu li ( list-style: none; float: left; inaltime: 33px; padding: 0; margin: 0 ; width: 150px: background: #171717; margine: 0; lățime: 150px; aliniere text: fundal: #7F7F7F; meniu li:hover ul, #menu li.jshover ul ( display: block; ) # 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 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- family: Helvetica, sans-serif: font-size: 1px 1px rgba(0,0,0,.6: color .2s-in-out); transition: color .2s ease-in-out: culoare .2s ease-in-out .menu li:first-child; stânga: niciunul; .menu li: ultimul copil a( chenar-dreapta: niciunul; ) .menu li: hover > 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- radius: 0 0 5px 5px -webkit-transiție: opacitate .25s ease .1s; opacitate .25s ease .1s ) .menu li:hover > ul ( opacitate: 1; ) .menu ul li ( inaltime: 0; overflow: hidden; padding: 0; -webkit-transition: inaltime .25s ease .1s; -moz-transition: înălțime .25s ease .1s -ms-transition: înălțime .25s ease .1s ) .menu li:hover > ul li ( înălțime: 36px; padding: 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 î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 — imagine link;
• 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ă prefix pentru utilizare Proprietăți CSS fără prefixe. Final opțiunea HTML pentru meniul derulant 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, întunecat Fundal griși î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; margine-stânga: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -dimensiune: 10px; inaltimea 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 ; margin-right: 0 outline: none: float-box: all ) ::-webkit-input-placeholder ( /* WebKit browsere */ color: white; ) :-moz-placeholder; Firefox 4 până 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 (border: 0 none; fundal: #1f7f5c url (search.png) center no-repeat; float: left; text-align: 52px;

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 o inserție imagine de fundal triunghi (triangle.png) pentru a indica un submeniu - nu uitați să indicați calea corectă pentru aceasta și pentru alte imagini din exemplu. Aspectul unui submeniu este implementat folosind proprietatea opacitate. Soluția finală pe codepen:

ÎN această opțiune Tehnicile CSS2.1 sunt utilizate în principal, 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 unora 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 rapida descărcări.

În sfârșit, două note despre codurile de mai sus. Unele exemple folosesc imagini pentru meniul drop-down în CSS, așa că va trebui să revizuiți cu atenție căile imaginii și să specificați valori 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.

Daca mai cunosti altele interesante implementari moderne meniuri verticale orizontale pentru site, trimiteți linkuri în comentarii.