Meniu CSS simplu. Schimbăm meniul într-unul vertical. Meniu jQuery cu efect interesant
Salutare dragi vizitatori ai blogului meu! Astăzi vom vorbi despre meniul principal orizontal al site-ului, și anume cum să aliniați meniul orizontal în centru. Da, la prima vedere, ce este atât de complicat - am setat indentările necesare, le-am ajustat și gata. Dar există câteva nuanțe aici. Un site, în primul rând, este dinamic, adică. Conținut nou apare constant pe site, apar noi blocuri de informații etc. Așa pot apărea/dispără unele elemente în meniul principal. Ținând cont de toate acestea, trebuie să ne asigurăm că atunci când adăugăm sau eliminăm un element de meniu, meniul rămâne în centru. Desigur, nu este întotdeauna necesar să-l centrați, totul depinde de design. Dar dacă totuși intenționați să plasați meniul orizontal în centru, atunci folosind câteva trucuri simple în CSS putem obține rezultatul dorit.
Structura articolului
Meniu orizontal în centru fără elemente derulante
Mai întâi, să ne uităm la exemplul unui meniu orizontal care nu are elemente derulante.
cod HTML
Cod Css
*, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box: 0 ) #mainmenu: nici unul; 50%; float: left margin: 0 10px high: 40px ) #mainmenu ul li a:hover;Să privim totul în ordine, totul este simplu aici. Creăm un container „mainmeniu” în care plasăm meniul nostru sub forma unei liste neordonate.
Acum este timpul să plecăm stiluri css. Mai întâi resetăm toate marjele și umplutura la zero pentru toate browserele. Apoi, folosind proprietatea „float:left”, ne deplasăm lista neordonată la stânga și apoi, folosind poziționarea relativă, o deplasăm cu 50% la dreapta. Lățimea listei „ul” va fi egală cu suma lungimilor tuturor elementelor „li” care se află în interiorul acesteia. Astfel, dacă împărțim mental fereastra browserului în jumătate, meniul nostru se va muta în dreapta liniei de separare. Pentru aliniere, vom aplica și poziționarea relativă elementelor „li” și le vom muta la stânga cu 50%, specificând proprietatea „left:-50%”. Și, de asemenea, aproape am uitat, containerul nostru „mainmeniu” trebuie să specifice proprietatea "overflow:ascuns", altfel vom primi dungă orizontală sul.
Asta e, acum meniul nostru este aliniat la centru. Acum puteți adăuga sau scădea puncte, acest lucru nu va afecta poziționarea. De asemenea, puteți utiliza acest meniu pe site-urile dvs. web prin simpla schimbare a stilurilor pentru a se potrivi cu designul dvs.
Meniu orizontal în centru cu elemente derulante
Acum să ne uităm la sub-articolele derulante. Aici situația este oarecum diferită și oarecum mai complicată, pentru că în primul caz, sub-articolele noastre nu vor apărea, deoarece am specificat proprietatea „overflow: hidden” în blocul „mainmenu”. Aceasta înseamnă că elementele din afara acestui bloc nu vor fi afișate. Dar există o cale de ieșire.
Deci, am modificat codul anterior și am eliminat proprietatea „overflow:hidden” din el.
cod HTML
Cod CSS
*, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- dimensionare: border-box; dimensionare: border-box: 0; index: 10 ) #mainmenu ul ( clar: stânga; poziție: relativă; dreapta: 50%; înălțime: 40px; float: dreapta; text-align: center; font: 15px Arial, Helvetica , sans-serif; list-style: nici unul; margine: 0 ) /** Puncte principale **/ #mainmenu > ul > li ( poziție: relativ; stânga: 50%; float: stânga; înălțime: 40px ; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( chenar-stânga: 1px solid #666; afișaj: bloc; culoare: #fff; text-decor: niciunul; padding: 0 20px; line-height: 40px; ) #mainmenu > ul > li:first- copil > a ( chenar: niciunul ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li active > a (color: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Subiteme drop-down */ #mainmenu ul li ul ( poziție: absolut; stânga: 0; sus: 40px; afișaj: niciunul; stil-listă: niciunul; vizibilitate: ascuns; umplutură: 0; marja: 0; lățime: 200px ) #mainmenu > ul > li ul li ( culoare de fundal: #666; poziție: relativ; stânga: 0; afișare: element-listă; float: niciunul; înălțime: automat; margine: 0; text-align: stânga; ) #mainmenu ul li ul li a (border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( poziție: relativ; ) #mainmenu ul li ul > li.parent > a::before ( chenar-sus: 1px solid #fff; chenar-dreapta: 1px solid #fff; conținut: ""; afișare: bloc; poziție: absolute; dreapta: 15px; ) /* Elemente derulante de nivelul doi */ #mainmenu ul li:hover > ul ( opacitate: 1; vizibilitate: vizibil; margine: 0; ) #mainmenu ul li ul li ul ( sus: 0; stânga: 200px; marjă: 0 0 0 20px lățime: 180px )Acum meniul nostru este plasat în centru și sub-articole apar când treceți cu mouse-ul peste el.
Centrarea meniurilor cu flexbox
Aliniați meniul la centru De asemenea, puteți aplica o nouă regulă în css - flexbox. În general, vreau să dedic o postare separată trucurilor cu flexbox, merită, simplifică foarte mult viața unui designer de layout. În general, nu vom merge mai adânc aici... Voi da doar aici cod css pentru un meniu cu elemente derulante. Codul HTML este același ca mai sus.
Cod CSS
*, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- dimensionare: border-box; dimensionare: border-box: 0; -index: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: orizontal; -webkit- box-direction: normal -webkit-flex-direction: row-align: 15px Arial, sans-serif-content: 0; center; ** Puncte principale **/ #mainmenu > ul > li ( poziție: relativă; înălțime: 40px; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( chenar-stânga: 1px solid #666; afișaj: bloc culoare: #fff; umplutură: 0 20px; înălțimea liniei: 40px; ) #mainmenu > ul > li:first-child > a ( chenar: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( culoare: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Sub-articole drop-down */ #mainmenu ul li ul ( poziție: absolut stânga: 0; afișare: niciunul; vizibilitate: margine: 0; : #666; poziție: stânga: 0; float: niciunul; text-align: stânga; solid #999; culoare: #fff; umplutură: 10px 15px; text-decor: niciunul; ; top: 50% transformare: translateY(- 50%) rotire(45deg); înălțime: 6px; latime: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Drop- elemente în jos al doilea nivel */ #mainmenu ul li:hover > ul ( opacitate: 1; vizibilitate: vizibil; margine: 0; ) #mainmenu ul li ul li ul ( sus: 0; stânga: 200px; margine: 0 0 0 20px lățime: 180px)După cum puteți vedea, regulile s-au schimbat doar pentru lista de părinți - #mainmenu ul. Singurul lucru a fost că a trebuit să adăugăm prefixe pentru versiunile anterioare ale browserelor. Observ că regula flexbox este înțeleasă corect doar de browsere moderne. Dacă vizați browsere mai vechi, atunci opțiunea flexibilă va trebui amânată. Puteți vedea ce browsere înțeleg bine flexbox
Dacă site-ul dvs. este mai mult decât o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Meniul este o secțiune a unui site web concepută pentru a ajuta vizitatorii să navigheze pe site. Orice meniu este o listă de link-uri care duc la pagini interne site-ul. Cel mai într-un mod simplu adăugarea unei bare de navigare la un site înseamnă crearea unui meniu cu folosind CSSși HTML.
Meniu vertical
Primul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, va trebui să putem identifica lista, așa că îi vom adăuga un atribut id cu identificatorul „navbar”. Fiecare element
Următoarea noastră sarcină este să resetam stilurile implicite ale listei. Trebuie să eliminăm căptușeala exterioară și interioară din listă în sine și marcatoarele din articolele din listă. 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 și greutatea fontului, eliminați sublinierea, adăugați mici indentări ș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ă.
Cea mai importantă parte a modificărilor noastre este redefinirea elementelor inline pentru a bloca elemente. Acum linkurile noastre ocupă tot spațiul disponibil al articolelor din listă, adică pentru a urmări linkul nu mai trebuie să plasăm cursorul exact peste text.
#navbar a ( culoare de fundal: #949494; culoare: #fff; umplutură: 5px; text-decor: niciunul; font-weight: bold; margine-stânga: 5px solid #33ADFF; display: block; ) #navbar li ( chenar-stânga: 10px solid #666 chenar-jos: 1px solid #666;
Am combinat tot codul descris mai sus într-un singur exemplu, acum făcând clic pe butonul de încercare, puteți accesa pagina de exemplu și vedeți rezultatul:
Încerca "
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 »
Meniu orizontal
Î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, meniurile cu legături de navigare sunt adesea situate 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:
Să scriem câteva reguli pentru lista noastră care resetează stilul implicit folosit pentru liste și să redefinim elementele din listă de la bloc la inline:
#navbar (marja: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Încercați »
Acum tot ce trebuie să facem este să definim stilul pentru meniul nostru orizontal:
#navbar (marjă: 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 »
Meniu derulant
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:
Vom plasa sub-articole în listă separată, cuibându-l într-un element
Încerca "
Acum să începem scrierea CSS cod. 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. Facem elemente de listă cu link-uri de navigare plutitoare, formând un 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; )
1. Meniu jQuery luminos vertical
2. Efect cool. Meniu de dans.
4. Listă 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 sprite-uri
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 o cantitate mare puncte. Derulează când mutați cursorul mouse-ului în sus sau în jos.
11. Designul listei derulante jQuery
12. Plugin de navigare în pagină
Defilare lină la la secțiunea necesară Pe pagina. Plugin de navigare jQuery One Page.
13. Plugin „Meniul conținut animat”
Nou plugin 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 „Meniu dulce”
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 in Stilul mere. 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ă. Buna decizie la cantitati mari elemente de meniu.
22. Meniul contextual pe un site web folosind jQuery
Meniul apare când faceți clic Click dreapta mouse-ul 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 este realizat în 7 diferite styling. 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 diverse efecteși tranziții.
Arhiva include și originalul Fișier PSD meniul.
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. Foarte efect 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
Orizontală, meniu 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 forma unui arc, a cărui rază o puteți seta la configurarea pluginului. În unele browsere nu veți vedea un afișaj cu arc, meniul va fi afișat direct, dar acest lucru nu se va strica. impresie generala din această implementare a meniului 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 navigare, care este prezentată în formular 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 foarte listă limitată metode, dintre care majoritatea se bazează pe trucuri CSS, JavaScript sau pe utilizarea unor reguli non-standard care nu sunt acceptate de toate browserele. ÎN această lecție ne vom uita la o metodă de centrare a unui meniu orizontal care utilizează doar standard Reguli 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 demo 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 exemplificate în această lecție folosesc structură simplă. Aceasta este o listă neordonată obișnuită de link-uri plasate într-un element div.
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; poziție:relativ:centru:0 ) 3px 10px; background:#ddd color:#000: line-height:1.3em ) a.active, #centeredmenu ul li a.active:hover (color:# fff; background:#000;
Cum funcționează metoda de centrare?
Acţiunea metodei se bazează pe poziționare relativă elemente de 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. Compresia este cheia implementării aceasta metoda centrarea 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 Culori diferite, așa că 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 spre 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). Prin 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 niciunul stiluri vizuale pentru el. 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 doar 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 folosește JavaScript și suportă redimensionabil text.
De la autor: Vă urez bun venit pe blogul nostru despre crearea site-ului web. Aceasta este o serie de articole dedicate noii specificații și astăzi aș vrea să vă spun cum să faceți un meniu în html5 și cum diferă acest proces de același din Versiuni anterioare limba.
Care sunt diferențele
În primul rând, aș dori să spun că specificația nu este atât de nouă - și-a început dezvoltarea în 2009. De fapt, de atunci a existat o dezvoltare constantă - noi funcții apar în html5, browserele moderne acceptă din ce în ce mai mult aceleași caracteristici, astfel încât în curând va fi posibil să vorbim despre suport complet pentru această tehnologie, deși nu este un singur întreg, este mai degrabă un set de noi posibilități, fiecare dintre acestea fiind independentă.
Ei bine, bine, dar ce este diferit la crearea navigației principale (meniu), deoarece citiți un articol pe acest subiect, atunci ar trebui să existe cu siguranță unele diferențe. Ei bine, cum a fost creat meniul înainte? De obicei, a fost folosită o listă cu marcatori, care a fost plasată într-un container suplimentar pentru toată navigația - un div obișnuit.
Deci, odată cu apariția noilor etichete, acum o puteți face mai corect - în schimb etichetă divînfășurați meniul în nav - un nou element semantic care a fost creat special pentru a colecta cele mai importante legături din el și pentru a le grupa.
Puteți pune fie o listă, fie doar un set de link-uri în nav. Mi se pare că acest lucru este și mai simplu și solutie corecta, deși în multe șabloane puteți vedea în continuare implementarea meniului folosind etichetele ul, li, a.
Interesant este că containerul de navigare a fost creat special pentru link-urile prioritare din pagină. De fapt, pot exista mai multe astfel de containere pe o pagină, dar ar trebui să plasați în ele doar acele link-uri care formează efectiv navigație principală(de exemplu, meniul principal de sus și duplicatul acestuia în subsolul paginii).
Cum să faci un meniu orizontal folosind html5
Nici măcar nu aveți nevoie de nicio încadrare în listă, totul va fi afișat inițial pe o singură linie, deoarece linkurile sunt elemente inline.
Un alt lucru este că sunt foarte limitate în design datorită proprietăților lor inline. Veți putea opera numai cu proprietăți precum: culoare, dimensiunea fontului, marginile. Dacă doriți să setați o anumită culoare de fundal, să faceți separatoare și să adăugați umplutură (sau să determinați dimensiunea fiecărui element de meniu), atunci nu veți putea face acest lucru cu o linie.
Aici va trebui să ne transformăm punctele în elemente de bloc. Pentru a face acest lucru, trebuie să scrie proprietatea:
afisare: bloc; |
Acum merg de sus în jos, adică navigarea noastră a devenit verticală. Pentru a-l transforma înapoi în orizontală, trebuie să adăugați anumite proprietăți. De exemplu, în loc de un tip de bloc, definiți un tip de linie de bloc pentru ele sau dați-le (float: stânga). Citiți mai multe despre aceste metode.
Navigare pe verticală
De obicei, pentru a face un meniu vertical în html5, ei folosesc o listă, dar markup-ul pe care ți l-am dat mai sus este potrivit și pentru noi. După cum ați văzut, dacă convertiți link-uri în link-uri bloc, acestea se vor alinia automat unul după altul de sus în jos, deoarece două blocuri nu pot fi pe aceeași linie.
Acum poți aplica la ei regulile necesareînregistrare Blocurile au mult mai multe proprietăți decât element inline, așa că aveți mult mai multe opțiuni. De exemplu, am adaugat acestea:
a( text-decor: niciunul; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afișare: bloc; fundal: liniar-gradient(la dreapta, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%) lățime: 200px;
text - decor : nici unul ; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afisare: bloc; fundal: liniar - gradient (la dreapta, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); latime: 200px; text - aliniere : centru |
