Meniuri largi pe întreaga pagină. Cum să faci un meniu CSS receptiv? Marcaj HTML și stiluri de bază pentru meniul orizontal

Buna ziua. Multă vreme nu am scris postări pe tema cum funcționează html/css. Recent, tocmai am început să alcătuiesc un nou aspect și în acest proces am dat peste un truc interesant care vă permite să faceți meniul cauciuc (puteți adăuga elemente noi la acesta și dimensiunea nu va crește, dar va fi întotdeauna 100). % din blocul părinte). Deci, astăzi implementăm un meniu cauciuc pe css.

Dacă vă este prea lene să citiți articolul, puteți viziona acest videoclip. De asemenea, autorul explică totul foarte frumos:

Meniul CSS Fluid Pasul 1

Primul pas este întotdeauna marcajul html, unde fără el. Dar în cazul nostru, totul va fi simplu:

  1. bloc de pachet de meniu
  2. meniul în sine, redat printr-o listă cu marcatori (etichetă ul)
  3. bine, elementele de meniu din interior și, respectiv, în ele, există deja link-uri

Totul este clar, iată codul meu de marcare:



Totul arată standard, așa:

Acum vom aduce totul în forma dorită, CSS este luat la lucru.

Pasul 2 - Stiluri de bază

În continuare, voi adăuga stiluri la blocul wrapper. Și anume, voi seta lățimea maximă la 600 de pixeli (doar pentru a fi convenabil să faceți o captură de ecran, astfel încât meniul să se potrivească), și voi centra și blocul.

înfășura
fundal: #fff;
lățime maximă: 600px
marja: 0 auto;
}

Pasul 3 - implementați elasticitatea

Acum luăm meniul în sine. Voi elimina markerii din ea (din eticheta ul), voi face gradientul liniar de fundal și, cel mai important, cu proprietatea display: table-row, voi face ca containerul pentru meniu să se comporte ca un rând de tabel. Acest lucru este important pentru alte manipulări.

