Meniu vertical și orizontal în html. O prezentare excelentă a meniurilor frumoase stratificate cu codepen

Să creăm un meniu de navigare orizontal simplu pentru un site web. Pentru a face acest lucru, vom folosi trucuri simple, care vor avea ca rezultat afișarea corectă a meniului nostru în toate browserele.

Deci, să începem. Să creăm o listă cu numele meniului nostru. Ca nume ale articolelor, să fie: „Acasă”, „Știri”, „Produse”, „Servicii”, „Parteneri”, „Contacte”. Creăm un fișier nou numit menu.html , de exemplu, folosind Dreamweawer sau folosind un blocnotes obișnuit. În ea, între etichetele corpului, ne plasăm meniul. Este doar o listă ul cu marcatori cu elemente li. Desigur, facem din fiecare element de meniu un link, unde introducem semnul hash # în loc de URL. Folosind Photoshop, creați o imagine de 3x30 px cu o umplere în degrade, așa cum se arată în imaginea de mai jos. Fișierul va fi salvat în format GIF. Să-i spunem bg.gif . Această imagine va acționa ca imagine de fundal a meniului nostru.

Iată conținutul fișierului menu.html:

• Acasă
• Știri
• Produse
• Servicii
• Parteneri
• Contacte

Acum să creăm separat o foaie de stil numită main.css . Lista sa este prezentată în întregime mai jos.

