Sarcina de a centra un meniu orizontal poate fi puțin complicată, 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 cod complet CSS-ul care este 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; fundal:#ddd; a.active, #centeredmenu ul li a.active:hover (culoare:# fff; background:#000;
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. Compresia este punct-cheieîn implementare 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 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 spațiul 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 niciun stil vizual pentru acesta. Lăsați elementul ul fără culoare de fundalși fără cadru 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 ultimele elemente 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: Bună ziua tuturor. Din anumite motive, webmasterii asociază meniurile drop-down cu scripturi, dar pentru o lungă perioadă de timp o astfel de navigare se poate face absolut în siguranță pe css pur. Mai mult, un astfel de meniu nu va fi mai rău. Astăzi vă voi arăta cum să creați un meniu drop-down în css. Voi împărtăși, ca să zic așa, rețeta.
Planul lecției și aspectul meniului nostru
În general, să decidem mai întâi cum vom crea meniul în sine. În html5 într-un mod standard Se consideră a-l crea în containerul de navigare folosind o listă cu marcatori. Să facem tocmai asta. Vom elimina markerii mai târziu folosind css; nu avem nevoie de ele în meniu.
De fapt, o să scriu imediat marcaj html cu liste imbricate. Adică, lista noastră va fi pe două niveluri - va conține alte liste. Și anume, pentru fiecare articol există 1 listă, care va forma un meniu derulant.
Există punct important, și anume că este posibil să nu fie nevoie să creați fiecare element derulant, ci doar câteva. Nicio problemă, atunci în articolele fără meniuri derulante pur și simplu nu creăm liste imbricate.
De fapt, aici este, toate markupurile:
< nav id = "nav" > < ul > < li > < a href = "#" >Paragraful 1< / a > < ul class = "second" > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punctul 2< / a > < ul class = "second" > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punctul 3< / a > < ul class = "second" > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < / ul > < / li > < li > < a href = "#" >Punctul 4< / a > < ul class = "second" > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < li > < a href = "#" >Sub-clauza< / a > < / li > < / ul > < / li > < / ul > < / nav > |
Înțeleg că este uriaș. Aceasta este problema cu listele imbricate, că trebuie să scrieți mult cod. Dar țineți cont de faptul că facem 4 puncte principale și pentru fiecare va exista un meniu derulant.
De fapt, am dat întregii navigații un identificator de nav, iar toate listele imbricate o clasă de stil de secundă pentru a înțelege că sunt imbricate.
Grozav, avem marcajul gata, vă puteți uita la rezultat:
Da, arată groaznic. Dar acum vom include în munca css iar în doar câteva minute navigația noastră se va transforma. Hai sa muncim.
Scrierea stilurilor CSS
Primul lucru pe care îl voi face este să resetați toate umpluturile la implicite pentru toate elementele. Ne vor sta doar în cale; este mai bine să stabilim noi înșine liniuțele mai târziu, acolo unde este nevoie.
*( marja: 0; umplutură: 0; )
marja: 0; umplutură: 0; |
#nav( înălțime: 70px; ) #nav ul( list-style: none; )
#nav( înălțime: 70px; #navul( lista - stil : niciuna ; |
Acum trebuie să decidem care va fi meniul nostru. Orizontal sau vertical? Vă sugerez să faceți mai întâi unul orizontal și să vedeți totul în exemplul său. Pentru a face acest lucru, trebuie să scrieți următoarele stiluri:
#nav > ul > li( float: stânga; lățime: 180px; poziție: relativă; )
#nav > ul > li( plutește la stânga; latime: 180px; poziție: relativă; |
Rețineți că folosind semnul > ne referim la elementele din listă care sunt imbricate direct în ul, care sunt imbricate direct în nav. Acest lucru este foarte important deoarece împiedică aplicarea stilului la elementele din listă imbricate. Cert este că, după ideea mea, articolele din lista principală vor fi amplasate orizontal, iar în cele imbricate – vertical.
Dar tu, desigur, o poți face altfel, în conformitate cu ideea ta. Vă puteți asigura că toate punctele sunt pe o singură linie.
Oricum, codul de mai sus sper sa intelegi. Forțează ca elementele principale ale listei să fie împinse spre stânga, astfel încât să apară toate pe aceeași linie, chiar dacă sunt elemente de bloc. Le-am dat și o lățime explicită și poziționare relativă.
De ce pozitionare? Este necesar pentru a poziționa apoi absolut listele imbricate. Dacă ați studiat poziționarea în CSS, atunci probabil știți că dacă dați o poziționare relativă a unui bloc, atunci toate elementele din acesta pot fi poziționate absolut în interiorul acestui bloc anume, și nu întreaga fereastră a browserului.
Între timp, iată ce avem până acum:
Din această captură de ecran vă puteți imagina deja rezultatul aproximativ. Desigur, încă trebuie să proiectăm frumos articolele, astfel încât ochii să nu cerească milă atunci când vizualizează navigația.
#nav li a( afișaj: bloc; fundal: #90DA93; chenar: 1px solid #060A13; culoare: #060A13; umplutură: 8px; text-align: center; text-decoration: niciunul; ) #nav li a:hover( fundal: #2F718E)
#navli a( afisare: bloc; fundal: #90DA93; chenar: 1px solid #060A13; culoare: #060A13; umplutură: 8px; text - align : centru ; text - decor : nici unul ; #nav li a:hover( fundal: #2F718E; |
În primul rând, linkurile în sine trebuie să fie blocate. Acest lucru este necesar pentru ca acesta să funcționeze căptușealăși toate proprietățile au fost aplicate corect. Apoi, specific culorile fundalului, textul, parametrii cadrului, umplutura internă și alinierea textului la centru. În cele din urmă, anulez sublinierea linkurilor.
Toți acești parametri nu trebuie să fie specificați așa cum am făcut-o eu. Puteți alege culorile în mod arbitrar, faceți un cadru diferit sau nu îl folosiți deloc, indentările pot fi reduse sau mărite.
Vă rugăm să rețineți că în în acest caz, Nu am folosit semnul >, așa că regulile specificate se vor aplica tuturor legăturilor, inclusiv celor situate în paragrafe imbricate. Deci acum avem următoarele:
Grozav, dar înțelegi că sub-articolele nu ar trebui să fie vizibile, ar trebui să se deschidă când treci cu mouse-ul peste elementul dorit. Fără aceasta, meniul nostru arată ca o masă. Ei bine, este timpul să ascundeți elementele imbricate.
#nav li .second (afișare: niciunul; poziție: absolut; sus: 100%; )
#nav li .second( afișaj: niciunul; poziție: absolută; sus: 100%; |
În primul rând, ascundem liste complet imbricate. În al doilea rând, le oferim poziționare absolută și coordonată de vârf: 100%. Aceasta înseamnă că meniul drop-down va apărea clar sub elementul principal căruia îi aparține, clar la 100% din înălțimea articolului respectiv.
Acum vedem doar meniul principal pe pagina web, care este ceea ce avem nevoie.
Să implementăm abandonul
Tot ce ne rămâne de făcut este cel mai important lucru - să realizăm căderea în sine. Nu este nimic complicat, uită-te la acest cod:
#nav li:hover .second( display: block; )
#nav li:hover .second( afisare: bloc; |
Acest cod va funcționa impecabil. Când treceți cu mouse-ul peste un element din meniul principal, sublista va deveni vizibilă. Mai mult decât atât, doar lista care este imbricată în elementul peste care trece cursorul.
Există o singură problemă minoră - lățimea elementelor imbricate nu se potrivește cu lățimea celor principale. Dar acest lucru poate fi rezolvat foarte ușor prin adăugarea stilurilor adecvate:
#nav li li( lățime: 180px; )
#navlili( latime: 180px; |
Asta e, problema rezolvata:
Totul funcționează perfect. Când treceți cu mouse-ul peste elementul principal, apare un meniu derulant corespunzător acestuia. Dacă mutați cursorul în lateral, acesta dispare. Dacă mutați cursorul la elementele imbricate, puteți face clic pe ele și accesați secțiunea necesară site-ul. Astfel, am creat pentru tine un meniu derulant foarte simplu și ușor, fără absolut niciun script.
Transformarea meniului în verticală
Ei bine, bine, ne-am dat seama complet de navigare orizontală, dar pe lângă aceasta, navigarea verticală este foarte comună pe site-uri și poate fi și una derulantă. De fapt, schimbarea meniului de la orizontal la vertical este foarte ușoară, trebuie doar să schimbăm doar câteva rânduri de cod.
Mai întâi, va trebui să eliminați float:left din elementele principale ale listei. Această proprietate este cea care asigură că articolele noastre sunt afișate într-o singură linie, dar de ce avem nevoie de aceasta dacă navigarea trebuie să fie verticală?
Acum nu mai rămâne decât să schimbați regulile pentru selectorul #nav li .second, adică pentru listele imbricate, și anume, acestea trebuie poziționate puțin diferit. Ca aceasta:
#nav li .second (afișare: niciunul; poziție: absolut; stânga: 100%; sus: 0; )
#nav li .second( afișaj: niciunul; poziție: absolută; stânga: 100%; sus: 0; |
Adică, este necesar să se înregistreze două coordonate în loc de una. În primul rând, în cazul navigării orizontale, am spus că, așa cum era planificat, articolele din submeniu ar trebui să fie afișate sub elementele principale. În cazul unui meniu vertical, acesta nu este potrivit - elementele ar trebui să fie afișate în lateral.
Prin urmare, schimbăm de sus: 100% la stânga: 100%. În plus, avem nevoie și de coordonatele de sus. Îl setăm la 0, astfel încât submeniul să fie la același nivel cu elementul căruia îi corespunde.
Gata, acum totul funcționează așa cum trebuie. Îl poți testa. După cum puteți vedea, nu am mințit când am spus că va trebui doar să rescriu câteva rânduri de cod.
Meniu orizontal cu mai multe niveluri
Folosind aproape aceeași abordare, puteți crea mai multe niveluri de meniu dacă este necesar. De exemplu, haideți să creăm o listă pentru al patrulea element din meniul principal, care va fi imbricat într-unul dintre subarticole.
Specificație
Descriere
Etichetă
