Să creăm un meniu de navigare orizontal simplu pentru site. Pentru a face acest lucru, vom folosi tehnici 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. Numele articolelor să fie: „Acasă”, „Știri”, „Produse”, „Servicii”, „Parteneri”, „Contacte”. Creați un fișier nou numit menu.html, de exemplu, utilizând programul Dreamweawer sau folosind un blocnotes obișnuit. În ea, între etichetele corpului ne plasăm meniul. Aceasta este o listă obișnuită cu marcatori de ul cu elemente li. Desigur, facem din fiecare element de meniu un link, unde în loc de URL inserăm codul hash #. Folosind Photoshop, creați o imagine cu dimensiunea de 3x30 px, cu o umplere în gradient, așa cum se arată în figura de mai jos. Vom salva fișierul î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:

Meniu orizontal simplu încrucișat

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

Acum să creăm separat un fișier de stil numit main.css. Lista sa este prezentată în întregime mai jos.

Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*aliniază lista la stânga*/ width:auto;/*setează lățimea auto pe baza tipul și conținutul listei */ background-image: url(bg.gif /*set the background image*/ background-repeat:repeat-x /*repetă imaginea noastră pe orizontală*/ list-style:none); /*elimină marcatorii de listă*/ background-color:#4778c3 /*setează culoarea de fundal pentru imagine*/ font-size:13px /*set the font size*/ font-family:Arial, Helvetica, sans-serif; ; /*setează fontul*/ ) ul li ( float:left; /*aliniază elementele listei la stânga*/ ) ul a ( display:block; /*reprezintă linkurile de meniu ca elemente de bloc*/ width:100px; /* setați dimensiunea blocului*/ înălțimea: 30px /* și înălțimea blocului*/ text-align:center/*line-height: /*line spacing*/ text-decoration; eliminați sublinierea din linkuri*/ color:#fff /*link text color - white*/ border-right:#fff solid 1px /*border pe partea dreaptă a blocului (1px white line)*/ ; hover ( culoare: #ccc; /*link-ul își schimbă culoarea când trece cu mouse-ul peste*/ )

Cred că nu ar trebui să existe întrebări despre conținutul fișierului main.css. Am scris sfaturile î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 folosind

Rezuma. Drept urmare, am obținut 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 prezentate ca elemente de bloc și au aceleași dimensiuni de 100 px lățime și 30 px înălțime. Ca separator pentru elementele de meniu, un design de element bloc este utilizat folosind un chenar alb din dreapta de 1px grosime. Acesta este practic cel mai simplu mod de a implementa un meniu orizontal. Desigur, dacă doriți, îl puteți modifica, îl puteți face mai frumos și mai funcțional folosind imaginația, proprietățile CSS și elementele grafice suplimentare. Ei bine, meniul nostru orizontal arată cam așa:

Avantajele acestei soluții:
Usor de facut
Cod simplu
Fără tabele sau 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 folosite în acest exemplu pot fi descărcate în arhivă

Majoritatea site-urilor web clasice de pe Internet folosesc un meniu orizontal ca element principal de navigare. Uneori poate conține diverse caracteristici suplimentare - structuri cu mai multe niveluri, pictograme pentru sub-articole, un bloc de căutare, liste complexe etc. Recent a existat o mică selecție pe blog și astăzi vom analiza 4 exemple practice despre cum să creați un meniu derulant folosind CSS + HTML. Informațiile vor fi utile dezvoltatorilor începători și celor care doresc să schimbe navigarea pe site-ul lor.

Primul tutorial CSS3 Dropdown Menu este cel mai nou din colecție (din aprilie 2016). Avantajele soluției: în acest meniu vertical orizontal pentru site, sub-articolele conțin pictograme, implementarea și codul CSS în sine sunt destul de simplu de înțeles și implementat.

Pasul 1 - Markup HTML