R-meniu(
fundal: gradient liniar (la dreapta, #b0d4e3 0%,#88bacf 100%);
display:table-row;
stil-listă: niciunul;
}

După cum puteți vedea, codul de mai sus tocmai a rezolvat tot ce am scris. Apropo, este convenabil să generați gradienți utilizând instrumentul Ultimate CSS Gradient generator. Voi scrie despre asta cândva.

R-meniu li(
vertical-align: fund;
display:tabel-celula;
latime: auto;
text-align: centru;
înălțime: 50px;
chenar-dreapta: 1px solid #222;
}

  • vertical-align: bottom - această proprietate este necesară pentru ca dacă textul din elementul de meniu are 2 linii, acesta să fie afișat exact. Când facem meniul, puteți elimina această proprietate, puteți mări astfel încât elementele să se micșoreze și textul să se încapă pe două linii și veți vedea o problemă de afișare. Returnați proprietatea și totul va fi bine.
  • display: table-cell - deoarece setăm meniul de afișare propriu-zis pe un rând de tabel, ar fi logic să setăm elementele acestuia să fie afișate ca celule într-un tabel. Este necesar.
  • width: auto - lățimea va fi calculată automat, în funcție de lungimea textului din paragraf
  • text-align: center este doar pentru alinierea textului din interior în centru
  • înălțime: 50 pixeli - setați înălțimea la 50 pixeli
  • ei bine, border-right este doar un chenar pe dreapta, un astfel de separator pentru articole

În timp ce meniul arată inestetic, dar este în regulă, este timpul să-l aduci în minte.

Ultimul lucru de făcut este să stilați legăturile din interiorul paragrafelor. Aici am acest cod:

R-meniu li a(
text-decor: niciuna;
lățime: 1000px
înălțime: 50px;
vertical-align: mijloc;
display:tabel-celula;
culoare: #fff;
font: normal 14px Verdana;
}

Și așa arată meniul acum:

Din nou, voi explica câteva rânduri:

  • proprietatea text-decoration elimină sublinierea implicită din linkuri
  • lățime: 1000px este poate cea mai importantă linie. Trebuie să setați legăturile la aproximativ aceeași lățime, poate mai puțin, dar întotdeauna mai mult decât elementul de meniu cel mai larg. Legăturile nu vor avea o lățime de 1000 pixeli, deoarece lățimea va fi limitată de elementul de meniu li, care are o lățime setată la automat, dar o va face astfel încât, indiferent câte elemente din meniu, va fi întotdeauna 100. procent lat.
  • vertical-align: middle și display: table-cell - primul va alinia textul vertical la centru, iar al doilea va afișa, de asemenea, link-uri ca celule. Ambele proprietăți sunt necesare.
  • font - ei bine, este doar un set de setări pentru font. Citiți despre proprietățile css pentru fonturi în acest articol.

Pasul 4 (opțional) puteți adăuga interactivitate

De exemplu, pentru a schimba culoarea unui element de meniu la trecerea cursorului. Acest lucru este implementat destul de simplu, folosind pseudoclasa hover:

R-meniu li:hover(
culoare de fundal: #6bba70;
}

Testarea meniului pentru caracterul cauciuc

Super, meniurile sunt gata, dar nu am verificat cel mai important lucru - cât de cauciuc este, așa cum v-am promis. Ei bine, voi adăuga încă 2 articole în meniu:

Meniul rămâne cu o lățime de 600 de pixeli. Restul articolelor se micșorează puțin pentru a se potrivi cu 2 noi.

Mai adaug un paragraf lung:

După cum puteți vedea, meniul sa micșorat puțin și elementul lung a fost afișat destul de normal. Și dacă nu ar fi fost proprietatea vertical-align: bottom despre care v-am spus, meniul ar arăta mai rău.

Voi reduce meniul la trei elemente.

Articolele au devenit mult mai libere, dar meniul în sine nu s-a schimbat în lățime. Așa că am făcut un meniu 100% cauciuc!

Cum să-l adaptezi?

În principiu, dacă setați blocul de înfășurare nu la o lățime fixă, ci la o lățime maximă, atunci nici măcar nu trebuie să fie adaptat. În cazul meu, am proprietatea max-width: 600px, iar când lățimea devine mai mică de 600px, blocul va scădea pur și simplu în urma ecranului, fără a forma un scroll orizontal.

Ei bine, dacă vrei să schimbi sau să repari cumva meniul pe dispozitive mobile sau pe ecrane late, atunci interogările media te vor ajuta! Mult succes la construirea site-ului!

Un aspect destul de comun al meniului site-ului, când containerul cu acesta ocupă toată lățimea disponibilă în pagină. În acest caz, primul element este adiacent marginii din stânga, iar ultimul este adiacent celui din dreapta, iar distanța dintre toate elementele este egală. Astăzi vă vom arăta cum se face.

Vă oferim un exemplu de implementare a unui meniu cauciuc folosind CSS pentru resursa dvs. În acest meniu, articolele vor fi localizate într-o singură linie. Javascript nu va fi folosit. Conținutul meniului va fi împachetat într-o listă normală. Caracteristica principală a unui astfel de meniu este versatilitatea acestuia, care se exprimă prin faptul că atât numărul, cât și lungimea articolelor pot fi oricare.

Cum se implementează?

Fiecare programator poate oferi propriul mod de a rezolva problema. Totul depinde de imaginația, nivelul de profesionalism și abilitățile lui. Cea mai comună soluție la această problemă este utilizarea unui tabel. De asemenea, mulți ar sugera folosirea javascriptului. Cei care ar sugera folosirea proprietății de afișare cu o valoare masa sau celula tabelului- Mă grăbesc să mă supăr. Această metodă nu are suficientă compatibilitate între browsere.

Soluția noastră

Propunerea noastră va fi construită pe o bază solidă de cunoștințe HTML5 și CSS3.

Esența procesului se bazează pe proprietatea text-align cu valoarea justify. Pentru cei care au uitat - vă reamintesc: această proprietate orientează alinierea textului pe toată lățimea containerului.

Atunci când utilizați soluția noastră, trebuie respectate două reguli obligatorii. Primul este că lățimea containerului articolului de meniu trebuie să fie mai mică decât textul. Adică nu într-o singură linie. A doua regulă importantă este că cuvintele sunt întinse în mod egal, indiferent dacă aparțin aceluiași paragraf sau nu.

Mai jos este codul care servește ca exemplu de creare a unui meniu „cauciuc”:

HTML

< ul> < li>< a href= "#" >Acasă < li>< a href= "#" >Blog < li>< a href= "#" >știri < li>< a href= "#" >Popular < li>< a href= "#" >Nou

ul (text- align: justifica; overflow: ascuns; /* elimina efectul secundar al metodei */înălțime: 20px; /* elimină și cele inutile */ cursor: implicit; /* setează forma inițială a cursorului */ marjă: 50px 100px 0 100px; fundal: #eee; umplutură: 5px ) li ( display: inline; /* face text elementele de meniu */) li a ( display: inline-block; /* elimină rupturile de cuvinte din meniu */ culoare: #444; ) a: hover ( culoare: #ff0000; ) ul: după ( /* formând a doua linie pentru elaborarea metodei */ continut: "1" ; margine-stânga: 100%; înălțime: 1px; preaplin: ascuns; display: inline-block; )

Pentru a lucra în vechiul Internet Explorer, trebuie să adăugați în plus următorul cod la CSS

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-left: 100%; ) * html ul ( /* nevoie doar de ie6 */ înălțime: 30px; )

După ce am înregistrat valorile și codul de proprietate necesare, obținem următorul meniu de cauciuc:

Dezavantajele metodei

  1. Cod de volum
  2. Imposibilitatea determinării stării active a unui element printr-un selector de clasă. Acest lucru se datorează rupțiilor de cuvinte în paragrafe (dacă există). Soluția la această problemă este să adăugați un alt container în interiorul articolelor din listă.
  3. Pentru meniul drop-down, trebuie să personalizați codul din cauza impactului negativ al overflow .

Pe ce browsere functioneaza?

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

Continuăm seria cu o lecție despre meniurile derulante. Următorul în linie este un meniu derulant orizontal de tip do-it-yourself în css.

Dacă ai ajuns aici din întâmplare sau ai căutat o altă implementare a meniului derulant, te sfătuiesc să mergi la secțiunea părinte.

Această secțiune va descrie meniul vertical orizontal în CSS și HTML.

Navigare în pagină:

Asa de, sarcina noastra:

faceți un meniu vertical CSS orizontal (pe listele ul li) fără a utiliza jQuery și Javascript și, de asemenea, fără a utiliza tabele

în cod.

meniu vertical html orizontal

În primul rând, înainte de a începe să scriem cod, trebuie să facem un șablon html pentru meniu.

Datorită faptului că realizăm un meniu universal, vreau să îl fac cât mai asemănător cu rezultatul meniului WordPress. După părerea mea, acesta este unul dintre cele mai simple și mai versatile coduri de meniu HTML. Arata cam asa:

După cum puteți vedea din cod, meniul nostru drop-down va fi implementat pe listele ul și li. Iată cum arată meniul fără stilul CSS:

Să spunem că arată urât, ca o listă obișnuită. În continuare, trebuie să decoram acest meniu cu stiluri CSS.

Meniu vertical CSS orizontal

Stilurile CSS pentru meniurile drop-down și altele sunt o necesitate ca aer. La urma urmei, fila drop-down este realizată pe baza pseudo-clasei:hover.

Pentru meniul vertical orizontal, avem nevoie de următoarele stiluri:

#menu1( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; z-index:10; ) #meniu1 ul( poziție:relativ; afișare:bloc; margine:0px; padding:0px; lățime:100 %; înălțime:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; conținut:" "; ) # meniu1 ul li( poziție:relativ; afișare:bloc; float:stânga; lățime:auto; înălțime:auto; ) #menu1 ul li a( afișare:bloc; padding:9px 25px 0px 25px; font-size:14px; font- familie: Arial, sans-serif; culoare: #ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:majuscule; înălțime: 36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fundal:#EBBD5B; culoare:#2B45E0; )

Acesta nu este încă sfârșitul, doar o parte din CSS pentru meniul principal orizontal. În continuare, vom scrie stilurile pentru meniul drop-down:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*această linie implementează mecanism de abandon*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover( fundal:#FDDC96; culoare:#6572BC; )

Acum asta-i tot. Mecanismul derulant în sine este implementat într-o singură linie.

Vedeți pielea cu acest meniu:

Orez. 2 (meniu vertical orizontal)

Mai jos este o demonstrație a funcționării meniului derulant, precum și un link pentru a descărca codul sursă. (Demo-ul se va deschide într-un meniu derulant peste această pagină, nu este nevoie să faceți clic pe Deschide în fereastră nouă 🙂 sau să folosiți rotița mouse-ului)

Meniu vertical orizontal cu lățime completă

Majoritatea dintre voi îmi puteți reproșa, spunând că astfel de meniuri, așa cum am arătat mai sus, sunt salutări din trecut și, în parte, aveți dreptate, deși am întâlnit machete noi cu astfel de meniuri.

Sper că ai descărcat exemplul de mai sus. Html rămâne același la noi, dar vom schimba complet CSS-ul. Puteți pur și simplu să luați codul CSS de aici și să-l inserați în exemplul descărcat sau să vedeți cum funcționează în modul demo.

#container( lățime:1000px; înălțime:auto; margin:0px automat; padding-top:10px; ) #meniu1( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; z-index:10; ) #menu1 ul( poziție:relativ; afișare:bloc; margine:0px; padding:0px; lățime:100%; înălțime:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relativ; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; font-size :14px; font-family:Arial, sans-serif; culoare:#ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:majuscule; înălțime: 36px; dimensiunea casetei :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fundal:#EBBD5B; culoare:#2B45E0; ) #menu1 ul li ul( poziție:absolute; sus:36px; stânga :0px; afișaj: niciunul; latime:auto; fundal:#EBBD5B; spatiu alb:nowrap; ) #menu1 ul li:last-child ul(/*ultimul articol va fi ancorat la dreapta*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*această linie implementează mecanismul abandonează*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width: 100% ; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child a(border-top:0px;) #menu1 ul li ul li a:hover( fundal: #FDDC96; culoare:#6572BC; )

De asemenea, acest exemplu diferă de primul prin faptul că meniul derulant, derulant în sine, se întinde în funcție de lățimea tuturor elementelor de meniu.

Pentru elementele de meniu foarte lungi, această opțiune poate să nu fie foarte convenabilă, deoarece acestea vor ieși din limite. Pentru a dezactiva această proprietate, trebuie doar să căutați proprietatea „white-space: nowrap;” selectorul #menu1 ul li ul și scoateți-l.

Mai jos puteți vedea o demonstrație sau puteți descărca sursa meniului vertical orizontal:

Fără separatoare, acest meniu arată așa. Separatoarele pot fi adăugate manual în html, dar dacă aveți un CMS, cum ar fi WordPress, atunci adăugarea manuală a acestuia nu este foarte convenabilă.

Meniu vertical orizontal cu separatoare

Există zeci de opțiuni despre cum să adăugați o bară (separator) între elementele de meniu folosind CSS pur. Opțiuni care folosesc::before sau::after , sau mult mai simplu chenar-stânga, chenar-dreapta, nu voi duplica.

Există situații în care layout-ul este construit atât de minunat încât jquery este indispensabil.

Codul nostru HTML rămâne același, includem doar biblioteca jQuery și fișierul care o folosește la început:

Imediat dupa.

După cum înțelegeți, trebuie să creați un fișier script-menu-3.jsși pune acest mic cod acolo:

$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));

