Cum să plasați elementele din listă pe orizontală? O prezentare excelentă a meniurilor frumoase pe mai multe niveluri cu codepen

1. Meniu jQuery luminos vertical 2. Efect cool. Meniu de dans.

4. Lista derulantă folosind jQuery

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.

6. Plugin jQuery „MobilyBlocks” pentru afișarea unui meniu radial

7. Meniu folosind sprites

Meniu javascript animat cu efect de strălucire.

Meniu proaspăt, frumos folosind jQuery.

9. Meniul jQuery „GarageDoor” 10. Meniul de derulare vertical jQuery

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

11. Designul listei derulante jQuery

12. Plugin de navigare în pagină

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

13. Plugin „Meniu conținut animat”

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.

14. Plugin de meniu jQuery „Sweet Menu”.

Meniu animat cu elemente pop-up.

15. S-a remediat meniul jQuery

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

16. Meniuri de derulare pentru kitul de glisare

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

17. Meniu elegant CSS3

18. Noul meniu CSS3 în stil Apple

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

19. Meniul jQuery original

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

20. Meniu animat cu jQuery

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.

21. „Meniu derulare” Meniu XML cu defilare

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

22. Meniul contextual pe un site web folosind jQuery

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

23. Meniu circular pe două niveluri pentru site

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

24. Meniul jQuery CSS3 cu efect de estompare „Blur Menu” CSS3

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.

25. Câteva meniuri jQuery CSS3 animate spectaculoase

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

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

27. Meniul MagicLine

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ă

28. Bule de imagine

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

31. Meniuri jQuery interesante cu diverse efecte

Meniu orizontal, vertical. Efecte interesante.

32. Excelent meniu jQuery în stil Apple

34. Meniu jQuery cu un efect interesant

36. Meniu proaspăt cu un efect interesant folosind jQuery

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

Efectul interesant al miniaturilor care apar la hover.

40. Listă derulantă cu derulare automată

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

42. Excelent meniu jQuery

43. Frumos mare meniu jQuery

44. Meniuri de derulare jQuery

Elementele de meniu sunt prezentate sub formă de miniaturi.

46. Meniul de navigare radial jQuery

47. Meniul CSS și jQuery

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

48. Meniul jQuery orizontal

49. Meniul jQuery vertical

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

50. Meniul jQuery orizontal

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

52. Meniul dropdown jQuery

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.

53. Bara de navigare CSS și jQuery

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

54. Panoul pop-up jQuery

Meniu animat proaspăt în tonuri de gri.

58. Navigare pe coloană pe site folosind jQuery

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.

59. Navigare pe site jQuery

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.

60. Bara de navigare derulează cu conținut

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

61. Panoul jQuery cu diverse servicii sociale

62. Meniu jQuery animat îngrijit

63. Meniul jQuery „Penele de acuarelă”.

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.

Exemplu de meniu centrat

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.

Marcaj HTML

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ă

Meniu centrat Cod CSS

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; background:#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; )

Cum funcționează metoda de centrare?

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

Meniu standard aliniat la stânga

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 meniu centrat 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.

Schimbarea poziției unei liste neordonate

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.

Schimbați poziția tuturor elementelor de meniu

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âteva note importante

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 meniu centrat 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.

Concluzie

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

Majoritatea site-urilor web clasice de pe Internet folosesc un meniu orizontal ca element principal de navigare. Uneori poate conține diverse caracteristici suplimentare - structuri cu mai multe niveluri, pictograme pentru sub-articole, un bloc de căutare, liste complexe etc. Recent a fost o mică selecție pe blog și astăzi vom analiza 4 exemple practice despre cum să faceți un meniu derulant folosind CSS + HTML. Informațiile vor fi utile dezvoltatorilor începători și celor care doresc să schimbe navigarea pe site-ul lor.

