Cum se creează un meniu css orizontal. Transformarea meniului în verticală

HTML5 IE Cr Op Sa Fx

Centrarea unui meniu orizontal poate fi o sarcină dificilă, mai ales pentru cei care nu folosesc CSS. Găsirea de soluții duce la o listă foarte limitată de metode, dintre care cele mai multe se bazează pe CSS, trucuri JavaScript sau utilizarea unor reguli non-standard care nu sunt acceptate de toate browserele. În acest tutorial, vă vom prezenta metoda de centrare a unui meniu orizontal, care utilizează doar reguli standard CSS și funcționează în toate browserele.

Un 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 receptiv.

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 prezentate în această lecție folosesc o structură simplă. Aceasta este o listă neordonată obișnuită de link-uri plasate într-un element div.

Meniu centrat Cod CSS

Mai jos este CSS-ul complet care va centra meniul. Și explicațiile despre principiul muncii sunt date mai târziu în lecție.

#centeredmenu (float: stânga; lățime: 100%; fundal: #fff; chenar-jos: 4px solid # 000; overflow: ascuns; poziție: relativ;) #centeredmenu ul (clear: stânga; float: stânga; list-style : niciunul; margine: 0; padding: 0; poziție: relativă; stânga: 50%; text-align: center;) #centeredmenu ul li (afișare: bloc; float: stânga; list-style: none; margine: 0; umplutură: 0; poziție: relativă; dreapta: 50%;) #centeredmenu ul li a (afișare: bloc; margine: 0 0 0 1px; umplutură: 3px 10px; fundal: #ddd; culoare: # 000; text-decor: nici unul; line-height: 1.3em;) #centeredmenu ul li a: hover (fundal: # 369; culoare: #fff;) #centeredmenu ul li a.active, #centeredmenu ul li a.active: hover (culoare: # fff; fundal: # 000; greutate font: bold;)

Cum funcționează metoda de centrare

Metoda se bazează pe poziționarea relativă a elementelor bloc plutitoare unele în altele. Mai întâi, să vedem cum sunt redimensionate elementele atunci când sunt deplasate.

Element div(blocul), fără decalaj, se întinde pe toată lățimea disponibilă.

Dar dacă mutăm elementul div la stânga, acesta se va micșora automat pentru a se potrivi cu conținutul său. Compresia este cheia implementării acestei metode pentru centrarea meniurilor. Ajută la mutarea meniului în poziția corectă.

Meniu standard aliniat la stânga

Să luăm un meniu standard aliniat la stânga și să-l reproiectăm pas cu pas. Pentru claritate, articolele sunt colorate în culori diferite, astfel încât este imediat clar ce este investit unde.

Acordați atenție următoarelor puncte:

• Element centeredmenu div(dreptunghi albastru) este decalat spre stânga, dar are 100% lățime, așa că rămâne întins pentru a umple întreaga pagină.
• Element ul(dreptunghi roz) este în interiorul elementului meniu centrat divși se schimbă la stânga. Aceasta înseamnă că va fi micșorat 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, se micșorează la dimensiunea legăturilor din ele și se aliniază î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 listei neordonate

Apoi compensăm elementul ul la dreapta cu 50% folosind poziția: relativă; ... Când un element este compensat cu un procent î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 pe jumătate din fereastra browserului (sau disponibilă pentru spațiul de afișare) Ca urmare, meniul nostru începe în mijlocul ferestrei și se extinde parțial în afara acesteia. Și treceți la pasul următor.

Schimbarea poziției tuturor elementelor de meniu

Rămâne doar să mutați toate elementele li lăsat cu 50%. Aceasta reprezintă 50% din lățimea elementului nostru ul (containerul care conține meniul). Astfel, filele sunt deplasate exact în centrul ferestrei.

Câteva note importante

Există câteva puncte importante de reținut atunci când utilizați această metodă de centrare:

• Din moment ce elementul ul se extinde parțial în afara ferestrei, ceea ce duce la afișarea barelor de defilare. Prin urmare, trebuie să utilizați overflow: regulă ascunsă; pentru element centeredmenu 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ă margine, astfel încât să fie complet invizibil. Iar 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 utilizează JavaScript și acceptă text redimensionabil.

De la autor: Bun venit tuturor. Din anumite motive, webmasterii asociază un meniu drop-down cu scripturi, dar pentru o lungă perioadă de timp o astfel de navigare se poate face absolut în siguranță folosind 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, o rețetă.

Planul lecției și aspectul meniului nostru

În general, mai întâi să decidem cum vom crea meniul în sine. În html5, modul standard este să îl creați într-un container de navigare folosind o listă cu marcatori. Hai să facem tocmai asta. Vom elimina markerii mai târziu folosind css, nu avem nevoie de ei deloc în meniu.

De fapt, voi scrie imediat markup cu liste imbricate în html. Adică, lista noastră va fi pe două niveluri - va conține alte liste. Și anume, pentru fiecare articol 1 listă, care va forma un meniu derulant.

Există un punct important aici, și anume că s-ar putea să nu fie nevoie să faceți meniul drop-down pentru fiecare articol, ci doar câteva. Nicio problemă, atunci pur și simplu nu creăm liste imbricate în paragrafe fără a renunța.

De fapt, aici este, toate markupurile:

Înțeleg că este uriaș. Aceasta este problema cu listele imbricate, care necesită mult cod. Dar țineți cont de faptul că facem 4 elemente principale și pentru fiecare va exista un meniu derulant.

De fapt, am setat identificatorul de navigare pentru toată navigația și a doua clasă de stil pentru toate listele imbricate, pentru a înțelege că sunt imbricate.