Stilurile CSS pentru un astfel de meniu ar trebui lăsate așa cum sunt, + aruncați această piesă la sfârșit:

#menu1 ul li.razd( înălțime:28px; lățime:1px; fundal:#ffffff; margin-top:4px; )

Un astfel de meniu vertical orizontal cu separatori în jQuery va arăta astfel:

Puteți vizualiza demonstrația sau descărca șablonul de meniu orizontal de mai jos:

Avantajele unei astfel de soluții sunt:

  • meniul va fi tras dinamic;
  • inclinațiile de la separator la paragraf sunt aceleași peste tot;
  • design mai frumos și mai flexibil.

CSS+HTML Meniu vertical stratificat orizontal

Deoarece vorbim despre meniuri derulante pe mai multe niveluri, probabil că merită să le împărțim în subgrupuri:

  1. cu vipadashka când arată în lateral
  2. cu un pop-up de nivel al treilea

În exemplele mele, voi afișa un meniu CSS cu mai multe niveluri pentru 3 niveluri, apoi cred că nu va fi greu de ghicit ce trebuie făcut.

Meniu derulant pe mai multe niveluri cu vipad-ul în lateral

Pentru început, trebuie să ne corectăm ușor codul html. Acolo vor fi adăugate câteva rânduri pentru nivelul 3:

