Meniu orizontal. Meniu CSS orizontal

De la autor: Bun venit tuturor. Din anumite motive, webmasterii asociază un meniu drop-down cu scripturi, dar de multă vreme deja o astfel de navigare se poate face absolut calm folosind css pur. Și 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. Lasă-mă să împărtășesc rețeta.

Planul lecției și aspectul meniului nostru

În general, mai întâi vom decide 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 în markup html cu liste imbricate. 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ă creați fiecare element derulant, ci doar câteva. Nicio problemă, atunci pur și simplu nu creăm liste imbricate în paragrafe fără o renunțare.

De fapt, aici este, întregul marcaj:

Înțeleg că este uriaș. Asta e problema cu listele imbricate, că trebuie să scrii mult cod. Dar luați în considerare faptul că facem 4 elemente principale și va exista un meniu drop-down pentru fiecare.

De fapt, am dat întregii navigații id nav și toate listele imbricate a doua clasă de stil pentru a înțelege că sunt imbricate.

Grozav, marcajul este gata, puteți vedea rezultatul:

Da, arată groaznic. Dar acum vom include css în lucru și în câteva minute navigarea noastră se va schimba. Hai sa muncim.

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ă stabilim indentările noi mai târziu, acolo unde este necesar.

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

#nav( înălțime: 70px; ) #nav ul( list-style: none; )

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 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 elementele din listă care sunt imbricate direct în ul, care este imbricată direct în nav. Acest lucru este foarte important, deoarece vă permite să nu aplicați stil elementelor din listă 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 conformitate cu ideea ta. Vă puteți asigura că toate articolele sunt pe o singură linie.

Oricum, codul de mai sus, sper că ați înțeles. Forțează elementele principale din listă să se așeze la stânga, astfel încât să se încadreze toate pe aceeași linie, chiar dacă sunt elemente la nivel de bloc. 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 absolut mai târziu listele imbricate. Dacă ați studiat poziționarea în css, atunci probabil știți că dacă setați poziționarea relativă la un 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, mai trebuie să stilăm frumos punctele, astfel încât ochii să nu cerească milă atunci când vizualizați 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; )

În primul rând, linkurile în sine trebuie să fie blocate. Acest lucru este necesar pentru ca căptușeala să funcționeze și pentru ca toate proprietățile să fie aplicate corect. Apoi, specific culorile fundalului, textul, opțiunile de cadru, indentările și alinierea textului în centru. În cele din urmă, elimin sublinierea linkurilor.

Toți acești parametri nu trebuie să fie scrieț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.

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, ele ar trebui să fie dezvăluite atunci 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%; )

În primul rând, ascundem liste complet imbricate. În al doilea rând, le oferim poziționare absolută și coordonare top: 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 articolului respectiv.

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

Implementarea abandonului

Rămâne să facem cel mai important lucru - să implementăm consecințele în sine. Nu este nimic complicat, uită-te la acest cod:

#nav li:hover .second( display: block; )

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 imbricată în elementul pe care se află 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; )

Asta e, problema rezolvata:

Totul funcționează perfect. Când treceți cu mouse-ul peste elementul principal, apare un meniu 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 creat un meniu derulant foarte simplu și ușor, fără absolut niciun script.

Schimbarea meniului la vertical

Ei bine, ne-am dat seama complet de navigarea orizontală, dar pe lângă aceasta, navigarea verticală este foarte comună pe site-uri și poate fi și drop-down. De fapt, schimbarea meniului de la orizontal la vertical este foarte ușoară, va trebui 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 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 puțin 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 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.

Deci schimbăm de sus: 100% la stânga: 100%. În plus, avem nevoie și de coordonatele de sus. Setați-l la 0, astfel încât submeniul să fie la același nivel cu elementul cu care se potrivește.

Totul, acum totul funcționează așa cum trebuie. Puteț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, să creăm o listă pentru al patrulea element din meniul principal, care va fi imbricat într-unul dintre sub-articole.

Salutare dragi cititori ai blogului meu! Articolul de astăzi va fi foarte util pentru începători. De astăzi vom proiecta 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, ceea ce a trebuit să înfrunt în stadiul inițial de a deveni eu însumi ca aspect. designer, 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 drumul ca designer de layout. Și personal, de îndată ce am început să învăț aspectul, mai ales am avut întrebări despre aspectul diferitelor meniuri, mai ales când vine vorba de meniuri cu mai multe niveluri. Așa că astăzi vom vorbi despre meniu, și mai precis despre meniul orizontal. Asadar, hai sa incepem!

Să începem aspectul meniului nostru orizontal!

După cum probabil ghiciți, primul lucru pe care trebuie să-l facem este să creăm o pagină html cu marcaj standard și să includem un fișier de stil în ea. Nu mă voi opri în detaliu asupra acestui pas, pentru că încă sper că nu sunteți atât de începător încât să vă spuneți în detaliu ce sunt corpul și capul și cum sunt incluse stilurile. Permiteți-mi doar să spun că, pe lângă stilurile pentru meniul nostru, voi scrie cea mai simplă resetare în fișierul css pentru a reseta stilurile și a obține aceeași afișare a indentărilor în toate browserele. Iată cum arată cea mai simplă resetare a mea:

Nu voi spune încă nimic despre zeroing stiluri, deoarece de fapt 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ă acestui cod, toate elementele de pagină pe care le vom scrie vor avea lor marginile și umplutura, trebuie să facem acest lucru, astfel încât pagina noastră să arate la fel în toate browserele.

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

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

Următorul pas este să creați marcajul html pentru meniul nostru.

Crearea marcajului pentru meniu

În marcajul nostru, vom folosi noua etichetă