Cum sa faci un meniu orizontal pentru site-

mijloace clasice de navigare prin site-ul este un meniu orizontal în antet. Să vedem cum se face un meniu orizontal simplu in HTML si CSS.

Meniul HTML simplu

În sensul meniului este o listă de secțiuni ale site-ului, deci este logic să se utilizeze ul tag-ul de meniu - o listă cu marcatori. În plus, HTML5 are o nouă etichetă pe care ar trebui să fie utilizate pentru a se referi la zona de navigare pe site-ul - nav. Utilizarea acestor două etichete permit motorului de căutare mai precisă pentru a înțelege structura site-ului nostru.

Ca un exemplu, să ia meniul de 4 elemente: Acasă, articolele, Servicii și Contacte. Astfel, codul HTML al meniului nostru va arata astfel:

Dacă nav este utilizat numai pentru meniul principal orizontal, puteți face fără clasă și toate stilurile sunt descrise folosind nav ca un selector de referință. Dar voi arăta câteva opțiuni de meniu, astfel încât clasa hmenuA adăugată. astfel încât să puteți aplica stiluri diferite pentru diferite opțiuni de meniu. litera A la sfârșitul clasei, deoarece vor exista mai multe opțiuni B și C

Până în prezent, meniul nostru este destul de diferit de orizontală. Se pare ca acest lucru:

Prima listă de jetoane trebuie să fie eliminate și padding suplimentare:

Elementele unei liste folosim modul inline-bloc:

Acest mod înseamnă că elementele „în afara“ ale listei vor fi tratate ca un mic elemente, adică ei vor trage într-o singură linie. În interior, ele vor continua să blocheze elemente. Se transformă bara de meniu orizontal:

A se vedea golurile dintre elementele meniului? Acest lucru nu este liniuță, textul și spațiile reale. Au apărut din faptul că codul HTML a fost împărțită în mai multe rânduri, și de caractere „goale“ între browser-ul meniuri interpretate ca spatii intre „cuvinte“. Această caracteristică ar trebui să fie luate în considerare atunci când se utilizează modul inline-bloc.

În principiu, aceste lacune nu interferează cu adevărat. Dar dacă vă aflați la meniul vorstke trebuie să setați padding precisă distanța dintre elementele de meniu sau apăsați elementele de meniu între ele fără nici o umplutură, lacune ne împiedică. Prin urmare, atunci când vorstke orizontale Panouri inline-bloc-lea a decis să elimine toate spațiile care nu sunt necesare. Am stabilit meniul de cod HTML, astfel că etichetele nu au avut spații suplimentare. line Pentru a citi codul a rămas normală, am pus sparge etichete în interiorul, înainte de cornierul de închidere. Aici este un cod obținut prin:

Acum, spațiile au dispărut:

Nu vă fie teamă că elementele de meniu sunt îmbinate. Acum vom adăuga unele decor, și totul va fi mult mai plăcut:

text-align: centru este utilizat pentru a alinia meniul de pe pagina. În acest fel, am indicat că elementele de meniu ar trebui să fie văzută ca un elemenity mic, acestea sunt aliniate cu ajutorul text-align.

Înălțimea de meniu l-am întrebat, indicând linia de înălțime. Această metodă vă permite să setați simultan înălțimea blocului și a alinia textul vertical pe centrul blocului.

Pentru o etichetă, am cerut, de asemenea, modul de afișare: bloc. face referire, pe care puteți Nada, întregul element de meniu dreptunghi, nu doar o mică zonă de text.

Cum se va comporta meniul nostru cu o scădere în lățime a paginii? Reduceți lățimea ferestrei browser-ului, astfel încât meniul nu se mai încadrează în ea. Ce se întâmplă? Meniu de două-o singură linie de-stanovistya. (Sau chiar trei și chetyrohstrochnym, dacă faci fereastra browserului nu îngust.)

Dacă nu doriți să devină un meniu multi-line, trebuie să se limiteze lățimea minimă a paginii, alegeți o valoare corespunzătoare de min-lățime la tag-ul corpului.

Să adăugăm un pic de animație. Cea mai simplă opțiune - pentru a sublinia elementele de meniu cu mouse-ul. Dar subliniere la fel de simplu - este destul de plictisitor, să facem ca să apară și să dispară treptat.

Adăugați la stiluri de următoarele:

O altă variantă a animației:

Să vedem câteva opțiuni mai multe despre cum puteți aranja meniu. Totul este limitat doar de imaginatia ta.

Meniu cu chei plate

opțiunea de meniu cu butoane plate și apariția Hover de frontieră:

Meniu cu separatoare de relief

Manipulând limite de culoare la intersecția dintre elementele de meniu, puteți obține aspectul unei linii pseudo-relief. Un meniu similar este utilizat în antetul site-ului.

meniuri animate cu subtitrări

Meniul frumos, cu legende care apar atunci când treceți cu mouse-ul: