Cum se face un meniu orizontal css. Cum să faci un meniu orizontal folosind html5. Panoul jQuery cu diverse servicii sociale

În acest tutorial vom crea un meniu orizontal folosind CSS. Desigur, puteți folosi 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ş:

Pasul 1 - marcaj HTML

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

Pasul 2 - Creați stiluri CSS pentru meniul orizontal

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 100%); 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ă.

Pasul 3 - Stilul meniului Link

În continuare, vom scrie stiluri care adaugă câteva proprietăți CSS de bază, cum ar fi tipul fontului, culorile, umplutura etc. Apoi vom adăuga o umbră pentru text și tranzițiile 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; )

Pasul 4 - Meniu derulant

Î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 colțuri rotunjite în partea de 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 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- rază: 0 0 4px 4px -webkit-transiție: 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 în centru)

Concluzie

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: 395)

Bună ziua, dragi cititori ai blogului meu! Articolul de astăzi va fi foarte util pentru designerii de layout începători. Pentru că astăzi vom crea un meniu orizontal simplu. Înainte de a trece direct la aspect, vreau să spun câteva cuvinte despre motivul pentru care am decis să aleg acest subiect special pentru articol.

De fapt, totul este destul de simplu, când mă gândeam la subiectul următoarei lecții pentru site, am început să-mi amintesc și să-mi analizez experiența în studierea aspectului, cu ce am avut de a face stadiul inițial stabilindu-mă ca designer de layout, ceea ce mi-a fost cel mai de neînțeles când studiam acest domeniu etc. Mi-am pus toate aceste întrebări pentru a înțelege mai bine ce ar putea fi interesant pentru o persoană care își începe cariera de layout designer. Și personal, de îndată ce am început să studiez aspectul, cele mai multe întrebări au apărut în ceea ce privește aspectul diverselor meniuri, mai ales dacă despre care vorbim O meniu cu mai multe niveluri. Așa că astăzi vom vorbi despre meniu, și mai precis despre meniul orizontal. Deci, să începem!

Să începem aranjarea meniului nostru orizontal!

După cum probabil ați ghicit, primul lucru pe care trebuie să-l facem este să creăm o pagină HTML cu marcaj standard și să conectați un fișier de stil la ea. Nu voi intra în detalii despre acest pas, pentru că încă sper că nu ești atât de începător încât trebuie să-ți spun în detaliu ce sunt corpul și capul și cum se leagă stilurile. Permiteți-mi să spun că, pe lângă stilurile pentru meniul nostru, în fișier css Voi scrie cea mai simplă resetare pentru a reseta stilurile și pentru a obține aceeași afișare a indentării în toate browserele. Acesta este de fapt cum arată cea mai simplă resetare a mea:

Încă nu vom spune nimic în detaliu despre resetarea stilurilor, deoarece, în esență, acesta este un subiect pentru un alt articol, singurul lucru pe care trebuie să-l știți despre codul de mai sus este că, datorită acest cod Toate elementele de pagină pe care le vom scrie vor avea marjă și umplutură resetate la zero, pentru ca pagina noastră să arate la fel în toate browserele.

Deci, ce avem în noi? în această etapă? Avem pagina html cu marcaj standard:

Meniu orizontal

Și avem un fișier de stil conectat la această pagină (pentru mine este style.css), cu următorul conținut:

Următorul pas va fi crearea marcaj html pentru meniul nostru.

Se creează un marcaj pentru meniu

În marcajul nostru vom folosi etichetă nouă, care a apărut în HTML5, am decis să vă obișnuiesc imediat cu etichetele noi pentru a urma tendința și standardul, ca să spunem așa, În ciuda faptului că noile etichete HTML 5 nu sunt acceptate de browsere mai vechi, recomand în continuare să le folosiți. în aspectul dvs., deoarece este devreme sau mai târziu, va trebui totuși să treceți la ele, așa cum designerii de layout au trecut la un moment dat de la aspectul tabelar la aspectul bloc, aceasta este realitatea, este mai bine să urmați tendința!

Și din moment ce deja vorbim despre susținerea noilor etichete html 5, pentru a nu avea probleme cu acest lucru în browserele mai vechi, trebuie să includem o bibliotecă specială în documentul nostru - html5shiv. Acest lucru se face prin introducerea în
secțiunea de cap a paginii dvs. cu următorul cod:

Toate etichetele de după aceasta (și alte etichete legate de HTML5) vor fi percepute în mod normal de browserele mai vechi.