#container( lățime:1000px; înălțime:auto; margin:0px automat; padding-top:10px; ) #meniu1( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; z-index:10; ) #menu1 ul( poziție:relativ; afișare:bloc; margine:0px; padding:0px; lățime:100%; înălțime:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relativ; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em; text-decoration:none; font-weight:bold; text-transform:uppercase; height:36px; box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a (fundal: #EBBD5B; culoare:#2B45E0; ) #menu1 ul li ul( poziție: absolut; sus:36px; stânga:0px; afișare:niciuna; lățime:auto; fundal:#EBBD5B; spațiu alb:nowrap; ) #menu1 > ul > li:last-child > ul(/*ultimul articol va fi ancorat la dreapta*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*această linie implementează mecanismul de abandon*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border -box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li: hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last -child > ul ul(stânga:auto; dreapta:100%;) #menu1 ul li ul li ul a(culoare:#F38A01;)

Fișierele pentru jQuery sunt copiate așa cum au fost din exemplul anterior. Am decis să las separatoarele, astfel încât meniul să arate măcar puțin mai bine. Este posibil, desigur, fără ele.

Așa s-a întâmplat:
Am făcut 2 piei într-una pentru a arăta cum arată fanda în dreapta și în mijloc.

Mai jos puteți vedea o demonstrație și puteți descărca un exemplu:

Meniu derulant stratificat cu meniu derulant pop-up la trecerea cursorului

A apărut puțin ulei în titlu, dar va funcționa, principalul lucru este codul.

Esența acestui exemplu este de a crea un meniu vertical orizontal cu lățime completă cu un meniu derulant cu lățime completă + niveluri multiple.

