Meniul
AcasăInternet

Meniu pe html css static orizontal. Cum să faci un meniu drop-down cu CSS și HTML

Salutari! Dacă ești un designer de layout începător, atunci mai devreme sau mai târziu te vei confrunta cu faptul că vrei să-ți însufleți cumva paginile, fă-le măcar puțin interactive. Animațiile CSS vă pot ajuta în cel mai bun mod posibil aici. Dar trebuie să știi unde și cum să le folosești.

Astăzi vă voi arăta cum să faceți un meniu derulant folosind CSS pur și cum să îi adăugați fluiditate folosind animația CSS. Dacă nu știți, atunci este timpul să vă familiarizați cu elementele de bază.

Meniul aspect HTML + CSS

În primul rând, pentru a avea ceva cu care să lucrăm, să creăm un meniu simplu cu un singur nivel. Să nu ne deranjam prea mult cu designul; pentru claritate, acesta va fi suficient:

Ce avem? Cea mai obișnuită listă nenumerată cu identificatorul „top_menu” și cu link-uri împachetate în elementele acestei liste. Totul este banal și simplu. Elementele din meniu își schimbă culoarea când treceți cu mouse-ul peste... știți deja acest lucru și înțelegeți cum să o faceți (sper).

Adăugarea unui meniu de al doilea nivel

Pentru a crea un meniu cu mai multe niveluri, trebuie să adăugăm o a doua listă nenumerată în prima. Cred că ai trecut prin asta undeva în lecțiile inițiale. Și, de asemenea, faptul că trebuie inserat nu doar în lista noastră, ci în interiorul elementului listă, adică eticheta „li”, imediat după eticheta de închidere „a”.