Să revenim direct la marcajul nostru. Apoi, trebuie să inserăm o listă cu marcatori în eticheta noastră, pentru mine arată astfel:

Acasă
Despre noi
Portofoliu
Blog
Contacte

Așadar, se pare că am terminat cu marcajul, este timpul să începem să scriem stiluri, deoarece acum meniul nostru nu arată foarte bine, ca să spunem ușor:

Stiluri de scriere pentru meniul nostru orizontal

Și astfel, primul lucru pe care trebuie să-l facem atunci când amenajăm meniul este să eliminam marcatorii de listă, evident că nu avem nevoie de ei, o facem astfel:

Ul( stil-listă:niciuna; )

După aceasta, meniul nostru va arăta astfel:

Nu prea îmi place cum meniul nostru este lipit de marginile browserului, să reparăm asta:

Cu acest cod, am stabilit lățimea meniului, i-am dat margini de sus și de jos de 50 de pixeli și l-am poziționat în centru. Cine nu știe dacă un element bloc are o lățime, atunci pentru a poziționa acest element strict în centru trebuie doar să-i dăm marginea(marja) în dreapta și stânga cu valoarea auto.

Următorul pas este să facem în sfârșit meniul nostru orizontal, acest lucru se face prin setarea elementelor

plutește la stânga

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 studiază-l temeinic, pentru că
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 */ )

Iată una dintre cele mai multe reguli importante- display:bloc;. Faptul este că, implicit, linkurile sunt elemente inline, iar elementele inline sunt indentate browsere diferite sunt folosite în moduri diferite, de aceea este recomandabil să faceți din legătură un element bloc și abia apoi să îi aplicați proprietățile asociate cu indentări externe sau interne. Acum nu vreau să vă împovărez cu informații inutile în timp. exemple reale tu însuți vei înțelege de ce se pune un asemenea 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 stabilim punctele (

) chenar din stânga de 1px dimensiune și culoare #666;. În ceea ce privește selectorul .menu li:first-child, aici folosim o pseudo-clasă specială care ne permite să selectăm primul element copil listă. De asemenea, vă recomand să citiți mai detaliat despre pseudo-clase pe Internet, veți învăța o mulțime de lucruri utile.

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.

Voi termina aici această lecție, sper din tot sufletul că ți-a fost de folos și acum știi cum să creezi un simplu meniu orizontal pe html purși css. 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. Vino din nou, ma voi bucura!!!

Descriere specificație

Eticheta este destinată să afișeze o listă de elemente de meniu. Similar cu etichetele și

În HTML4, eticheta a devenit învechită, se recomandă utilizarea etichetei în schimb

HTML	articol din meniu articol din meniu
HTML5	...

Necesar.

Utilizarea acestei etichete este depreciată de specificația HTML4. cod valid se obţine numai la folosirea tranziţiei. În HTML5, eticheta este utilizată corect.

HTML 4.01 IE Cr Op Sa Fx

Eticheta MENU

În această problemă:

bucatarie ruseasca. Supă Burlatskaya
Mâncare ucraineană. Vareniki
Bucătăria moldovenească. Boia de ardei
Bucătărie caucaziană. Supa kharcho
Bucătăria baltică. Vertinyai

Rezultatul acestui exemplu este prezentat în Fig. 1.

Orez. 1. Vedere a unei liste create folosind o etichetă

HTML5 IE Cr Op Sa Fx

Eticheta MENU

Nou... Deschide... Salvează
Copiere Cut Lipire

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 pe mai multe niveluri, pictograme pentru sub-articole, un bloc de căutare, liste complexeși așa mai departe. Recent a fost o mică selecție pe blog, dar astăzi ne vom uita la 4 exemple practice cum să faci 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 ancora (#) 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 fixă a elementelor de meniu și, de asemenea, vom adăuga colțuri rotunjite.

.menu, .menu ul, .menu li, .menu a ( margine : 0 ; umplutură : 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% ) (sus , #4c4e5 ; #2c2d33 100% ; fundal: -ms-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal: linear-gradient (sus , #4c4e5a 0% , # 2c2d33 100%; border-radius: 5px; -moz-border-radius: 5px;

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

Pasul 3 - design link

Pe lângă caracteristicile de bază în stiluri (font, culoare, înălțime), folosim și creăm tranzitie lina treceți cu mouse-ul în culorile textului. 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, sans-serif: bold culoare: 1px 1px rgba (0, 0, 0, .6): culoare .2s; moz-transition: color .2s ease-in-out: color .2s ease-in-out ) .menu li: first-child; ( chenar-stânga : niciunul ; ) .meniu li: ultimul copil a( chenarul-dreapta : niciunul ; ) .menu 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- 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:last-child 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 designul 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 submeniuri, setați inițial proprietatea de transparență (opacitate) egal cu zero, iar când plutește - unul. 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 ; transition : opacitate .25s ease .1s ; .menu li: hover > ul ( opacitate : 1 ; ) .menu ul li ( inaltime : 0 ; overflow : ascuns ; padding : 0 ; -webkit-transition : inaltime .25s ease . 1s ; -moz-transition: înălțime .25s ; ;

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

.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 ) no-repeat 6px center ; )

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 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 modelele 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 găsită adesea î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 un script fără prefixe pentru utilizarea proprietăților CSS fără prefixe. HTML final 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

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ă ; )