Nu voi schimba codul HTML, acesta poate fi luat din exemplul anterior. Separatoarele pe jQuery sunt de asemenea lăsate.

Doar CSS-ul se va schimba complet:

#container( lățime:1000px; înălțime:auto; margin:0px automat; padding-top:10px; ) #meniu1( poziție:relativ; afișare:bloc; lățime:100%; înălțime:auto; z-index:10; ) #menu1 ul( poziție:relativ; afișare:bloc; margine:0px; padding:0px; lățime:100%; înălțime:auto; list-style:none; background:#F3A601; ) #menu1 > ul( text-align: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( position :relativ; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( înălțime :28px; lățime:1px; fundal:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; culoare: #ffffef; line-height:1.3em; text-decoration:none; font-weight:bold; text-transform:majuscule; înălțime: 36px; box-sizing:border-box; ) #menu1 ul li > a: hover, #menu1 ul li:hover > a( background:#EBBD5B; culoare:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:100%; background:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; lățime:100%; înălțime:0px; conținut:" "; ) #menu1 ul li:hover > ul(display:block;)/*această linie implementează mecanismul de abandon*/ #menu1 ul li ul li( display :block; width:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing: border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( background:#FDDC96 ; color:#6572BC; ) #menu1 ul li ul li ul( sus:0px; stânga:100%; display:none; background:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(display : bloc; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

Așa va arăta meniul: Singurul punct este că site-ul ar trebui să aibă suficient spațiu, deoarece ultimul element din dreapta nu are loc pentru renunțare. Această problemă poate fi rezolvată prin: al n-lea copil dar nu m-am deranjat să îngrădesc grădina.

Vedeți demonstrația meniului vertical pe mai multe niveluri:

După cum probabil ați observat: placa de jos este, de asemenea, pe toată lățimea. Asa se fac fandarile in mai multe blocuri.

Asta e tot pentru mine, sper ca macar unul dintre exemplele mele sa ti se potriveasca. Multumesc pentru atentie.

le va beneficia atât ei, cât și mie 🙂 .

Dacă ați citit postarea în întregime, dar nu ați găsit cum să vă faceți propriul meniu vertical orizontal în css, puneți o întrebare în comentarii sau folosiți căutarea pe site.

De asemenea, vă sfătuiesc să vizitați pagina părinte https://website/vypadayushhee-menu/, sunt colectate toate exemplele și varietățile de meniuri derulante.