Poziționăm listele imbricate absolut în raport cu „li” în care sunt imbricate. Și poziționăm toate „li”-urile de la nivelul superior în raport cu ( relativ). Pentru ca meniul drop-down să fie localizat Imediat după meniul nostru de nivel superior, acesta (meniul drop-down – „ meniul_interior" trebuie specificat

Poziție: absolută; sus: 100%;

Adică, decalajul față de marginea de sus a părintelui va fi egal cu înălțimea părintelui. Foarte logic, după părerea mea.

Pe lângă poziționare, trebuie să stilați meniul drop-down ca un meniu de nivel superior. Un măr dintr-un măr, cum se spune...

După cum puteți vedea, meniul nostru derulant nu pare încă a fi derulant, ci a fost abandonat și suspendat. Dar e în regulă, vom rezolva asta în curând.

Cum să faci un meniu dropdown într-adevăr dropdown

Nimic nu ar putea fi mai ușor! Pentru a face din lista noastră imbricată un meniu derulant, trebuie doar să o ascundeți! Și apoi deschideți numai când cursorul mouse-ului se deplasează peste elementul de meniu de nivel superior, care conține un meniu drop-down. Poate suna puțin complicat, dar de fapt poate fi rezolvat în doar câteva rânduri de cod.

Adăugați în meniul derulant:

Display: niciunul;

Și pentru a-l afișa, trebuie să scrieți:

#top_menu > li:hover > ul ( display: block; )

Ce ne spun toată această grămadă de selectori? Citim de la final. Setăm stiluri (vizibilitate) pentru lista de al doilea nivel, care se află în interiorul elementului de listă de primul nivel, dar aceste stiluri vor funcționa numai dacă trecem cu mouse-ul peste elementul „li" care conține lista noastră de al doilea nivel.

Sper că m-am clarificat. Dacă nu, încearcă să o citești de câteva ori. Mai bine, înțelegeți doar uitându-vă la cod. Să vedem ce avem:

Da, se pare că am realizat ceea ce ne-am dorit – am făcut un meniu derulant, un meniu derulant adevărat, nenorocitul! Dar îi lipsește ceva. Știi ce? Finete! La urma urmei, totul pare ca și cum meniul nu dispare, ci pur și simplu apare. Și foarte brusc, chiar instantaneu, aș spune.

Ei bine, hai să lucrăm mai multă magie asupra lui.

Meniu derulant neted, ușor

Deci haideți să facem un meniu derulant ușor folosind CSS pur. De ce să faci asta? Pentru că oamenilor le place când totul este neted și moale... și arată frumos. Va fi un plus pentru utilizarea site-ului dvs. Să mergem!

Rețineți că puteți anima doar valori matematice exacte, cum ar fi 50px și 300px, 0 și 100%, 0,5 și 1,0 și așa mai departe. În cazul nostru, nu vom putea anima cele două stări ale meniului nostru vertical ( afisare:niciuna;Și display:bloc;).

Dar le putem înlocui cu transparență - opacitate:0 și opacitate:1. Și setați timpul în care meniul nostru va apărea dintr-o stare transparentă. Da, într-adevăr va funcționa, dar nu este chiar efectul la care te-ai fi așteptat. Deci, să facem totul un pic mai complicat. Dar merită, crede-mă.

Pentru a face animația mai lină și mai previzibilă, a trebuit să setăm o înălțime fixă ​​pentru elementele din meniul derulant, deși ne-am fi putut descurca fără acest lucru. Există o mulțime de metode, doar veniți cu combinații și rezolvați probleme.

După cum puteți vedea din cod, am animat înălțimea elementelor listei derulante și transparența acestora. Acest lucru a fost suficient pentru a crea o animație frumoasă și netedă a meniului derulant.

De ce ne trebuia pentru animație? Două stări ale elementelor noastre de meniu, precum și proprietatea de tranziție, care au interpolat aceste stări, adică au umplut toate valorile intermediare în perioada de timp alocată. Asta e tot!

Ar putea fi chiar mai ușor să faceți acest lucru folosind jQuery, dar am declarat mai întâi că vom lucra cu CSS pur astăzi. L-ați putea face și mai frumos adăugând curbe Bezier la animații, dar acest subiect este puțin dincolo de sfera de azi. Dar cu siguranță vom reveni la el mai târziu.

Concluzie:

Acum puteți arăta prietenilor și familiei dvs. că știți cum să faceți un meniu drop-down în CSS pur. Aceasta este o abilitate cu adevărat utilă, care va fi utilă de mai multe ori. Ei bine, judecă singur, câte site-uri ai văzut cu un meniu static? Nu, majoritatea site-urilor au un meniu derulant.

Apropo, aceasta a fost prima mea lecție de CSS. Descrie cum iti place? Ai explicat totul clar sau trebuie să explici mai detaliat? Și chiar merită să continui să scrii articole pe tema life hack-urilor în CSS?

Vă mulțumim pentru atenție și ne vedem curând!

Ai citit până la capăt?

A fost de ajutor articolul?

Nu chiar

Ce anume nu ți-a plăcut? A fost articolul incomplet sau fals?
Scrieți în comentarii și promitem să ne îmbunătățim!

Bună ziua, dragi cititori ai blogului meu! Articolul de astăzi va fi foarte util pentru designerii de layout începători. Pentru că astăzi vom crea 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, cu ce am avut de-a face în etapa inițială de a mă stabili ca un layout designer, 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 cariera de layout designer. Și personal, de îndată ce am început să studiez aspectul, cele mai multe întrebări au apărut despre aspectul diverselor 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. Deci, să începem!

Să începem aranjarea meniului nostru orizontal!

După cum probabil ați ghicit, primul lucru pe care trebuie să-l facem este să creăm o pagină HTML cu marcaj standard și să conectați un fișier de stil la ea. Nu mă voi opri în detaliu asupra acestui pas, deoarece încă sper că nu sunteți atât de începător încât să vă spun în detaliu ce sunt corpul și capul și cum sunt conectate 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. Acesta este de fapt cum arată cea mai simplă resetare a mea:

Nu vom spune încă nimic în detaliu despre resetarea stilurilor, deoarece, în esență, acesta este un subiect pentru alt articol. Singurul lucru pe care trebuie să-l știți despre codul descris mai sus este că, datorită acestui cod, toate elementele de pagină pe care le vom scrie vor au marjă și indentări resetate la zero.padding, acest lucru trebuie făcut 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:

Meniu orizontal

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

Următorul pas este crearea de markup html pentru meniul nostru.

Se creează un marcaj pentru meniu

În marcajul nostru vom folosi noua etichetă care a apărut în HTML5, am decis să vă obișnuiesc imediat cu noile etichete pentru a urma tendința și standardul, ca să spunem așa. În ciuda faptului că noile etichete HTML 5 nu sunt acceptate de browsere mai vechi, recomand în continuare să le folosiți în aspectul dvs., deoarece mai devreme sau mai târziu va trebui să treceți la ele, la fel cum designerii de aspect au trecut la un moment dat de la aspectul tabelar la aspectul bloc, aceasta este realitatea, este mai bine să urmați trendul!

Și deoarece vorbim deja despre suportarea noilor etichete html 5, astfel încât să nu avem probleme cu acest lucru în browserele mai vechi, trebuie să includem o bibliotecă specială în documentul nostru - html5shiv. Acest lucru se face prin introducerea în
secțiunea de cap a paginii dvs. cu următorul cod:

Toate etichetele de după aceasta (și alte etichete legate de HTML5) vor fi percepute în mod normal de browserele mai vechi.

Să revenim direct la marcajul nostru. Apoi, trebuie să inserăm o listă cu marcatori în eticheta noastră, pentru mine arată astfel:

  • Acasă
  • Despre noi
  • Portofoliu
  • Blog
  • Contacte

Așadar, se pare că am terminat cu marcajul, este timpul să începem să scriem stiluri, deoarece acum meniul nostru nu arată foarte bine, ca să spunem ușor:

Stiluri de scriere pentru meniul nostru orizontal

Și astfel, primul lucru pe care trebuie să-l facem atunci când amenajăm meniul este să eliminam marcatorii de listă, evident că nu avem nevoie de ei, o facem astfel:

Ul( stil-listă:niciuna; )

După aceasta, meniul nostru va arăta astfel:

Nu prea îmi place cum meniul nostru este lipit de marginile browserului, să reparăm asta:

Cu acest cod, am stabilit lățimea meniului, i-am dat margini de sus și de jos de 50 px și l-am poziționat în centru. Cine știe, dacă un element bloc are o lățime, atunci pentru a poziționa acest element strict în centru trebuie doar să-i dăm o marjă externă (marjă) la dreapta și la stânga cu valoarea auto.

Următorul pas este să facem în sfârșit meniul nostru orizontal; acest lucru se face prin setarea elementelor

  • plutește la stânga

    Meniu li( float:left; )

    Întregul nostru meniu a devenit acum orizontal.

    Dacă nu înțelegeți ce s-a întâmplat exact și ce face proprietatea float, vă recomand să căutați pe google informații despre această proprietate și să o studiați cu atenție, deoarece
    Nici o singură pagină de aspect nu poate face fără ea, vă pot spune cu siguranță. Ei bine, hai să continuăm!

    Meniu li a( display:block;/* Faceți din link un element de bloc*/ padding:12px 20px;/* Setați umplutura */ text-decoration: none; /* eliminați sublinierea */ color:#fff;/* setați legăturile de culoare alb */ background:#444;/* faceți culoarea de fundal întunecată */ font:14px Verdana, sans-serif;/* setați dimensiunea și numele fontului */ )

    Una dintre cele mai importante reguli aici este display:block;. Faptul este că, implicit, legăturile sunt elemente inline, iar indentările sunt aplicate diferit elementelor inline din diferite browsere, așa că este recomandabil să faceți din link un element bloc și abia apoi să îi aplicați proprietățile asociate cu indentările externe sau interne. Acum nu vreau să vă împovărez cu informații inutile; în timp, folosind exemple reale, veți înțelege de ce se pune un astfel de accent aici.

    Să vedem ce avem, reîmprospătează pagina browserului și gata!:

    După cum puteți vedea, nu arată rău, putem spune că, în principiu, meniul nostru este gata. Singurul lucru care mai trebuie făcut este să setați lumina linkurilor atunci când treceți cu mouse-ul și mi se pare că meniul va arăta mai bine cu separatoare între elemente.

    Să începem cu delimitatorii:

    Meniu li( chenar-stânga:1px solid #666; ) .meniu li:primul-copil( chenar-stânga:niciuna; )

    Ce am făcut aici? Da, totul este foarte simplu, ne-am stabilit punctele (

  • ) marginea stângă de 1px dimensiune și culoare #666;. În ceea ce privește selectorul .menu li:first-child, aici folosim o pseudo-clasă specială care ne permite să selectăm primul element copil al listei. De asemenea, vă recomand să citiți despre pseudo-clase mai detaliat pe Internet, veți învăța o mulțime de lucruri utile.

    Să vedem din nou ce avem:

    După părerea mea, e mult mai bine cu delimitatorii.

    Meniu li a:hover( background:#888; )

    Din nou, folosind o pseudo-clasă specială, de data aceasta trecem cu mouse-ul, setăm culoarea link-ului când trecem cu mouse-ul peste el, uite:

    Cred că e tare :) Sper să ajungi cu același meniu ca al meu.

    Aici voi încheia această lecție, sper cu adevărat că v-a fost de folos și acum știți cum să dispuneți un meniu orizontal simplu folosind html și css pur. Desigur, am creat un meniu cu un singur nivel; va fi puțin mai complicat cu un meniu cu două niveluri (cu o listă imbricată), dar acesta este un subiect pentru o altă lecție, asta este tot pentru mine. Hai din nou, ma voi bucura!!!

    O zi bună tuturor celor care citesc acum această publicație. Astăzi vreau să vă povestesc despre unul dintre instrumentele de creare a site-urilor web de care nicio resursă web nu se poate descurca. Acesta este meniul site-ului sau cum se spune și harta site-ului. Astăzi există un număr nelimitat de tipuri și subtipuri de meniuri.

    Dezvoltatorii de magazine online, bloguri, servicii educaționale și alte resurse experimentează și creează din ce în ce mai multe hărți noi și neobișnuite. După ce ați citit articolul, veți afla în ce grupuri principale sunt împărțite toate tipurile de panouri de navigare, veți putea încerca fiecare dintre ele și, de asemenea, veți afla cum să scrieți codul de meniu pentru un site web html. Acum să trecem la treabă!

    Instrumente pentru crearea unei bare de navigare

    Există mai multe moduri de a crea un meniu în limbaj de marcare. Conceptul lor de bază este utilizarea unei liste nenumerotate. Astfel, în html 4, care ne este familiar, dezvoltatorii scriu etichete pe pagină

      Și
    • .

      După cum sa menționat în publicațiile anterioare, elementul pereche

        creează o listă cu marcatori și
      • - un element al listei. Pentru claritate, să scriem codul pentru un meniu simplu:

        Navigare

        Navigare pe site

        • Acasă
        • Știrile săptămânii
        • Progrese tehnologice
        • conversație

        Cu toate acestea, odată cu apariția platformei, limbajul de marcare a fost completat cu etichete suplimentare. Acesta este motivul pentru care meniul site-urilor web moderne este creat folosind o etichetă specială< menu>. În uz, acest element nu este diferit de listele cu marcatori.

        În loc de unul< ul>este prescris< menu>. Cu toate acestea, diferențe semnificative apar atunci când sunt judecate din partea muncii. Deci, al doilea exemplu accelerează munca programelor de căutare și a roboților în . Când analizează structura site-ului, ei înțeleg imediat că această bucată de cod este responsabilă pentru harta site-ului.

        Există meniuri orizontale, verticale și derulante. Uneori, bara de navigare este concepută ca o imagine. Deoarece segmentul de tehnologie s-a extins, serviciile web sunt adaptate, de exemplu. Structura paginii se adaptează automat la dimensiunea ecranului dispozitivului. Să ne uităm la grupurile de meniuri enumerate.

        Să creăm un model de navigare orizontală

        Acest tip de navigare este cel mai popular. Când panoul este proiectat orizontal, toate elementele de meniu sunt situate în antetul paginii sau în „subsol” (uneori elementele de navigare sunt duplicate, apărând simultan atât în ​​partea de sus, cât și în partea de jos).

        De exemplu, vom crea un panou orizontal, ale cărui elemente de meniu vor fi proiectate folosind CSS (cascading style sheets), sau mai degrabă transformate. Deci, fiecare element individual va fi amplasat într-un dreptunghi teșit. Intrigat?

        Pentru transformare folosim o proprietate css numită transform . Pentru a specifica transformarea, este utilizată funcția skewX încorporată, care specifică unghiul de oblicare în grade.

        Din păcate, fiecare browser funcționează cu această proprietate în felul său, în ciuda standardelor prescrise. Prin urmare, au fost create prefixe speciale pentru a indica acest lucru:

        • -ms- (Internet Explorer)
        • -o- (Operă)
        • -webkit- (Chrome, Safari)
        • -moz- (Firefox)

        Acum să aplicăm cunoștințele dobândite pentru a scrie un exemplu.

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Panou orizontal
      • Acasă
      • Despre companie
      • Produse
      • Contacte
        		•

        Panou orizontal li ( afișaj: bloc inline; margine-dreapta: 6px; fundal: #FF8C00; transformare: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); ) a ( afișare: bloc; umplutură: 18px 35px; culoare: #fff; transform: skewX(40deg); -webkit- transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); ) li:hover ( fundal: #1C1C1C; )

      • Acasă
      • Despre companie
      • Produse
      • Contacte

        • Și acum pe verticală. Am spus vertical!

        Pentru al doilea program folosim codul anterior ca bază. Am vrut ca elementele mele verticale din meniu să aibă colțuri rotunjite, mai degrabă decât teșite.

        Pentru a face acest lucru, am folosit o altă proprietate css border-radius.

        În articolele anterioare am lucrat deja cu acest parametru, așa că nu cred că vor fi dificultăți în înțelegerea funcționării acestuia.

        Panou vertical li( afișaj: bloc; margine: 13px; umplutură: 13px; fundal: #FF8C00; lățime:20%; text-align:center; font-size:20px; border-radius:10px; ) a (culoare: # fff; ) li:hover ( fundal: #1C1C1C; )

      • Acasă
      • Despre companie
      • Produse
      • Contacte

        • După cum ați observat deja, principala modificare a acestui cod este absența afișajului: declarația inline-block, care a fost de fapt responsabilă pentru aranjarea orizontală a elementelor de navigare.

        Sub-articole din meniu: listă derulantă

        Ne-am uitat la principalele grupuri de panouri de navigare, dar există mai multe varietăți sau, mai bine, suplimente.

        Uneori apar situații când unele dintre puncte le completează pe cele principale. În acest caz, nu puteți face fără liste derulante. Ele sunt create prin transformări folosind instrumente CSS.

        Mai jos am atașat codul unui mic program care implementează această abordare.

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Corpul listei derulante ( padding-stânga: 30%; dimensiunea fontului: 18px; ) .m-meniu (marja: 0; padding: 9px; lățime: 50%; text-align:center; chenar: 3px solid #000; fundal : #FF8C00; ) .m-meniu > li ( poziție: relativă; afișare: bloc inline; ) .m-meniu a ( afișare: bloc; margine-stânga: -2px; umplutură: 13px; culoare: #fff; chenar -stânga: 3px solid #fff; ) .m-meniu a:hover ( fundal: #1C1C1C; ) .m-meniu .s-meniu ( stânga: 10px; poziție: absolut; afișare: niciunul; lățime: 155px; margine: 0; umplutură: 0; stil listă: niciunul; fundal: #FF8C00; ) .m-meniu .s-meniu a ( chenar: 1px solid #000; ) .m-meniu >
        • Acasă
        • Produse
          • Bomboane
          • prăjituri
          • Cookie
        • Contacte

        Corpul listei derulante ( padding-stânga: 30%; dimensiunea fontului: 18px; ) .m-meniu (marja: 0; padding: 9px; lățime: 50%; text-align:center; chenar: 3px solid #000; fundal : #FF8C00; ) .m-meniu > li ( poziție: relativă; afișare: bloc inline; ) .m-meniu a ( afișare: bloc; margine-stânga: -2px; umplutură: 13px; culoare: #fff; chenar -stânga: 3px solid #fff; ) .m-meniu a:hover ( fundal: #1C1C1C; ) .m-meniu .s-meniu ( stânga: 10px; poziție: absolut; afișare: niciunul; lățime: 155px; margine: 0; umplutură: 0; stil listă: niciunul; fundal: #FF8C00; ) .m-menu .s-meniu a (chenar: 1px solid #000; ) .m-meniu > li:hover .s-meniu ( afișare : bloc; )

        • Acasă
        • Produse
          • Bomboane
          • prăjituri
          • Cookie
        • Contacte

        Salutare dragi vizitatori ai blogului meu! Astăzi vom vorbi despre meniul principal orizontal al site-ului, și anume cum să aliniați meniul orizontal în centru. Da, la prima vedere, ce este atât de complicat - am setat indentările necesare, le-am ajustat și gata. Dar există câteva nuanțe aici. Un site, în primul rând, este dinamic, adică. Conținut nou apare constant pe site, apar noi blocuri de informații etc. Așa pot apărea/dispără unele elemente în meniul principal. Ținând cont de toate acestea, trebuie să ne asigurăm că atunci când adăugăm sau eliminăm un element de meniu, meniul rămâne în centru. Desigur, nu este întotdeauna necesar să-l centrați, totul depinde de design. Dar dacă totuși intenționați să plasați meniul orizontal în centru, atunci folosind câteva trucuri simple în CSS putem obține rezultatul dorit.

        Structura articolului

        Meniu orizontal în centru fără elemente derulante

        Mai întâi, să ne uităm la exemplul unui meniu orizontal care nu are elemente derulante.

        cod HTML
        • Paragraful 1
        • Punctul 2
        • Punctul 3
        • Punctul 4
        • Punctul 5
        Cod Css *, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms - box-sizing: border-box; box-sizing: border-box; margine: 0; padding: 0; ) #mainmeniu ( fundal: #444; poziție: relativ; overflow: ascuns; înălțime: 40px; margine: 30px 0 ) #mainmenu ul ( list-style: none; margin: 0; padding: 0; position: relativ; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px ) #mainmenu ul li ( poziție: relativă; stânga: -50%; float: stânga; margine: 0 10px; înălțime: 40px ) #mainmenu ul li a ( culoare: #fff; afișaj: bloc; text-decor: niciunul; padding: 0 15px ; line-height: 40px; ) #mainmenu ul li a:hover ( background-color: #666; )

        Să privim totul în ordine, totul este simplu aici. Creăm un container „mainmeniu” în care plasăm meniul nostru sub forma unei liste neordonate.

        Acum se reduce la stilurile CSS. Mai întâi resetăm toate marjele și umplutura la zero pentru toate browserele. Apoi, folosind proprietatea „float:left”, ne deplasăm lista neordonată la stânga și apoi, folosind poziționarea relativă, o deplasăm cu 50% la dreapta. Lățimea listei „ul” va fi egală cu suma lungimilor tuturor elementelor „li” care se află în interiorul acesteia. Astfel, dacă împărțim mental fereastra browserului în jumătate, meniul nostru se va muta în dreapta liniei de separare. Pentru aliniere, vom aplica și poziționarea relativă elementelor „li” și le vom muta la stânga cu 50%, specificând proprietatea „left:-50%”. Și, de asemenea, aproape am uitat, containerul nostru „mainmeniu” trebuie să specifice proprietatea „overflow:hidden”, altfel vom obține o bară de defilare orizontală.

        Asta e, acum meniul nostru este aliniat la centru. Acum puteți adăuga sau scădea puncte, acest lucru nu va afecta poziționarea. De asemenea, puteți utiliza acest meniu pe site-urile dvs. web prin simpla schimbare a stilurilor pentru a se potrivi cu designul dvs.

        Meniu orizontal în centru cu elemente derulante

        Acum să ne uităm la sub-articolele derulante. Aici situația este oarecum diferită și oarecum mai complicată, pentru că în primul caz, sub-articolele noastre nu vor apărea, deoarece am specificat proprietatea „overflow: hidden” în blocul „mainmenu”. Aceasta înseamnă că elementele din afara acestui bloc nu vor fi afișate. Dar există o cale de ieșire.

        Deci, am modificat codul anterior și am eliminat proprietatea „overflow:hidden” din el.

        cod HTML
        • Paragraful 1
          • subclauza 1.1
            • subclauza 1.1.1
            • subclauza 1.1.2
            • subclauza 1.1.3
          • subclauza 1.2
            • subclauza 1.2.1
            • subclauza 1.2.2
            • subclauza 1.2.3
          • subclauza 1.3
          • subclauza 1.4
          • subclauza 1.5
        • Punctul 2
          • subclauza 2.1
          • subclauza 2.2
          • subclauza 2.3
            • subclauza 2.3.1
            • subclauza 2.3.2
            • subclauza 2.3.3
          • subclauza 2.4
          • Sub-articol lung, sub-articol lung
        • Elementul de meniu lung 3
          • subclauza 3.1
          • subclauza 3.2
          • subclauza 3.3
          • subclauza 3.4
          • subclauza 3.5
        • Punctul 4
          • subclauza 4.1
          • subclauza 4.2
          • subclauza 4.3
          • subclauza 4.4
          • subclauza 4.5
        • Punctul 5
          • subclauza 5.1
          • subclauza 5.2
          • subclauza 5.3
          • subclauza 5.4
          • subclauza 5.5
        Cod CSS *, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms - box-sizing: border-box; box-sizing: border-box; margine: 0; padding: 0; ) #mainmeniu (poziție: relativă; fundal: #444444; înălțime: 40px; margine: 30px 0; padding: 0 ; float: stânga; lățime: 100%; z-index: 10 ) #mainmenu ul ( clar: stânga; poziție: relativ; dreapta: 50%; înălțime: 40px; float: dreapta; text-align: center; font: 15px Arial , Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 ) /** Puncte principale **/ #mainmenu > ul > li ( poziție: relativă; stânga: 50%; float: stânga; înălțime : 40px; padding: 0; margin: 0 ) #mainmeniu > ul > li > a ( chenar-stânga: 1px solid #666; afișare: bloc; culoare: #fff; text-decor: niciunul; padding: 0 20px; linie -height: 40px; ) #mainmenu > ul > li:first-child > a ( chenar: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( culoare: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Subiteme drop-down * / #mainmenu ul li ul ( poziție: absolut; stânga: 0; sus: 40px; afișaj: niciunul; stil-listă: niciunul; vizibilitate: ascuns; umplutură: 0; marja: 0; lățime: 200px ) #mainmenu > ul > li ul li ( culoare de fundal: #666; poziție: relativ; stânga: 0; afișare: element-listă; float: niciunul; înălțime: automat; margine: 0; text-align: stânga; ) #mainmenu ul li ul li a ( bordur-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( poziție: relativ; ) #mainmenu ul li ul > li.parent > a::before ( chenar-sus: 1px solid #fff; chenar-dreapta: 1px solid #fff; conținut: ""; afișare: bloc; poziție: absolut; dreapta: 15px; sus: 50%; transformare: translateY(-50%) rotire(45deg); înălțime: 6px; lățime: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Elemente derulante de nivelul doi */ #mainmenu ul li:hover > ul ( opacitate: 1; vizibilitate: vizibil; margine: 0; ) #mainmenu ul li ul li ul ( sus: 0; stânga: 200px; margine: 0 0 0 20px; lățime: 180px )

        Acum meniul nostru este plasat în centru și sub-articole apar când treceți cu mouse-ul peste el.

        Centrarea meniurilor cu flexbox

        De asemenea, puteți centra meniul aplicând o nouă regulă în css - flexbox. În general, vreau să dedic o postare separată trucurilor cu flexbox, merită, simplifică foarte mult viața unui designer de layout. În general, nu vom merge mai adânc aici... Voi furniza doar codul css pentru meniul cu elemente derulante aici. Codul HTML este același ca mai sus.

        Cod CSS *, *::după, *::înainte ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms- box-sizing: border-box; box-sizing: border-box; margine: 0; padding: 0; ) #mainmeniu (poziție: relativă; fundal: #444444; înălțime: 40px; margine: 30px 0; padding: 0; lățime: 100%; z-index: 10 ) #mainmenu ul ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: orizontal; - webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; inaltime: 40px; text-align: center; font: 15px Arial, Helvetica, sans -serif; stil-listă: niciunul; umplutură: 0; margine: 0; -webkit-box-pack: centru; -webkit-justify-content: centru; -ms-flex-pack: centru; justify-content: centru; ) /** Puncte principale **/ #mainmenu > ul > li ( poziție: relativă; înălțime: 40px; padding: 0; margin: 0 ) #mainmenu > ul > li > a ( chenar-stânga: 1px solid #666; afișaj: bloc; culoare: #fff; text-decor: niciuna; umplutură: 0 20px; înălțimea liniei: 40px; ) #mainmenu > ul > li:first-child > a ( chenar: none ) #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a ( culoare: #fff ) #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active ( background: #666 ) /* Sub-articole drop-down */ #mainmenu ul li ul ( poziție: absolut; stânga: 0; sus: 40px; afișare: niciunul; stil listă: niciunul; vizibilitate: ascuns; padding: 0; margine: 0; lățime: 200px ) #mainmenu > ul > li ul li (culoare de fundal: #666; poziție: relativă; stânga: 0; afișare: element-listă; float: niciunul; înălțime: automat; margine: 0; text-align: stânga; ) #mainmenu ul li ul li a ( chenar -bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; ) #mainmenu ul li ul li.parent a ( position: relative; ) #mainmenu ul li ul > li.parent > a::before ( chenar-sus: 1px solid #fff; chenar-dreapta: 1px solid #fff; conținut: ""; afișare: bloc; poziție: absolut; dreapta: 15px; sus: 50%; transformare : translateY(- 50%) rotire(45deg); înălțime: 6px; latime: 6px; ) #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover ( background-color: #444 ) #mainmenu ul li:hover ul, #mainmenu ul li.hover ul ( display: block ) /* Drop- elemente în jos al doilea nivel */ #mainmenu ul li:hover > ul ( opacitate: 1; vizibilitate: vizibil; margine: 0; ) #mainmenu ul li ul li ul ( sus: 0; stânga: 200px; margine: 0 0 0 20px ; latime: 180px)

        După cum puteți vedea, regulile s-au schimbat doar pentru lista de părinți - #mainmenu ul. Singurul lucru a fost că a trebuit să adăugăm prefixe pentru versiunile anterioare ale browserelor. Observ că numai browserele moderne înțeleg corect regula flexbox. Dacă vizați browsere mai vechi, atunci opțiunea flexibilă va trebui amânată. Puteți vedea ce browsere înțeleg bine flexbox

        Sarcină

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

        Orez. 1. Vizualizare meniu cu elemente înclinate

        Soluţie

        Transformarea proprietății de stil este responsabilă pentru transformarea elementului; funcția skewX este folosită ca valoare, care stabilește panta dorită. Este mai ușor să setați unghiul de înclinare în grade, de exemplu, 30 de grade este 30 de grade față de verticală. Transformarea afectează și toate elementele copil, astfel încât textul din interiorul elementului va fi și înclinat, ceea ce nu are cel mai bun efect asupra lizibilității și frumuseții sale. Prin urmare, este important să aplicați din nou înclinarea textului, dar în cealaltă direcție; pentru a face acest lucru, pur și simplu schimbați semnul în fața valorii gradelor.

        Browserele acceptă proprietatea de transformare în principal cu propriile prefixe, așa că pentru universalitate în stiluri 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

        Meniu li ( display: inline-block; /* Elemente de bloc inline */ fundal: #CA181A; /* Culoare de fundal */ margin-right: 3px; /* Distanța dintre elementele de meniu */ -webkit-transform: skewX(- 30deg) ); /* Pentru Safari și Chrome */ -moz-transform: skewX(-30deg); /* Pentru Firefox */ -o-transform: skewX(-30deg); /* Pentru Opera */ -ms-transform: skewX (-30deg); /* Pentru IE */ transform: skewX(-30deg); /* CSS3 */ ) a (culoare: #fff; /* Culoare link */ afișare: bloc; /* Element bloc */ padding: 5px 15px; /* Margini din jurul textului */ text-decoration: none; /* Eliminați sublinierea */ -webkit-transform: skewX(30deg); /* Pentru Safari și Chrome */ -moz-transform: skewX(30deg) ; /* Pentru Firefox */ -o-transform: skewX(30deg); /* Pentru Opera */ -ms-transform: skewX(30deg); /* Pentru IE */ transform: skewX(30deg); /* CSS3 * / ) li:hover ( fundal: #333; /* Culoare de fundal când treceți cu mouse-ul */ )

        • Joker
        • Pazuzu
        • Palpatine
        • Doctor Doom

        În acest exemplu, un meniu orizontal este creat folosind o listă cu marcatori. Pentru a vă asigura că lista este orizontală, la elementul li din stiluri este adăugată o proprietate de afișare cu valoarea inline-block. Pentru skew, utilizați proprietatea transform cu funcția skewX și valoarea -30º. Această proprietate se aplică și link-urilor din interiorul listei, dar cu o valoare pozitivă de 30º, aceasta asigură că literele sunt afișate corect și nu înclinate.

        Browserele Chrome, Safari și Firefox utilizează proprietatea de transformare pe elementele bloc sau inline, astfel încât linkurile au proprietatea de afișare setată la blocare .