@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 : 24 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; 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 fundal verdeși butoanele 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 ; culoare : alb : #1f7f5c ; ( /* 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 : centru : 52px ;

#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ț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 : none ; ) .subnav li a ( bordur-bottom : 1px solid #2e2e2e ; ) #options : 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 inserție imagine de fundal triunghi (triangle.png) pentru a indica un submeniu - nu uitați să specificați calea cea buna pentru aceasta și alte imagini din exemplu. Aspectul unui submeniu este implementat folosind proprietăți de 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 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 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.

Dacă cunoașteți alte implementări moderne interesante ale meniurilor derulante orizontale pentru un site web, trimiteți linkuri în comentarii.

Sarcină

Afișați o listă cu marcatori pe orizontală, fără marcatori.

Soluţie

Etichetă listă cu puncte

vertical unul deasupra celuilalt. Pentru a crea elemente de navigare, în unele cazuri este convenabil să afișați lista pe orizontală. Există mai multe moduri de a realiza această afișare a listei.

Ar trebui să știți deja că HTML are elemente bloc și inline. Elementele în linie nu își creează propriile blocuri un exemplu de astfel de elemente sunt etichetele sau . Elementele de bloc sunt afișate cu linie nouăși creați un bloc dreptunghiular, un exemplu de astfel de etichete sau
Deci iată eticheta
este, de asemenea, un element bloc.

A eticheta
nu sa comportat ca un element bloc, este posibil cu Ajutor CSS faceți-o cu litere mici.