Meniu orizontal este o listă de secțiuni ale site-ului, deci este mai logic să marcați în interiorul elementului

    și apoi aplicați stiluri CSS elementelor sale. Aceasta aranjare a meniului este cea mai frecventa datorita avantajelor evidente in pozitionarea acestuia pe o pagina web.

    Cum să faci un meniu orizontal: exemple de marcare și design

    Marcaj HTML și stiluri de bază pentru meniul orizontal

    În mod implicit, toate elementele din listă sunt localizate vertical, care se întinde pe întreaga lățime a elementului container, care, la rândul său, se întinde pe întreaga lățime a blocului său container.

    Markup HTML pentru navigare orizontală

    Un meniu orizontal situat în interiorul etichetei poate fi plasat suplimentar în interiorul elementului

    și/sau
    ...
    . Acest marcaj html oferă semnificație semantică, precum și o oportunitate suplimentară pentru formatarea blocului de meniu.

    Există mai multe moduri de a le plasa orizontal. Mai întâi trebuie să resetați stilurile implicite de browser pentru elementele de navigare:

    Ul ( list-style: none; /*eliminați marcatorii listei*/ margin: 0; /*eliminați marginile de sus și de jos de 1em*/ padding-left: 0; /*eliminați umplutura din stânga de 40px*/ ) a ( decor text: niciunul; /*eliminați sublinierea textului linkului*/)

    Metoda 1. li (afișare: inline;)

    Faceți elementele din listă în linie. Ca urmare, acestea sunt dispuse orizontal, în partea dreaptă se adaugă între ele un decalaj egal cu 0,4em (calculat raportat la dimensiunea fontului). Pentru a o elimina, adăugați o marjă dreaptă negativă la li li (margin-dreapta: -4px;) . Apoi, stilați linkurile după cum doriți.

    Metoda 2. li (float: left;)

    Facem elementele listei plutitoare. Ca urmare, acestea sunt dispuse orizontal. Înălțimea blocului container ul devine zero. Pentru a rezolva această problemă, adăugăm (overflow: hidden;) la ul , extinzându-l și permițându-i astfel să conțină elemente plutitoare. Pentru linkuri, adăugați un (afișare: bloc;) și stilați-le după cum doriți.

    Metoda 3. li (display: inline-block;)

    Crearea elementelor din listă în bloc. Sunt dispuse orizontal, se formează un gol pe partea dreaptă, ca în primul caz. Pentru linkuri, adăugați un (afișare: bloc;) și stilați-le după cum doriți.

    Metoda 4. ul (afișare: flex;)

    Transformarea listei ul într-un container flexibil folosind . Ca urmare, elementele listei sunt așezate orizontal. Adăugați un (afișare: bloc;) pentru link-uri și stilați-le după cum doriți.

    1. Meniu receptiv cu efect de subliniere atunci când treceți cu mouse-ul peste un link

    • muncă
    • Despre
    • Blog
    • a lua legatura
    @import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main ( list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; ) .menu-main li (display: inline-block;) .menu- main li:after (conținut: „|”; culoare: #606060; afișare: inline-block; vertical-align:top; ) .menu-main li:last-child:after (conținut: niciunul;) .menu-main a ( text-decor: niciunul; font-family: „Ubuntu Condensed”, sans-serif; spațiere între litere: 2px; poziție: relativă; padding-bottom: 20px; margine: 0 34px 0 30px; dimensiunea fontului: 17px; text-transform: majuscule; afișare: inline-block; tranziție: culoare .2s; ) .menu-main a, .menu-main a:visited (culoare: #9d999d;) .menu-main a.current, .menu- main a:hover(culoare: #feb386;) .menu-main a:before, .menu-main a:after (conținut: ""; poziție: absolut; înălțime: 4px; sus: automat; dreapta: 50%; jos : -5px; stânga: 50%; fundal: #feb386; tranziție: .8s; ) .menu-main a:hover:before, .menu-main .current:before (stânga: 0;) .menu-main a: hover:după, .menu-principal .current:după (dreapta: 0; ) @media (max-width: 550px) ( .menu-main (padding-top: 0;) .menu-main li (display: block;) .menu-main li:after (conținut: niciunul;) .menu- principal a ( umplutură: 25px 0 20px; marja: 030px; ) )

    2. Meniu responsive pentru un site de nunta

    @import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-meniu (poziție: relativ; fundal: #fff; box-shadow: inset 0 0 10px #ccc; ) .top-menu:before, .top-menu:after (conținut: ""; afișare: bloc; înălțime : 1px; chenar-sus: 3px solid #575350; chenar-jos: 1px solid #575350; margin-bottom: 2px; ).top-menu:after ( chenar-jos: 3px solid #575350; chenar-sus: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; ) .menu-main ( list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: centru; poziție: relativă; ) .menu-principal:înainte, .menu-principal:după (conținut: „\25C8”; înălțimea liniei: 1; poziție: absolută; sus: 50%; transformare: translateY(-50% ); ) .menu-main:before (stânga: 15px;) .menu-main:after (dreapta: 15px;) .menu-main li ( display: inline-block; padding: 5px 0; ) .menu-main a ( text-decor: niciuna; afișare: inline-block; margine: 2px 5px; umplutură: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; culoare: #777777; chenar-bottom : 1px solid transparent n: .3s liniar; ) .menu-main .current, .menu-main a:hover ( chenar-rază: 3px; fundal: #f3ece1; culoare: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (lățime maximă: 500px) ( .menu-principal li (afișare: bloc;) )

    3. Meniu responsive cu scoici

    • muncă
    • Despre
    • Blog
    • a lua legatura
    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-principal (stil listă: niciunul; padding: 0 30px; margine: 0; dimensiunea fontului: 18px; text-align: center; poziție: relativ; fundal: alb; ) .menu-main:after (conținut: ""; poziție: absolut; lățime: 100%; înălțime: 20px; stânga: 0; jos: -20px; fundal: gradient radial(alb 0%, alb 70%, rgba(255,255,255,0) 70%, rgba( 255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; ) .menu-main li (afișare: inline-block;) .menu-main a ( text-decor: niciunul; afișare: bloc inline; marjă: 0 15px; umplutură: 10px 30px; familie de fonturi: „PT Sans Caption”, sans-serif; culoare: #777777; tranziție: .3s liniar; poziție: relativă; ) .meniu -main a:before, .menu-main a:after (conținut: ""; poziție: absolut; sus: calc(50% - 3px); lățime: 6px; înălțime: 6px; chenar-radius: 50%; fundal: #F58262; opacitate: 0; tranziție: .5s ease-in-out; ) .menu-main a:before (stânga: 5px;) .menu-main a:after (dreapta: 5px;) .menu-main a. curent:înainte, .menu-principal a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (opacitate: 1;) .menu-main a.current, .menu-main a:hover (culoare: #F58262; ) @media(max-width:680px) ( .menu-principal li (display: block;) )

    4. Meniul panglică responsive

    @import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .meniu de sus (marja: 0 60px; poziție: relativ; fundal: #5A394E; umbră casetă: inserție 1px 0 0 rgba(255,255,255,.1), inserție -1px 0 0 rgba(255,255,255,.1), inserție 150px 0 150px -150px rgba(255.255.255,.12), insert -150px 0 150px -150px rgba(255.255.255,.12); ); z-index: 2; stânga: 0; lățime: înălțime: 103%; sus-meniu:before (sus: 0; chenar-jos: 1px întrerupt rgba(255,255,255,.2); ) .top-meniu:după ( jos: 0; chenar-sus: 1px întrerupt rgba(255,255,255,.2); ) .menu-main ( list-style: none; padding: 0; margin: 0; text-align: center; ) . menu-main:before, .menu-main:after (conținut: ""; poziție: absolut; lățime: 50px; înălțime: 0; sus: 8px; chenar-sus: 18px solid #5A394E; chenar-jos: 18px solid # 5A394E; transformare: rotire(360deg); z-index: -1; ) .menu-principal: înainte ( stânga: -30px; chenar-stânga: 12px rgba continuu(255, 255, 255, 0); ) .menu- principal:după (dreapta: -30px; chenar-dreapta: 12px rgba solid(2); 55, 255, 255, 0); ) .menu-principal li ( display: inline-block; margin-right: -4px; ) .menu-main a ( text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption", sans-serif; culoare: alb; tranziție: .3s liniar; ) .menu-main a.current, .menu-main a:hover (fond: rgba(0,0,0,.2);) @media (max-width: 680px) ( .top-menu (marja: 0;) .menu-main li ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (conținut: niciunul;) .menu-main a (afișare: bloc;) )

    5. Meniu receptiv cu un logo în mijloc

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .menu-sus (poziție: relativ; fundal: rgba(34,34,34,.2); ) .menu-principal (stil listă: niciunul; margine: 0; umplutură: 0; ) .menu-principal:după ( conținut: „”; afișare: tabel; clar: ambele; ) .left-element (float: stânga;) .right-element (float: right;) .navbar-logo (poziție: absolut; stânga: 50%; sus : 50%; transform: translate(-50%,-50%); ) .menu-main a ( text-decor: niciunul; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; spațiere între litere: 2px; familie de fonturi: „Arimo”, sans-serif; greutate font: bold; culoare: alb; tranziție: .3s liniar; ) .menu-principal a:hover (fond: rgba(0, 0,0,.3);) @media (lățime maximă: 830px) ( .menu-principal ( padding-top: 90px; text-align: center; ) .navbar-logo (poziție: absolut; stânga: 50% ;top: 10px; transform: translateX(-50%); ) .menu-main li ( float: none; display: inline-block; ) .menu-main a ( line-height: normal; padding: 20px 15px; font -size: 16px; ) ) @media (max-width: 630px) ( .menu-main li (display: block;) )

    6. Meniu responsive cu logo în stânga

    @import url("https://fonts.googleapis.com/css?family=Arimo"); .top-meniu ( fundal: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after (conținut: "" ; afișare: tabel; clar: ambele; ) .navbar-logo (afișare: inline-block;) .menu-principal ( list-style: none; margin: 0; padding: 0; float: right; ) .menu-main li (display: inline-block;) .menu-main a ( text-decor: niciunul; display: block; position: relativ; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing : 2px; font-family: "Arimo", sans-serif; font-weight: bold; culoare: #F73E24; transition:.3s linear; ) .menu-main a:before (conținut: ""; lățime: 9px; înălțime: 9px; fundal: #F73E24; poziție: absolut; stânga: 50%; transformare: rotire(45deg) translateX(6,5px); opacitate: 0; tranziție: .3s liniar; ) .menu-main a:hover:before (opacitate: 1;) @media (lățime maximă: 660px) ( .menu-main ( float: niciunul; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:be înainte (transform: rotate(45deg) translateX(-6px);) ) @media (max-width: 600px) ( .menu-principal li (display: block;) )

    Buna ziua!

    Se întâmplă adesea să aveți nevoie să faceți un meniu orizontal care se va întinde pe toată lățimea blocului părinte, indiferent de câte articole conține.

    Astăzi aș dori să vă arăt cum să creați un astfel de meniu.

    Deci meniul nostru va fi următorul:

    Este întins la toată lățimea, când treceți cu mouse-ul este evidențiat. Meniul este rotunjit pe laterale.

    MARKUP HTML

...
Acasă
Vești interesante
Un alt articol de meniu!

Pentru a face meniul cu lățime completă, am folosit tabele cu lățime de 100%. Fiecare masă are div container de elemente de meniu. În funcție de primul, ultimul sau intermediar element de meniu - div-y i se atribuie clasa corespunzătoare.

În fiecare div Containerul are 2 margini laterale cu poziționare absolută care sunt necesare pentru afișarea corectă. Dacă utilizați chenare standard, atunci când schimbați elementele de meniu, textul va sări cu 1-2 pixeli, ceea ce este bine.

Clasă activ este responsabil pentru elementul de meniu selectat și îl evidențiază.

Fiecare articol are o imagine și un text. Pentru ca toate acestea să fie aliniate strict la mijloc pe verticală, folosim o masă. Datorită proprietății de aliniere verticală, elementele noastre de meniu se vor afișa întotdeauna fără probleme și nu se vor îndepărta.

REGULI CSS

Mai întâi, vom seta stiluri pentru afișarea generală a meniului:

Menu_container ( padding-top: 40px; lățime: 100%; înălțime: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: middle; /* vertical alignment */ ) .last_point_menu, .first_point_menu, .middle_point_men lățime: 100%; înălțime: 47px; chenar: 1px solid #dadbda; z-index: 1000; poziție: relativ; margine-stânga: niciunul; ) .inner_table ( lățime: 100%; înălțime: 100%; ) .inner_table td ( padding: 0px; vertical-align: middle; chenar: niciunul; text-align: left; lățime: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( lățime: 40px! important; ) .inner_table_menu ( înălțime: 100%; umplutură: 0px; vertical-align: middle; chenar: niciunul; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: majuscule; line-height: 13px; ) .inner_table_menu td.inner_table_img ( lățime: 30px!important; înălțime: 30px!important; padding-stânga: 15px; )

Pentru frumusețe, rotunjiți colțurile de pe părțile laterale ale meniului:

Meniul_primul_punct( -webkit-border-sus-stânga-rază: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; chenar-sus-stânga-rază: 5px; chenar-jos-stânga-rază: 5px; chenar-dreapta: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-sus-right-radius: 5px; -webkit-border -raza-jos-dreapta: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; chenar-raza-sus-dreapta-raza: 5px; chenar-raza-jos-dreapta: 5px ;)

Acum meniul nostru a căpătat un aspect mai frumos:

Până acum, primul paragraf nu are margine din stânga. O vom repara mai târziu.

Acum să adăugăm efecte de hover în meniu.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (culoare de fundal: #CAE285; background-linear-mo gradient(sus, #CAE285, #9FCB56); imagine de fundal: -webkit-gradient(liniar, 0 0, 0 100%, de la (#CAE285), la (#9FCB56)); imagine de fundal: -webkit-linear -gradient(sus, #CAE285, #9FCB56); imagine de fundal: -o-linear-gradient(sus, #CAE285, #9FCB56); imagine de fundal: linear-gradient (în jos, #CAE285, #9FCB56); chenar: 1px solid #9FCB56; chenar-culoare: #aec671 #9fbb62 #87ac4a; chenar-stânga: niciunul; z-index: 5000; ) /* lucrează chenarele la hover*/ .first_point_menu ( chenar: 1px solid #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( chenar: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( chenar: 1px solid #dadbda; border-left: none:hover)_menu ( chenar: 1px solid #9FCB56; chenar-l ef:niciuna; culoare-chenar: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( chenar-stânga: niciunul; )

Acum meniul nostru arată mult mai frumos, dar deocamdată nu avem chenare pentru elementele de meniu selectate. Hai să o reparăm!

/* stiluri pentru marginile laterale */ .borderLeftSecond, .borderRightSecond ( afișare: niciunul; poziție: absolut; lățime: 1px; înălțime: 47px; culoarea fundalului: #9fbb62; sus: 0px; z-index: 1000; ) /* decalaje absolute pentru chenarele */ .borderLeftSecond ( stânga: 0px; ) .borderRightSecond ( dreapta: -1px; ) /* arată chenarele pentru obiectele active și plasate */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point >_menu .:hoverpoint borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( afișare: bloc; ) /* gestionează cazurile primului și ultimului element activ */ . niciunul; ) .last_point_menu.active .borderRightSecond (afișare: niciunul; ) .last_point_menu:hover .borderLeftSecond (afișare: bloc; )

Asta e tot!

Avem un meniu grozav întins pe toată lățimea blocului părinte! Punctele unul pe celălalt atunci când treceți cu mouse-ul nu trec peste și aspectul nu sare.

Continut Asemanator:

  1. Sistem de supraveghere video quads Control pierderi video
  2. Difuzarea unui flux video de la o cameră IP utilizând WebRTC
  3. Cum să verificați capacitatea de a difuza un flux RTSP de la o cameră IP în diferite browsere web
  4. Cum să alegi un smartphone cu cea mai bună cameră