Ul ( margin:0; /*setează padding la zero*/ padding:0; /*set padding la zero*/ float:left; /*left-aliniază lista*/ width:auto;/*setează lățimea automată pe baza tipul și conținutul listei */ imagine de fundal: url(bg.gif); /*setează imaginea de fundal*/ background-repeat:repeat-x; /*repetă imaginea noastră pe orizontală*/ list-style:none; /*elimină lista markers*/ background-color:#4778c3; /*setează culoarea de fundal pentru imagine*/ font-size:13px; /*set the font size*/ font-family:Arial, Helvetica, sans-serif; /*set fontul*/ ) ul li ( float:left; /*left-align list items*/ ) ul a ( display:block; /*reprezintă link-urile de meniu ca elemente de bloc*/ width:100px; /*set block size*/ height:30px; /* și înălțimea blocului*/ text-align:center; /*label centered*/ line-height: 2.1em; /*line spacing*/ text-decoration:none; /*eliminați sublinierea din linkuri*/ culoare:#fff; /*culoarea textului linkului - alb*/ chenar-dreapta:#fff solid 1px; /*bor dur partea dreaptă a blocului (linia albă la 1px)*/ ) ul a:hover (color:#ccc; /*link-ul își schimbă culoarea la trecerea cursorului*/ )

Cred că nu ar trebui să existe întrebări despre conținutul fișierului main.css, am scris sugestiile în comentarii suficient de detaliat și clar, așa că nu mă voi repeta. Nu uitați să-l conectați la pagina noastră menu.html cu

Rezuma. Rezultatul este un meniu orizontal complet între browsere, care arată la fel nu numai în toate browserele moderne, ci și în rarități precum IE 5.5 și IE 6.0. Toate elementele de meniu sunt redate ca elemente la nivel de bloc și au aceleași dimensiuni la 100 px lățime și 30 px înălțime. Ca separator pentru elementele de meniu, este utilizat un design de element bloc cu un chenar alb din dreapta de 1 px grosime. Acesta este practic cel mai simplu mod de a implementa un meniu orizontal. Desigur, dacă se dorește, poate fi modificat, făcut mai frumos și mai funcțional folosind fantezie, proprietăți css și elemente grafice suplimentare. bine si meniul nostru orizontal arata cam asa:

Avantajele acestei soluții:
Ușurință de execuție
Cod simplu
Fără tabele și javascript
Compatibilitate între browsere: meniul arată la fel în toate browserele
Se folosește un singur desen
Cod minim pe pagina menu.html
Cod minim pentru implementarea stilurilor în main.css

Fișierele utilizate în acest exemplu pot fi descărcate din arhivă

O sarcină

Realizați un meniu orizontal, ale cărui elemente au o pantă arbitrară (Fig. 1).

Orez. 1. Vizualizare meniu cu elemente înclinate

Decizie

Proprietatea stil de transformare este responsabilă pentru transformarea elementului, iar ca valoare este folosită funcția skewX, care stabilește panta dorită. Unghiul de înclinare este mai ușor de setat în grade, de exemplu, 30 de grade este 30 de grade față de verticală. Transformarea afectează toate elementele copil, astfel încât textul din interiorul elementului va fi, de asemenea, denaturat, ceea ce nu este cel mai bun mod de a reflecta asupra lizibilității și frumuseții sale. Prin urmare, este important să aplicați din nou panta textului, dar în cealaltă direcție, pentru aceasta este suficient doar să schimbați semnul în fața valorii gradelor.

Browserele acceptă proprietatea de transformare predominant cu propriile prefixe, așa că pentru coerență în stil, ar trebui să o repetați de mai multe ori cu aceeași valoare, adăugând -moz- pentru Firefox, -webkit- pentru Safari și Chrome, -o- pentru Opera și - ms - pentru browserul Internet Explorer, așa cum se arată în exemplul 1.

Exemplul 1: Înclinarea elementului de meniu

HTML5 CSS3 IE Cr Op Sa Fx

• Joker
• Pazuzu
• Palpatine
• Doctor Doom

În acest exemplu, meniul orizontal este creat folosind o listă cu marcatori. Pentru ca lista să fie exact orizontală, proprietatea de afișare cu valoarea inline-block este adăugată elementului li din stiluri. Pentru skew, proprietatea transform este utilizată cu funcția skewX și o valoare de -30º. Această proprietate se aplică și link-urilor din listă, dar cu o valoare pozitivă de 30º, aceasta asigură că literele sunt afișate corect, mai degrabă decât înclinate.

Browserele Chrome, Safari și Firefox folosesc proprietatea de transformare pentru elemente de blocare sau blocuri inline, astfel încât linkurile au proprietatea de afișare setată la blocare .

În acest tutorial vom crea meniul css orizontal. Desigur, puteți folosi soluții gata făcute, de exemplu, angajați programatori pentru CMS Made Simple. Cu toate acestea, nu căutați modalități ușoare, nu-i așa? :bătăuş:

Pasul 1 - marcaj HTML

Mai întâi trebuie să creăm elemente de listă cu o etichetă pentru fiecare articol din meniul nostru orizontal. Pentru a crea un submeniu, trebuie să adăugați o altă listă de copii în interiorul celei părinte.

• Link #1
• Link #2
• Lista verticală
  • Documentele
  • Mesaje
  • Înregistrare
• Link #3
• Link #4
• Link #5

Pasul 2 — Crearea stilurilor CSS pentru meniul orizontal

Inițial, meniul arată vertical, pentru a remedia acest lucru vom scrie câteva stiluri, vom edita indentările, marginile, culoarea de fundal, rotunjim colțurile. Să fixăm lățimea și înălțimea. Aliniați elementele de meniu la stânga folosind float: left (astfel încât navigarea să dobândească o structură orizontală).

Meniu, .menu ul, .menu li, .menu a ( marja: 0; umplutură: 0; chenar: niciunul; contur: niciunul; ) .meniu ( înălțime: 40px; lățime: 505px; fundal: #4c4e5a; fundal: - webkit-linear-gradient(sus, #5c5e6a 0%, #3c3d44 100%); fundal: -moz-linear-gradient(sus, #5c5e6a 0%, #3c3d44 100%); fundal: -o-linear-gradient( sus, #5c5e6a 0%,#3c3d44 100%); fundal: -ms-linear-gradient (sus, #5c5e6a 0%,#3c3d44 100%); 100%); -webkit-border-radius: 4px; -moz -border-radius: 4px; border-radius: 4px; ) .menu li ( poziție: relativ; list-style: none; float: left; display: block ; înălțime: 40px; )

Să scriem pentru o vreme următorul stil, care ascunde lista derulantă. Acest lucru va face editarea mai ușoară.

Pasul 3 - Stilul meniului Link

Apoi, scriem stiluri care adaugă câteva proprietăți CSS de bază, cum ar fi tipul de font, culorile, umplutura și așa mai departe. Apoi vom adăuga o umbră pentru text și tranzițiile de culoare pentru a crea un efect neted în care culoarea nu se schimbă instantaneu, ci la intervale. Pentru a crea un separator de legături, să adăugăm un chenar la stânga și la dreapta, apoi eliminăm chenarul din stânga de pe primul link și chenarul din dreapta pe ultimul link. Când treceți cu mouse-ul peste meniu, doar culoarea se va schimba.

Meniu li a (afișare: bloc; umplutură: 0 14px; margine: 6px 0; înălțime linie: 28px; text-decor: niciunul; chenar-stânga: 1px solid #494942; chenar-dreapta: 1px solid #4f5058; font- familie: Helvetica, Arial, sans-serif; greutate font: bold; dimensiune font: 13px; culoare: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : culoare .3s ease-in-out; -moz-transition: culoare .3s ease-in-out; -o-transition: culoare .3s ease-in-out; -ms-transition: culoare .3s ease-in- ieșire; tranziție: culoare .3s ease-in-out; ) .meniu li:primul copil a (chenar-stânga: niciunul; ) .meniu li:last-child a( chenar-dreapta: niciunul; ) .meniu li: plasați cursorul > a (culoare: #9fde63; )

Pasul 4 - Meniu derulant

În primul rând, să eliminăm această linie de cod pe care am adăugat-o în pasul al doilea.

Meniu ul (afișare: niciunul; )

Acum vom edita stilul pentru submeniu. Să poziționăm submeniul la 40 px din partea de sus și 0 px la stânga elementului de meniu și să adăugăm colțuri rotunjite în partea de jos. Setați opacitatea la zero și la trecerea cursorului schimbați-o la 1 pentru a crea un efect de fade in/out. Pentru efectul de diapozitiv sus/jos, trebuie să setăm înălțimea listei la 0px când meniul derulant este ascuns și la 36px când trecem cu mouse-ul peste meniul derulant.

Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- rază: 0 0 4px 4px; -webkit-transition: opacitate .3s ease .1s; -moz-transition: opacitate .3s ease .1s; -o-tranziție: opacitate .3s ease .1s; -ms-transition: opacitate .1s. 3s ease .1s; tranziție: opacitate .3s ease .1s; ) .menu li:hover > ul ( opacitate: 1; ) .menu ul li ( înălțime: 0; overflow: ascuns; padding: 0; -webkit-transition: înălțime .3s ease .1s; -moz-transition: înălțime .3s ease .1s; -o-transition: înălțime .3s ease .1s; -ms-transition: înălțime .3s ease .1s; tranziție: înălțime .3s ușurință . 1s; ) .menu li:hover > ul li ( înălțime: 36px; overflow: vizibil; umplutură: 0; )

Setați lățimea meniului drop-down pe care se poate face clic la 100 px. Am adăugat un chenar după fiecare link pentru a le separa. Chenarul din ultimul link va fi eliminat.

Meniu ul li a ( lățime: 100 px; umplutură: 4 px 0 4 px 40 px; margine: 0; chenar: niciunul; chenar- jos: 1 px solid #464649; ) .menu ul li:last-child a ( chenar: niciunul; )

Pentru a finaliza meniul CSS orizontal, trebuie să adăugați o pictogramă pentru fiecare submeniu vertical. Pentru a face acest lucru, vom crea propria noastră clasă pentru fiecare dintre submeniuri și vom adăuga o imagine de fundal.

Meniu a.d ( fundal: url(docs.png) fără repetare 6px centru; ) .menu a.m ( fundal: url(bubble.png) fără repetare 6px centru; ) .menu a.s ( fundal: url(arrow.png) nu -repetă 6px centru; )

Concluzie

Am creat cu succes un meniu vertical orizontal cu și fără stil CSS3, deși și acest lucru a fost posibil. Dacă aveți întrebări, spuneți-mi despre asta în comentarii.

(descărcări: 395)

Dacă site-ul dvs. nu este limitat la o singură pagină web, atunci ar trebui să luați în considerare adăugarea unei bare de navigare (meniu). Un meniu este o secțiune a unui site web concepută pentru a ajuta vizitatorul să navigheze pe site. Orice meniu este o listă de link-uri care duc la paginile interne ale site-ului. Cel mai simplu mod de a adăuga o bară de navigare pe site-ul dvs. este să creați un meniu folosind CSS și HTML.

Meniu vertical

Primul pas în crearea unui meniu vertical este crearea unei liste cu marcatori. De asemenea, trebuie să putem identifica lista, așa că îi vom adăuga un atribut id cu id-ul „navbar”. Fiecare element