Afișarea proprietății CSS determină modul în care va fi afișat elementul în document. Să luăm în considerare trei dintre semnificațiile sale (deși există mai multe):
- bloc - elementul este afișat ca element bloc.
- inline - elementul este afișat ca inline.
- bloc inline - element de linie bloc, citește mai jos despre acest tip de element, îl vom folosi.
În primul rând, să facem o listă orizontală transformând punctele marcante în elemente inline. ÎN Stilul CSS Să scriem o regulă în care selectorul li este setat la proprietatea de afișare cu valoarea inline .
Listă orizontal ul.menu-top > li ( afișare: inline; /* Aranjați elementele pe orizontală */ list-style: none; /* Eliminați marcatorii listei */ padding: 5px; /* Margini în jurul textului */ chenar: solid 1px # 000000; culoare de fundal: #fffff0;
- Paragraful 1
- Punctul 2
- Punctul 3
Deci acest stil a funcționat și am primit aranjare orizontală articole din lista:
Figura 1. Exemplul #1 la locul de muncă.
Această metodă are dezavantaje. Faptul este că elementele inline au unele limitări în comparație cu elementele bloc. De exemplu, nu li se poate da lățimea și înălțimea, dar cele bloc pot.

De exemplu, avem nevoie ca elementul de meniu creat de noi să aibă o lățime de 150px și o înălțime de 40px. Să încercăm să schimbăm stilul în următorul, adică să adăugăm două reguli care stabilesc dimensiunea elementului de meniu:
ul.menu-top > li ( display: inline; /* Aranjați elementele orizontal */ list-style: none; /* Eliminați marcatorii listei */ padding: 5px; /* Margini în jurul textului */ chenar: solid 1px #000000 ; culoare de fundal: #ffff0 lățime: 150px;
Aceste modificări nu vor duce la nicio modificare. Pentru ca elementele de meniu să fie poziționate orizontal și pentru a putea seta lățimea și înălțimea, trebuie să seteze tipul la bloc inline . Să modificăm codul nostru exemplu:
Listă orizontal ul.menu-top > li ( display: inline-block; /* Aranjați elementele pe orizontală */ list-style: none; /* Eliminați marcatorii listei */ padding: 5px; /* Margini în jurul textului */ chenar: solid 1px #000000; culoare de fundal: #fffff0: 150px;
- Paragraful 1
- Punctul 2
- Punctul 3
Acest cod funcționează și modificările sunt vizibile:

Figura 2. Exemplul nr. 2 în acțiune.
Dar poate exista diferite variante, de exemplu, trebuie să afișăm liste imbricate în meniu:
Listă imbricată. ul.menu > li ( display: inline-block; /* Aranjați elementele pe orizontală */ list-style: none; /* Eliminați marcatorii listei */ padding: 5px; /* Margini în jurul textului */ background-color: #ffffff0 ; chenar: 1px solid #000000;
- Editați | ×
  - Anulare
  - A tăia
  - Copie
  - Introduce
- Font
  - Îndrăzneţ
  - Cursiv
  - Subliniat
- mărimea
  - Mic
  - Normal
  - In medie
  - Mare
Iată rezultatul acestui cod:

Figura 3. Exemplul nr. 3 la locul de muncă.
Vedem că blocurile nu sunt aliniate în înălțime așa cum ne-am dori. Desigur, puteți specifica pentru toate blocurile aceeasi inaltime, dar nu știm întotdeauna dinainte valoare exacta, și se poate schimba.

Dar de fapt, de ce se întâmplă asta?

Blocurile noastre au o proprietate de afișare setată la inline-block . Asta înseamnă că au calități precum elemente de bloc(abilitatea de a specifica lățimea și înălțimea) și elementele inline. Ceea ce vedem este calitatea elementelor inline.

Să ne uităm la un șir cu caractere „A” de diferite dimensiuni:

A A A A A A A

Vedem că toate literele sunt aliniate vertical de-a lungul liniei de jos. Mai precis, de-a lungul liniei de bază, dar să nu intrăm în buruieni acum. Așadar, același lucru s-a întâmplat cu blocurile noastre.

Pentru a alinia textul pe verticală, utilizați proprietatea de aliniere verticală. În exemplul nostru #3, trebuie să folosim valoarea top , care va alinia marginea de sus a elementului cu partea de sus a celui mai înalt element de pe linie.

Deocamdată să-l aplicăm unui șir cu caractere „A” de diferite dimensiuni:

A A A A A A A

Literele par să „sare” puțin. Am setat bordura CSS în sine litera mare, astfel încât să puteți vedea că de fapt nu există salturi, există spațiu gol între chenarul superior (de-a lungul căruia are loc alinierea) și punctul de sus al simbolului „A”.

Proprietatea de aliniere verticală trebuie aplicată fiecăruia element inline, nu se moștenește. Puteți citi mai multe despre această proprietate: vertical-align .

După această digresiune, vom continua să plasăm elementele listei pe orizontală.
A doua cale
Puteți plasa elementele din listă orizontal utilizând proprietatea float. Această proprietate specifică pe ce parte este aliniat elementul și are două poziții: stânga și dreapta.

Iată un exemplu folosind acest cod:
Listă orizontal ul.menu-top > li ( float: stânga; /* plasează lista pe orizontală */ list-style: none; /* Eliminați marcatorii listei */ padding: 5px; margin: 2px; chenar: 1px solid #000000; fundal -culoare: #fffff0;
- Paragraful 1
- Punctul 2
- Punctul 3
Iată rezultatul codului:
Figura 4. Exemplu de lucru.
Exemplul pare să funcționeze. Dar există un avertisment în utilizarea acestei proprietăți. Acum ne vom uita la asta. De exemplu, să luăm un cod în care sunt două listă orizontală Cu în diverse feluri aranjarea elementelor pe orizontală: afișare și plutire:
Listă orizontal ul( chenar: 1px roșu continuu; ) ul.menu-1 > li, ul.menu-2 > li ( list-style: none; /* Eliminați marcatorii listei */ padding: 5px; margin: 2px; chenar: 1px solid #000000; culoarea de fundal: #fffff0;
- Paragraful 1
- Punctul 2
- Punctul 3
- Paragraful 1
- Punctul 2
- Punctul 3
Iată rezultatul codului:
Figura 5. Exemplu de lucru.
În aceste exemple, lista containerelor
- sunt încă situate în afara containerului