Grozav, marcajul nostru este gata, vă puteți uita la rezultat:

Da, arată groaznic. Dar acum vom activa css și în câteva minute navigarea noastră se va transforma. Sa trecem la treaba.

Scrierea stilurilor CSS

Primul lucru pe care îl voi face este să resetați toate umpluturile la implicite pentru toate elementele. Ele vor interfera doar cu noi, este mai bine să setăm singuri indentările, acolo unde este nevoie.

* (marja: 0; umplutură: 0;)

#nav (înălțime: 70px;) #nav ul (stil listă: niciunul;)

Acum trebuie, de fapt, să decidem care va fi meniul nostru. Orizontal sau vertical? Vă propun să faceți mai întâi orizontal și să vedeți totul pe exemplul lui. Pentru a face acest lucru, trebuie să scrieți următoarele stiluri:

#nav> ul> li (float: stânga; lățime: 180px; poziție: relativ;)

Rețineți că cu semnul> ne referim la elemente dintr-o listă care este imbricată direct într-un ul, iar aceea este imbricată direct într-un navigator. Acest lucru este foarte important, deoarece vă permite să nu aplicați stilul elementelor din listele imbricate. Cert este că, după ideea mea, articolele din lista principală vor fi aranjate orizontal, iar în cele imbricate - vertical.

Dar, desigur, o poți face altfel, în concordanță cu ideea ta. Puteți face toate articolele pe o singură linie.

Oricum, codul de mai sus, sper sa intelegi. Forțează articolele din lista principală să se îndrepte spre stânga, astfel încât să se încadreze toate pe aceeași linie, chiar dacă sunt elemente blocate. Le-am dat, de asemenea, o lățime explicită și o poziționare relativă.

Pentru ce este poziționarea? Este necesar pentru a poziționa apoi absolut listele imbricate. Dacă ați studiat poziționarea în css, atunci probabil știți că dacă setați o poziționare relativă a blocului, 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 deja:

Din această captură de ecran, vă puteți imagina deja rezultatul aproximativ. Desigur, mai trebuie să decoram frumos paragrafele pentru ca ochii să nu cerească milă la vizualizarea navigației.

#nav li a (afișare: bloc; fundal: # 90DA93; chenar: 1px solid # 060A13; culoare: # 060A13; padding: 8px; text-align: center; text-decoration: none;) #nav li a: hover ( fundal: # 2F718E;)

În primul rând, linkurile în sine trebuie să fie făcute în bloc. Acest lucru este necesar pentru ca umplutura să funcționeze și ca toate proprietățile să fie aplicate corect. Apoi, specific culorile fundalului, textului, parametrilor cadrului, umplutura și alinierea textului la centru. În cele din urmă, eliminați sublinierea de pe linkuri.

Toți acești parametri nu trebuie să fie scrisi așa cum am făcut eu. Puteți alege culorile în mod arbitrar, să faceți un cadru diferit sau să nu utilizați deloc, indentările pot fi micșorate sau mărite.

Rețineți că în acest caz nu am folosit semnul>, așa că aceste reguli se vor aplica tuturor legăturilor, inclusiv celor din paragrafele 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ă el, 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%;)

Mai întâi, ascundem listele complet imbricate. În al doilea rând, le oferim poziționarea absolută și coordonatele de sus: 100%. Aceasta înseamnă că meniul drop-down va fi afișat clar sub elementul principal căruia îi aparține, clar sub 100% din înălțimea acelui articol.

Acum vedem doar meniul principal pe pagina web, care este ceea ce avem nevoie.

Implementarea abandonului

Trebuie să facem cel mai important lucru - să realizăm pierderea în sine. Nu este nimic complicat, uită-te la acest cod:

#nav li: hover .second (afișare: bloc;)

Acest cod va funcționa impecabil. Când treceți cu mouse-ul peste un element din meniul principal, lista imbricată va deveni vizibilă. Și numai lista care este încorporată î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 se rezolvă foarte ușor prin adăugarea stilurilor adecvate:

#nav li li (lățime: 180px;)

Totul, problema este rezolvata:

Totul funcționează perfect. Când treceți cu mouse-ul peste elementul principal, apare meniul derulant corespunzător. Dacă mutați cursorul în lateral, acesta dispare. Dacă mutați cursorul pe elementele imbricate în sine, puteți face clic pe ele și puteți accesa secțiunea dorită a site-ului. Astfel, am realizat cu tine un meniu derulant foarte simplu și ușor, fără absolut niciun script.

Transformarea meniului în verticală

Ei bine, ne-am dat seama complet cu navigarea orizontală, dar pe lângă aceasta, navigarea verticală este foarte comună pe site-uri și poate fi și drop-down. De fapt, este foarte ușor să schimbi meniul de la orizontal la vertical, trebuie doar să schimbăm câteva rânduri de cod.

Mai întâi, va trebui să eliminați float: stânga din elementele principale din lista. Această proprietate este cea care contribuie la faptul că articolele noastre sunt afișate pe o singură linie, dar de ce avem nevoie de aceasta dacă navigarea ar trebui să fie verticală?

Acum rămâne să schimbați regulile pentru selectorul #nav li .second, adică pentru listele imbricate, și anume, acestea trebuie să fie poziționate ușor diferit. Asa:

#nav li .second (afișare: 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 sa intenționat, articolele din meniurile imbricate 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.

Deci, schimbați 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.

Totul, 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 aproximativ aceeași abordare, puteți crea mai multe niveluri de meniu dacă este necesar. De exemplu, să creăm o listă pentru al patrulea element din meniul principal, care va fi imbricat într-unul dintre sub-articole.