Primul tutorial CSS3 Dropdown Menu este cel mai nou din colecție (din aprilie 2016). Avantajele soluției: în acest meniu vertical orizontal pentru site, sub-articolele conțin pictograme, implementarea și codul CSS în sine sunt destul de simplu de înțeles și implementat.

Pasul 1 - Markup HTML

Primul pas este să creați o listă neordonată în HTML cu link-uri de ancorare (#) pentru elementele sale. Acolo, într-unul dintre articole, adăugăm o altă listă imbricată, care va fi responsabilă de submeniu.

Pasul 2 - Afișați meniul

Eliminam indentările inutile din CSS pentru elementele meniului vertical orizontal al site-ului. În aceeași etapă, vom seta o lățime și înălțime fixe ale elementelor de meniu și, de asemenea, vom adăuga colțuri rotunjite.

.menu, .menu ul, .menu li, .menu a ( margine : 0 ; padding : 0 ; chenar : niciunul ; contur : niciunul ; ) .menu ( înălțime : 40 px ; lățime : 505 px ; fundal : #4c4e5a ; fundal : -webkit-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : -moz-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal: -o-linear-gradient (sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : -ms-linear-gradient(sus , #4c4e5a 0% , #2c2d33 100% ) ; fundal : liniar-gradient(sus , #4c4e5a 0% , #4c4e5a 0% ) 2c2d33 100% ); -webkit-border-radius: 5px ; -moz-border-radius: 5px ; border-radius: 5px ; ) .menu li (poziție: relativă; list-style: none; float: stânga; afișare: bloc; înălțime: 40px;)

Meniu, .menu ul, .menu li, .menu a ( marja: 0; umplutură: 0; chenar: niciunul; contur: niciunul; ) .meniu ( înălțime: 40px; lățime: 505px; fundal: #4c4e5a; fundal: - webkit-linear-gradient(sus, #4c4e5a 0%, #2c2d33 100%); fundal: -moz-linear-gradient(sus, #4c4e5a 0%, #2c2d33 100%); fundal: -o-linear-gradient( sus, #4c4e5a 0%,#2c2d33 100%); fundal: -ms-linear-gradient (sus, #4c4e5a 0%, #2c2d33 100%); fundal: linear-gradient (sus, #4c4e5a 0%, #2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) .menu li (poziție: relativă; list-style: none; float: stânga; afișare: bloc ; înălțime: 40px; )

Pasul 3 - conectarea

Pe lângă caracteristicile de bază ale stilurilor (font, culoare, înălțime), folosim și creăm o tranziție lină a culorii textului atunci când trecem cu mouse-ul. Adăugăm și separatoare în meniu, eliminând chenarul de la primul element din stânga și din ultimul din dreapta.

.menu li a ( afișare : bloc ; umplutură : 0 14 px ; margine : 6 px 0 ; înălțime linie : 28 px ; decor text : niciuna ; chenar- stânga : 1 px solid #393942 ; chenar- dreapta : 1 px solid #4f5058 ; font -familie: Helvetica, Arial, sans-serif; greutatea fontului: bold; dimensiunea fontului: 13px; culoare: #f3f3f3; text-shadow: 1px 1px 1px rgba (0 , 0 , 0 , .6) ; -webkit- tranziție: culoare .2s ease-in-out; -moz-transition: culoare .2s ease-in-out; -o-tranziție: culoare .2s ease-in-out; -ms-transition: culoare .2s ease-in -out; tranziție: culoare .2s ease-in-out; ) .meniu li: primul copil a (chenar-stânga: niciunul ; ) .meniu li: ultimul-child a( chenar-dreapta: niciunul ; ) .meniu li : hover > a ( culoare : #8fde62 ; )

Meniu li a (afișare: bloc; umplutură: 0 14px; margine: 6px 0; înălțime linie: 28px; text-decor: niciunul; chenar-stânga: 1px solid #393942; chenar-dreapta: 1px solid #4f5058; font- familie: Helvetica, Arial, sans-serif; greutate font: bold; dimensiune font: 13px; culoare: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : culoare .2s ease-in-out; -moz-transition: culoare .2s ease-in-out; -o-transition: culoare .2s ease-in-out; -ms-transition: culoare .2s ease-in- ieșire; tranziție: culoare .2s ease-in-out; ) .meniu li:primul copil a (chenar-stânga: niciunul; ) .meniu li:last-child a( chenar-dreapta: niciunul; ) .meniu li: plasați cursorul > a (culoare: #8fde62; )

Pasul 4 - submeniu

Deoarece avem un meniu derulant de site folosind CSS, ar trebui să setăm și un design pentru lista imbricată. Mai întâi, setați o marjă de 40px în partea de sus și 0px în stânga + adăugați colțuri rotunjite. Pentru a afișa/ascunde submeniul, setați inițial proprietatea opacității la zero și când treceți cu mouse-ul la unu. Pentru a crea efectul apariției unui submeniu, setați valoarea înălțimii listei la zero și cu hover = 36px.

.menu ul ( poziție : absolut ; sus : 40px ; stânga : 0 ; opacitate : 0 ; fundal : #1f2024 ; -webkit-border-radius: 0 0 5px 5px ; -moz-border-radius: 0 0 5px 5px ; border -radius: 0 0 5px 5px ; -webkit-transition: opacitate .25s ease .1s ; -moz-transition: opacitate .25s ease .1s ; -o-tranziție: opacitate .25s ease .1s ; -ms-transition: opacity .25s ease .1s ; transition : opacitate .25s ease .1s ; ) .menu li: hover > ul ( opacitate : 1 ; ) .menu ul li ( înălțime : 0 ; overflow : ascuns ; padding : 0 ; -webkit-transition : înălțime .25s ease .1s ; -moz-transition: înălțime .25s ease .1s ; -o-transition: înălțime .25s ease .1s ; -ms-transition: înălțime .25s ease .1s ; tranziție: înălțime .25s ușurință .1s ; ) .menu li: hover > ul li ( înălțime : 36px ; overflow : vizibil ; padding : 0 ; )

Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- rază: 0 0 5px 5px; -webkit-transition: opacitate .25s ease .1s; -moz-transition: opacitate .25s ease .1s; -o-tranziție: opacitate .25s ease .1s; -ms-transition: opacitate . 25s ease .1s; tranziție: opacitate .25s ease .1s; ) .meniu li:hover > ul ( opacitate: 1; ) .menu ul li ( înălțime: 0; overflow: ascuns; padding: 0; -webkit-transition: înălțime .25s ease .1s; -moz-transition: înălțime .25s ease .1s; -o-tranziție: înălțime .25s ease .1s; -ms-transition: înălțime .25s ease .1s; tranziție: înălțime .25s ease . 1s; ) .menu li:hover > ul li ( înălțime: 36px; overflow: vizibil; umplutură: 0; )

Setăm lățimea legăturilor = 100px, se adaugă un chenar de jos în partea de jos a tuturor elementelor, cu excepția ultimului. De asemenea, dacă doriți, puteți plasa poze pentru articolele din submeniu (atenție! nu uitați să schimbați căile către imaginile din cod cu cele pe care le utilizați).

.menu ul li a ( lățime : 100px ; padding : 4px 0 4px 40px ; margine : 0 ; chenar : niciunul ; bordur-bottom : 1px solid #353539 ; ) .menu ul li : ultimul copil a ( chenar : niciunul ; ) .meniu a.documente ( fundal : url (../img/docs.png ) centru fără repetare 6px ; ) .meniu a.mesaje ( fundal : url (../img/bubble.png ) centru fără repetare 6px ; ) .menu a.signout ( fundal : url (../img/arrow.png ) centru 6px fără repetare ; )

Meniu ul li a ( lățime: 100 px; umplutură: 4 px 0 4 px 40 px; margine: 0; chenar: niciunul; chenar- jos: 1 px solid #353539; ) .menu ul li:last-child a ( chenar: niciunul; ) . meniu a.documente ( background: url(../img/docs.png) no-repeat 6px center; ) .meniu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( fundal: url(../img/arrow.png) centru 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

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 ; tip list-style : niciunul ; poziție : relativă ; )

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margine: 0; umplutură: 0; ) .nav ( fundal: #232323; înălțime: 60 px; afișare: bloc inline; ) .nav li ( float: stânga; list-style-type: niciunul; poziție: relativă; )

2. Formatarea link-urilor

Elementele de meniu folosesc designul de bază + . Înălțimea este aceeași ca în clasa de navigație. Pentru #settings linkul de imagine de la începutul meniului, alinierea este setată.

.nav li a (dimensiune font: 16px; culoare: alb; afișaj: bloc; înălțime linie: 60px; umplutură: 0 26px; text-decor: niciunul; margine-stânga: 1px solid #2e2e2e ; font-family: Montserrat , sans-serif ; text-shadow : 0 0 1px rgba ( 255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover ( background-color : #2e2e2e ; ) #settings a ( padding : 18px ; inaltime : 24px ; dimensiunea fontului: 10px; înălțimea liniei: 24px; )

Nav li a (dimensiune font: 16px; culoare: alb; afișaj: bloc; înălțime linie: 60px; umplutură: 0 26px; text-decor: niciunul; chenar-stânga: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); ) .nav li a:hover ( background-color: #2e2e2e; ) #settings a ( padding: 18px; inaltime: 24px; dimensiunea fontului: 10px; înălțimea liniei: 24px; )

3. Bloc de căutare

Acest element are o lățime fixă și este format din mai multe părți - un câmp de introducere (#search_text) cu un fundal verde și un buton de căutare (#search_button). În unele browsere, culoarea de fundal poate fi gri.

#căutare ( lățime : 357px ; margine : 4px ; ) #search_text ( lățime : 297px ; padding : 15px 0 15px 20px ; font-size : 16px ; font-family : Montserrat, sans-serif ; chenar : 0 niciunul ; înălțime : 52px ; margine-dreapta: 0; culoare: alb; contur: niciunul; fundal: #1f7f5c; float: stânga; dimensiunea casetei: chenar-box; tranziție: toate 0.15s ; ):: -webkit-input-placeholder ( /* Browsere WebKit */ culoare : alb ; ) : -moz-placeholder ( /* Mozilla Firefox 4 la 18 */ culoare : alb ; ):: -moz-placeholder ( /* Mozilla Firefox 19+ */ culoare : alb ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ culoare: alb ; ) #search_text : focus ( fundal : rgb (64 , 151 , 119 ) ; ) #search_button ( chenar : 0 niciunul ; fundal : #1f7f5c url (search.png) centru fără repetare; lățime: 60px; float: stânga; umplutură: 0; text-align: center; înălțime: 52px; cursor: pointer;)

#căutare ( lățime: 357px; margine: 4px; ) #search_text( lățime: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; chenar: 0 niciunul; înălțime: 52px ; margine-dreapta: 0; culoare: alb; contur: niciunul; fundal: #1f7f5c; float: stânga; dimensiunea casetei: chenar-box; tranziție: toate 0,15s; ) ::-webkit-input-placeholder ( /* Browsere WebKit */ culoare: alb; ) :-moz-placeholder ( /* Mozilla Firefox 4 la 18 */ culoare: alb; )::-moz-placeholder ( /* Mozilla Firefox 19+ */ culoare: alb; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ culoare: alb; ) #search_text:focus ( fundal: rgb(64, 151, 119); ) #search_button ( chenar: 0 niciunul; fundal: #1f7f5c url (search.png) centru fără repetare; lățime: 60 px; float: stânga; umplutură: 0; text-align: center; înălțime: 52 px; cursor: pointer; )

4. Submeniu derulant

Atingerea finală ne va permite să facem un meniu derulant în CSS care se declanșează pentru ultimul element #opțiuni.

#opțiuni a( chenar-stânga : 0 niciunul ; ) #opțiuni > a ( imagine de fundal : url (triangle.png ) ; poziție de fundal : 85% centru ; repetare de fundal : fără repetare ; padding-dreapta : 42px ; ) .subnav ( vizibilitate : ascuns ; poziție : absolut ; sus : 110 % ; dreapta : 0 ; lățime : 200 px ; înălțime : automat ; opacitate : 0 ; tranziție : toate 0,1 s ; fundal : #232323 ; ) .subnav li ( float : niciunul ; ) .subnav li a ( chenar-jos : 1px solid #2e2e2e ; ) #opțiuni : hover .subnav ( vizibilitate : vizibil ; sus : 100% ; opacitate : 1 ; )

#opțiuni a( chenar-stânga: 0 niciunul; ) #opțiuni>a ( imagine de fundal: url(triangle.png); poziția fundal: 85% centru; fundal-repetare: fără repetare; padding-dreapta: 42px; ) .subnav ( vizibilitate: ascuns; poziție: absolut; sus: 110%; dreapta: 0; lățime: 200px; înălțime: automat; opacitate: 0; tranziție: toate 0,1 s; fundal: #232323; ) .subnav li ( float : nici unul; ) .subnav li a ( chenar-jos: 1px solid #2e2e2e; ) #options:hover .subnav (vizibilitate: vizibil; sus: 100%; opacitate: 1; )

În stiluri veți găsi inserarea unei imagini de fundal triunghi (triangle.png) pentru a indica submeniul - nu uitați să indicați calea corectă pentru aceasta și alte imagini în exemplu. Aspectul unui submeniu este implementat folosind proprietatea opacitate. Soluția finală pe codepen:

Această opțiune folosește în principal tehnici CSS2.1, soluția plus sau minus este nouă - pentru martie 2015. Dacă vă lipsește un subnivel dintr-un meniu vertical orizontal pentru un site, atunci acest exemplu conține trei simultan. Folosind pseudo-clasa:only-child, un simbol „+” este adăugat la articole pentru a indica prezența unui submeniu.

În general, un exemplu bun și simplu. Nu vom descrie procesul de implementare în detaliu, deoarece... este similar cu cele anterioare - mai întâi creați un cadru HTML, apoi adăugați treptat stiluri pentru acesta. Descărcați codul final folosind linkul către sursă; îl puteți vizualiza parțial în Codepen:

Total

Mai sus ne-am uitat la 4 opțiuni pentru cum să faceți un meniu derulant folosind CSS + HTML pentru, deși există multe mai multe exemple similare pe Internet. Există soluții cu jQuery, dar acest lucru este cel mai probabil util doar pentru implementarea unor efecte speciale și sarcini non-standard. În cele mai multe cazuri, o combinație de CSS + HTML va fi suficientă, mai ales că acum principalele cerințe pentru un meniu sunt confortul și viteza de încărcare rapidă.

În sfârșit, două note despre codurile de mai sus. Unele exemple folosesc imagini în CSS pentru meniul drop-down, așa că va trebui să revizuiți cu atenție căile imaginilor și să furnizați valorile corecte pentru site-ul dvs. În al doilea rând, unele dintre soluții au o vechime de 2-3 ani, așa că ar trebui să verificați încă o dată performanța acestora în diferite browsere.

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

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
- bucatarie ruseasca. Supă Burlatskaya
- Mâncare ucraineană. Vareniki
- bucataria moldoveneasca. Boia de ardei
- Bucătărie caucaziană. Supa kharcho
- Bucătăria baltică. Vertinyai
- Nou... Deschide... Salvează
- Copiați Cut Lipiți