Primul pas este să creați o listă neordonată în HTML cu link-uri ancora (#) pentru elementele sale. Acolo, într-unul dintre articole, adăugăm o altă listă imbricată, care va fi responsabilă de submeniu.

• Panoul meu de control
• Îi place
• Vizualizări
  • Documente
  • Mesaje
  • Sign out
• Încărcări
• Videoclipuri
• Documente

Pasul 2 - Afișați meniul

Eliminam indentările inutile din CSS pentru elementele meniului vertical orizontal al site-ului. În aceeași etapă, vom seta o lățime și înălțime fixă ​​a elementelor de meniu și, de asemenea, vom adăuga colțuri rotunjite.

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, #4c4e5a 0%, #2c2d33 100%); fundal: -moz-linear-gradient (sus, #4c4e5a 0%, #2c2d33 100%), #4c4e5a 0%, #2c2d33 100%); fundal: -ms-linear-gradient(sus, #4c4e5a 0%,#2c2d33 100%): liniar-gradient (sus, #4c4e5a 0%, #2c2d33 100%); radius: 5px; -moz-border-radius: 5px; bord-radius: 5px;

Pasul 3 - proiectarea legăturii

Pe lângă caracteristicile de bază ale stilurilor (font, culoare, înălțime), folosim și creăm o tranziție lină a culorii textului atunci când trecem cu mouse-ul. Adăugăm și separatoare în meniu, eliminând chenarul de la primul element din stânga și din ultimul din dreapta.

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 #393942; chenar-dreapta: 1px solid #4f5058; font- family: Helvetica, sans-serif: font-size: 1px 1px rgba(0,0,0,.6: color .2s-in-out); transition: color .2s ease-in-out: culoare .2s ease-in-out .menu li:first-child; stânga: niciunul; .menu li:last-child a( chenar-dreapta: niciunul; ) .menu li: hover > a (culoare: #8fde62; )

Pasul 4 - submeniu

Deoarece avem un meniu derulant de site folosind CSS, ar trebui să setăm și un design pentru lista imbricată. Mai întâi, setați o marjă de 40px în partea de sus și 0px în stânga + adăugați colțuri rotunjite. Pentru a afișa/ascunde submeniul, setați inițial proprietatea de opacitate la zero și când treceți cu mouse-ul la unu. Pentru a crea efectul apariției unui submeniu, setați valoarea înălțimii listei la zero și cu hover = 36px.

Meniu ul ( poziție: absolut; sus: 40px; stânga: 0; opacitate: 0; fundal: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- radius: 0 0 5px 5px -webkit-transiție: opacitate .25s ease .1s; opacitate .25s ease .1s ) .menu li:hover > ul ( opacitate: 1; ) .menu ul li ( inaltime: 0; overflow: hidden; padding: 0; -webkit-transition: inaltime .25s ease .1s; -moz-transition: înălțime .25s ease .1s -ms-transition: înălțime .25s ease .1s ) .menu li:hover > ul li ( înălțime: 36px; padding: 0; )

Setăm lățimea legăturilor = 100px, se adaugă un chenar de jos în partea de jos a tuturor elementelor, cu excepția ultimului. De asemenea, dacă doriți, puteți plasa poze pentru articolele din submeniu (atenție! nu uitați să schimbați căile către imaginile din cod cu cele pe care le utilizați).

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 #353539; ) .menu ul li:last-child a ( chenar: niciunul; ) . meniu a.documente ( background: url(../img/docs.png) no-repeat 6px center; ) .meniu a.messages ( background: url(../img/bubble.png) no-repeat 6px center; ) .menu a.signout ( fundal: url(../img/arrow.png) centru 6px fără repetare; )

Personal îmi place ușurința implementării și utilizarea pictogramelor. Iată codul final de la codepen:

Opțiunea lui Josh Riser este vizual similară cu meniul derulant HTML și CSS anterior. Codul nu are un selector de copii „>” (util în modelele cu mai multe niveluri), dar autorul folosește bine efectele CSS3 (tranziție, box-shadow și text-shadow) pentru un rezultat mai frumos. Linkul din sursă nu descrie procesul de creare a unui meniu vertical orizontal, așa că voi furniza imediat codul final:

În acest exemplu, ne vom uita la cum să facem un meniu derulant folosind CSS, care, pe lângă elemente, va conține un bloc de căutare. O implementare similară poate fi adesea găsită în . În ceea ce privește timpul de implementare și complexitatea, soluția este puțin mai complicată decât cele anterioare. A fost publicat în mai 2013, așa că poate fi necesar să modificați unele lucruri, deși a funcționat bine la testarea noastră.

cod HTML

Pentru navigare, ca întotdeauna, se folosește o listă neordonată (cu clasa nav). Elementele obișnuite de meniu sunt elemente din listă (li) și conțin linkuri (a href) fără clase sau ID-uri. Excepție fac 3 elemente specializate ale acestui meniu vertical orizontal cu următoarele ID-uri:

• setări — imagine link;
• căutare — un bloc cu o căutare și un buton corespunzător;
• opțiuni - conține un submeniu (implementat printr-o listă cu clasa subnav).

De asemenea, în cod veți vedea un script fără prefixe pentru utilizarea proprietăților CSS fără prefixe. HTML final pentru meniul drop-down arată astfel:

• 
• Aplicație
• Bord
• Opțiuni
  • Setări
  • Aplicație
  • Bord
  • Opțiuni

Meniu CSS

1. Stiluri de bază și elemente de meniu

Mai întâi, specificăm fontul Montserrat, un fundal gri închis și o înălțime fixă ​​pentru elementele de meniu. Toate elementele au float: aliniere la stânga și poziționare relativă pentru ca ulterior să puteți adăuga un submeniu cu poziție: absolută;

@import url(http://fonts.googleapis.com/css?family=Montserrat); * ( margine: 0; umplutură: 0; ) .nav ( fundal: #232323; înălțime: 60 px; afișare: bloc inline; ) .nav li ( float: stânga; list-style-type: niciunul; poziție: relativă; )

2. Formatarea link-urilor

Elementele de meniu folosesc designul de bază + . Înălțimea este aceeași ca în clasa de navigație. Pentru #settings linkul de imagine de la începutul meniului, alinierea este setată.

Nav li a (dimensiune font: 16px; culoare: alb; afișaj: bloc; înălțime linie: 60px; umplutură: 0 26px; text-decor: niciunul; margine-stânga: 1px solid #2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -dimensiune: 10px; inaltimea liniei: 24px)

3. Bloc de căutare

Acest element are o lățime fixă ​​și este format din mai multe părți - un câmp de introducere (#search_text) cu un fundal verde și un buton de căutare (#search_button). În unele browsere, culoarea de fundal poate fi gri.

#căutare ( lățime: 357px; margine: 4px; ) #search_text( lățime: 297px; padding: 15px 0 15px 20px; font-size: 16px; font-family: Montserrat, sans-serif; chenar: 0 niciunul; înălțime: 52px ; margin-right: 0 outline: none: float-box: all ) ::-webkit-input-placeholder ( /* WebKit browsere */ color: white; ) :-moz-placeholder; Firefox 4 până la 18 */ culoare: alb ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ culoare: alb; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ culoare: alb ; ) #search_text:focus ( fundal: rgb(64, 151, 119); ) #search_button (border: 0 none; fundal: #1f7f5c url (search.png) center no-repeat; float: left; text-align: 52px;

4. Submeniu derulant

Atingerea finală ne va permite să facem un meniu derulant în CSS care se declanșează pentru ultimul element #opțiuni.

#opțiuni a( chenar-stânga: 0 niciunul; ) #opțiuni>a ( imagine de fundal: url(triangle.png); poziția fundal: 85% centru; fundal-repetare: fără repetare; padding-dreapta: 42px; ) .subnav ( vizibilitate: ascuns; poziție: absolut; sus: 110%; dreapta: 0; lățime: 200px; înălțime: automat; opacitate: 0; tranziție: toate 0,1 s; fundal: #232323; ) .subnav li ( float : nici unul; ) .subnav li a ( chenar-jos: 1px solid #2e2e2e; ) #options:hover .subnav (vizibilitate: vizibil; sus: 100%; opacitate: 1; )

În stiluri veți găsi inserarea unei imagini de fundal triunghi (triangle.png) pentru a indica submeniul - nu uitați să indicați calea corectă pentru aceasta și alte imagini în exemplu. Aspectul unui submeniu este implementat folosind proprietatea opacitate. Soluția finală pe codepen:

Această opțiune folosește în principal tehnici CSS2.1, soluția plus sau minus este nouă - pentru martie 2015. Dacă vă lipsește un subnivel dintr-un meniu vertical orizontal pentru un site, atunci acest exemplu conține trei simultan. Folosind pseudo-clasa:only-child, un simbol „+” este adăugat la articole pentru a indica prezența unui submeniu.

În general, un exemplu bun și simplu. Nu vom descrie procesul de implementare în detaliu, deoarece... este similar cu cele anterioare - mai întâi creați un cadru HTML, apoi adăugați treptat stiluri pentru acesta. Descărcați codul final folosind linkul către sursă, îl puteți vizualiza parțial în Codepen:

Total

Mai sus ne-am uitat la 4 opțiuni pentru cum să faceți un meniu derulant folosind CSS + HTML pentru, deși există multe mai multe exemple similare pe Internet. Există soluții cu jQuery, dar acest lucru este cel mai probabil util doar pentru implementarea unor efecte speciale și sarcini non-standard. În cele mai multe cazuri, o combinație de CSS + HTML va fi suficientă, mai ales că acum principalele cerințe pentru un meniu sunt confortul și viteza de încărcare rapidă.

În sfârșit, două note despre codurile de mai sus. Unele exemple folosesc imagini în CSS pentru meniul drop-down, așa că va trebui să revizuiți cu atenție căile imaginilor și să furnizați valorile corecte pentru site-ul dvs. În al doilea rând, unele dintre soluții au o vechime de 2-3 ani, așa că ar trebui să verificați încă o dată performanța acestora în diferite browsere.

Dacă cunoașteți alte implementări moderne interesante ale meniurilor derulante orizontale pentru un site web, trimiteți linkuri în comentarii.

Habr, salut!

Există o mulțime de soluții bune de la diferiți specialiști care apar pe Codepen și cred că cele mai bune dintre ele ar trebui adunate într-un singur loc. Prin urmare, acum 2 ani am început să salvez pe computer scripturi interesante pe diverse subiecte.

Obișnuiam să le postez în grupul de produse mr cloud IDE. Gefest, acestea au fost ansambluri de 5-8 soluții. Dar acum am început să acumulez 15-30 de scripturi pe diferite subiecte (butoane, meniuri, sfaturi cu instrumente și așa mai departe).

Astfel de seturi mari ar trebui prezentate mai multor specialiști. De aceea le postez pe Habr. Sper că vă vor fi de folos.

În această recenzie ne vom uita la meniurile cu mai multe niveluri.

Navigare orizontală plată

Bară de navigare frumoasă, cu submeniuri care apar fără probleme. Codul este bine structurat și folosește js. Judecând după caracteristicile utilizate, funcționează în ie8+.
http://codepen.io/andytran/pen/kmAEy

Antet Nav material cu meniuri derulante aliniate

Bară de legătură adaptivă cu submeniu cu două coloane. Totul se face în css și html. S-au folosit selectoare css3 care nu sunt acceptate în ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Meniu derulant Smooth Accordion

Meniu vertical elegant, cu elemente care se deschid fără probleme. Se folosește codul js de tranziție, transformare.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline Navigation Menu

Bară de navigare verticală întunecată cu pictograme din ionicons. Este folosit JavaScript. În ie8, cel mai probabil va funcționa fără animație.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega Meniu dropdown cu animație

Meniu elegant cu două formate de ieșire: orizontal și vertical. Sunt folosite pictogramele și animația CSS3. Cu siguranță va arăta groaznic în ie8, dar în alte browsere totul este cool.
Link vertical: http://codepen.io/rizky_k_r/full/sqcAn/
Link către orizontală: http://codepen.io/rizky_k_r/pen/xFjqs

Meniu derulant CSS3

Meniu orizontal cu elemente mari și o listă derulantă de link-uri. Cod curat și minimalist fără js.
http://codepen.io/ojbravo/pen/tIacg

Meniu derulant simplu CSS pur

Meniu orizontal simplu, dar elegant. Folosește font-awesome. Totul funcționează pe css și html, fără js. Va funcționa în ie8.
http://codepen.io/Responsive/pen/raNrEW

Meniu derulant mega Bootstrap 3

O soluție excelentă pentru magazinele online. Afișează mai multe niveluri de categorii și imagini mari (de exemplu, un produs în vânzare). Se bazează pe boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Navigare plată

Bară de navigare elegantă cu submeniu neted. În browserele mai vechi, va afișa probleme.
http://codepen.io/andytran/pen/YPvQQN

Navigare imbricată 3D

Meniu orizontal cu animație foarte cool fără js!
http://codepen.io/devilishalchemist/pen/wBGVor

Mega meniu receptiv - Navigare

Meniu receptiv orizontal. Arată bine, dar versiunea mobilă este puțin șchiopătată. Se folosesc CSS, html și js.
http://codepen.io/samiralley/pen/xvFdc

Meniu Css3 pur

Meniu original. Cu cod simplu și curat, fără js. Utilizați pentru efecte „wow”.
http://codepen.io/Sonick/pen/xJagi

Meniu derulant complet CSS3

Meniu derulant colorat cu un singur nivel de imbricare. Sunt folosite icoane de la font-awesome, html și css.
http://codepen.io/daniesy/pen/pfxFi

Meniu derulant numai Css3

Un meniu orizontal destul de bun cu trei niveluri de imbricare. Functioneaza fara js.
http://codepen.io/riogrande/pen/ahBrb

Meniuri derulante

Un meniu minimalist cu un efect original al aspectului unei liste imbricate de elemente. Mă bucur că această soluție este și fără javascript.
http://codepen.io/kkrueger/pen/qfoLa

Meniu drop-down CSS pur

O soluție primitivă, dar eficientă. Doar css și html.
http://codepen.io/andornagy/pen/xhiJH

Pull Menu - Concept de interacțiune cu meniu

Concept de meniu interesant pentru un telefon mobil. Nu am mai văzut așa ceva până acum. Utilizează html, css și javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Creați un meniu derulant simplu

Cod curat și simplu, fără js. Cu siguranță va funcționa în ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Meniu derulant CSS pur

Soluția nu este rea, dar folosește prea multe clase. Mă bucur că nu există js.
http://codepen.io/jonathlee/pen/mJMzgR

Meniu derulant

Meniu vertical frumos cu cod javascript minim. JQuery nu este folosit!
http://codepen.io/MeredithU/pen/GAinq

Meniu derulant CSS 3

Un meniu orizontal cu legende suplimentare vă poate decora bine site-ul. Codul este simplu și clar. Javascript nu este folosit.
http://codepen.io/ibeeback/pen/qdEZjR

Soluție frumoasă cu mult cod (html, css și js). Au fost create 3 formate de submeniu. Soluția este potrivită pentru magazinele online.
http://codepen.io/martinridgway/pen/KVdKQJ

Meniuri derulante CSS3 (soluție specială)!

Meniu orizontal întunecat cu treisprezece (13) opțiuni de animație! Cu siguranta te sfatuiesc sa-l citesti, iti va fi de folos in viata de zi cu zi.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Sper că v-a plăcut colecția de 23 de soluții. Dacă doriți să continuați să le citiți, atunci răspundeți la sondajul de mai jos.
Bucurați-vă de munca voastră tuturor.

Eticheta este destinată să afișeze o listă de elemente de meniu. Similar cu etichetele și

în interiorul containerului lista se formează folosind etichete
• .

  În HTML4, eticheta a devenit învechită, se recomandă utilizarea etichetei în schimb

  . În HTML5 eticheta este inclusă din nou, dar într-o altă capacitate. Acum acționează ca un container pentru crearea etichetei și a meniului.
  Sintaxă

  HTML	articol din meniu articol din meniu
  HTML5	...

  Atribute Setează eticheta vizibilă pentru meniu. Setează tipul de meniu. Etichetă de închidere

  Necesar.

  Validare

  Utilizarea acestei etichete este condamnată de specificația HTML4. În HTML5, eticheta este utilizată corect.

  HTML 4.01 IE Cr Op Sa Fx

  Eticheta MENU

  În această problemă:

  • bucatarie ruseasca. Supă Burlatskaya
  • Mâncare ucraineană. Vareniki
  • Bucătăria moldovenească. Boia de ardei
  • Bucătărie caucaziană. Supa kharcho
  • Bucătăria baltică. Vertinyai

  Rezultatul acestui exemplu este prezentat în Fig. 1.

  Orez. 1. Vedere a unei liste create folosind o etichetă

  HTML5 IE Cr Op Sa Fx

  Eticheta MENU

  • Nou... Deschide... Salvează
  • Copiați Cut Lipiți

  De la autor: Vă urez bun venit pe blogul nostru despre construirea site-ului web. Aceasta este o serie de articole dedicate noii specificații și astăzi aș dori să vă spun cum să creați un meniu în HTML5 și cum diferă acest proces de același din versiunile anterioare ale limbajului.

  Care sunt diferențele

  În primul rând, aș dori să spun că specificația nu este atât de nouă - și-a început dezvoltarea în 2009. De fapt, de atunci a existat o dezvoltare constantă - noi funcții apar în html5, browserele moderne acceptă din ce în ce mai mult aceleași caracteristici, astfel încât în ​​curând va fi posibil să vorbim despre suport complet pentru această tehnologie, deși nu este un singur întreg, este mai degrabă un set de noi posibilități, fiecare dintre acestea fiind independentă.

  Ei bine, bine, dar ce este diferit la crearea navigației principale (meniu), deoarece citiți un articol pe acest subiect, atunci ar trebui să existe cu siguranță unele diferențe. Ei bine, cum a fost creat meniul înainte? De obicei, a fost folosită o listă cu marcatori, care a fost plasată într-un container suplimentar pentru toată navigația - un div obișnuit.

  Deci, odată cu apariția noilor etichete, acum puteți face ceva mai corect - în loc de o etichetă div, înfășurați meniul în nav - un nou element semantic care a fost creat special pentru a colecta cele mai importante link-uri din el și pentru a le grupa împreună.

  Puteți pune fie o listă, fie doar un set de link-uri în nav. Mi se pare că aceasta este o soluție și mai simplă și mai corectă, deși în multe șabloane puteți vedea în continuare implementarea meniului folosind etichetele ul, li, a.

  Interesant este că containerul de navigare a fost creat special pentru link-urile prioritare din pagină. De fapt, pe o pagină poate exista mai mult de un astfel de container, dar ar trebui să plasați în ele doar acele link-uri care formează de fapt navigația principală (de exemplu, meniul principal de sus și duplicatul acestuia în subsolul paginii).

  Cum să faci un meniu orizontal folosind html5

  Acasă Servicii Contacte Recenzii

  Nici măcar nu aveți nevoie de nicio încadrare în listă, totul va fi afișat inițial pe o singură linie, deoarece linkurile sunt elemente inline.

  Un alt lucru este că sunt foarte limitate în design datorită proprietăților lor inline. Veți putea opera numai cu proprietăți precum: culoare, dimensiunea fontului, marginile. Dacă doriți să setați o anumită culoare de fundal, să faceți separatoare și să adăugați umplutură (sau să determinați dimensiunea fiecărui element de meniu), atunci nu veți putea face acest lucru cu o linie.

  Aici va trebui să ne transformăm articolele în elemente bloc. Pentru a face acest lucru, trebuie să scrie proprietatea:

  afisare: bloc;

  Acum merg de sus în jos, adică navigarea noastră a devenit verticală. Pentru a o transforma înapoi în orizontală, trebuie să adăugați anumite proprietăți. De exemplu, în loc de un tip de bloc, definiți un tip de linie de bloc pentru ele sau dați-le (float: stânga). Citiți mai multe despre aceste metode.

  Navigare pe verticală

  De obicei, pentru a face un meniu vertical în html5, ei folosesc o listă, dar markup-ul pe care ți l-am dat mai sus este potrivit și pentru noi. După cum ați văzut, dacă convertiți link-uri în link-uri bloc, acestea se vor alinia automat unul după altul de sus în jos, deoarece două blocuri nu pot fi pe aceeași linie.

  Acum le puteți aplica regulile de proiectare necesare. Blocurile au mult mai multe proprietăți decât un element inline, așa că aveți mult mai multe opțiuni. De exemplu, am adăugat acestea:

  a( text-decor: niciunul; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afișare: bloc; fundal: liniar-gradient(la dreapta, rgba(96,108,136,1) 0%,rgba(63,76,107) ,1) 100%) lățime: 200px;

  text - decor : nici unul ; culoare: #fff; umplutură: 5px; dimensiunea fontului: 22px; afisare: bloc; fundal: liniar - gradient (la dreapta, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%); latime: 200px; text - aliniere : centru