Pure meniul derulant CSS / HTML

  1. Pure meniul derulant CSS / HTML În acest tutorial vom face un meniu clasic orizontal pe CSS pur....
  2. Animăm meniul orizontal în timp ce indicăm.
  3. Descrieți meniul derulant CSS / HTML

Pure meniul derulant CSS / HTML

În acest tutorial vom face un meniu clasic orizontal pe CSS pur. Are icoane în liste. Când îndreptați un element, modificați fără probleme culoarea butonului și a textului, se adaugă o umbră. Listele derulante pot fi făcute pe mai multe niveluri, iar lucrul principal este foarte simplu implementat pe CSS3 pur.

Continuarea acestei lecții aici - partea 2 VERSIUNE MOBILĂ orizontală “.

Vedeți stiloul POyzbW de Denis ( @Dwstroy ) pe CodePen .

În utilizarea lecției:

  • afișare: flex;
  • utilizarea tranziției;
  • poziționați elementele cu poziția.

Structura meniului orizontal HTML

Mai întâi, scrieți marcajul sub meniul orizontal. Deschidem mediul nostru de dezvoltare în cazul meu, acesta este PhpStorm, creează un fișier index.html, prescrie frameul html: 5, înlocui lang cu ru.

Toate meta vor fi șterse, cu excepția codificării, voi înregistra titlul " meniul Tom ".

Între corpul nostru scrieți eticheta antetului și în el există un bloc cu clasa .dws-meniu care va conține meniul nostru. În continuare, structura va fi după cum urmează, vom crea liste în valoare de cinci bucăți. În fiecare listă va exista o legătură cu atributul href = "#". Apoi voi merge la icoana cu clasa .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav>

Apasam pentru a aplica.

Să notăm numele elementelor de meniu ( Acasă, Produse, Servicii, Știri, Contacte ).

Apoi, selectați și conectați pictogramele. Du-te la site, vom selecta pictogramele pentru aceste elemente de meniu:

<i class = "fa fa- cogs"> </ i> <i class = "fa fa- shopping- cart " </ i> = "fa fa -list "> </ i> <i class = "fa fa -velvelope -open "> </ i>

<i class = fa fa- cogs> </ i> <i class = fa fa- shopping- cart  </ i> = fa fa -list > </ i> <i class = fa fa -velvelope -open > </ i>

Descărcați arhiva de pe site cu pictograme, extrageți conținutul pe computer, copiați folderul fonturilor și folderul css în mediul de dezvoltare.

Dosarul de fonturi conține fonturi pictogramă, iar folderul css conține stilurile acestora. Stilurile comprimate pot fi eliminate font-awesome.min, vom conecta fontul necomprimat-awesome.css.

În index.html conectăm pictograme și înregistrăm fiecare element cu propriul său stil de pictograme ( acasă , coș de cumpărături , zgomote , listă deschisă , plic deschis ).

Am făcut cadrul principal, creăm un submeniu după descrierea stilului principal și acum vom crea un fișier în care vom descrie principalele stiluri ale meniului orizontal style.css și îl vom conecta la index.html. Pentru a verifica dacă stilurile sunt conectate, creați un folder IMG, în care voi plasa o imagine arbitrară pe fundal. Să scriem conexiunea de imagine utilizând fundalul.

corpul {background-image: url ("../ img / ep_naturalwhite.png"); }

După cum vedem, totul a fost afișat și apoi vom trece la descrierea stilurilor.

Mai întâi, să reinițializăm toate rubricile, pe care diferitele browsere le pot seta implicit:

.dws-meniu * {margine: 0; umplutura: 0; }

Setați antetul la 200 de vârfuri. și atribuie pe care le puteți descărca și conecta separat la tine pe site, doar în caz, scrieți fonturi suplimentare.

header {margin: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }

Ascundeți marcatorii din liste:

.dws-meniu ul, .dws-meniu ol {list-style: none; }

Listele vor fi afișate orizontal cu afișaj: in, și o vom face în centru:

.dws-menu> ul {display: flex; justify-content: centru; }

În antetul vom insera numai partea de sus, vom scrie un marginea-sus.

header { margin-top: 200px; font-familie: Cuprum, Arial, Helvetica, sans-serif; }

Să proiectăm meniul nostru, să setăm culoarea butoanelor, fontului etc.

Selectați link-uri nav> ul li, și le faceți bloc elemente. Setați fundalul meniului, scrieți liniuțe, specificați dimensiunea, culoarea, scoateți sublinierea și faceți capetele cu majuscule.

.dws-meniu> ul li a {display: bloc; fundal: #ececed; zăpadă: 15px 30px 15px 40px; font-size: 14px; culoare: # 454547; text-decorare: nici unul; text-transform: majuscule; }

Apoi poziționați pictogramele, asociați listele la poziția: relativă; pentru alinierea ulterioară a icoanelor:

.dws-menu> ul li {poziție: relativă; }

Apoi, selectăm icoanele, poziționăm-le absolut, fă indtația de sus, la 15 vârfuri, din vârfurile 12 stângi, mărim dimensiunea la 18 vârfuri.

.dws-meniu> ul li> a i.fa {poziție: absolută; top: 15px; stânga: 12px; font-size: 18px; }

Atribuiți separatorul sub formă de contur la liste, selectați primul element LI, setați marginea. Se selectează ultimul element LI și se atribuie o margine similară.

.dws-menu> ul li: primul-copil {border-left: 1px solid # b2b3b5; } .dws-meniu> ul li: ultimul-copil {border-right: 1px solid #babbbd; }

Efectuarea delimitatorilor pentru listele LI:

.dws-menu> ul li {poziție: relativă; frontieră-dreapta: 1px solid # c7c8ca; }

Meniul a dobândit aspectul, după care puteți trece la descrierea stilurilor în timpul mutarelor.

Animăm meniul orizontal în timp ce indicăm.

Selectați linkuri și atribuiți o culoare blocului și atribuiți culoarea albă a link-ului în sine cu pictograma. Să adăugăm o altă umbră întunecată. Cu ajutorul tranziției în 0,3 secunde vom face un aspect neted:

.dws-menu li a: hover (fundal: # 454547; culoare: #ffffff; box-shadow: 1px 5px 10px -5px negru; tranziție: toate facilitățile de 0,3s; }

Și pentru a face acest efect să dispară fără probleme, adăugați acest stil la link-ul la ușurință:

.dws-meniu> ul li a {display: bloc; fundal: #ececed; zăpadă: 15px 30px 15px 40px; font-size: 14px; culoare: # 454547; text-decorare: nici unul; text-transform: majuscule; tranziție: toate facilitățile de 0,3s; }

Meniul principal este terminat și puteți trece la descrierea submeniului și a submeniurilor încorporate în ele.

Descrieți meniul derulant CSS / HTML

Despre deschiderea index.html și adăugarea, de exemplu, a unui meniu suplimentar pentru produse. Introduceți UL între listele LI și plasați în el cinci liste, care vor conține legături cu atributul herf = "#".

ul> li * 5> a [href = "#"]

Apăsăm pentru a aplica, scrie numele articolelor ( Îmbrăcăminte, Electronică, Alimente, Instrumente, Viață, Chimie ).

<ul> <li> <a href="#"> Îmbrăcăminte </a> </ li> <li> <a href="#"> Electronică </a> </ li> <li> <a href = "#"> Alimente </a> </ li> <li> <a href="#"> Instrumente </a> </ li> <li> <a href="#"> Viața. chimie </a> </ li> </ ul>

Apoi deschideți style.css și descrieți stilurile submeniului.

Se selectează a doua listă și se atribuie poziția: absolută; , să setăm lățimea minimă la 150 de vârfuri.

/ * submeniul * / .dws-meniu li ul {position: absolute; min-lățime: 150 pixeli; }

Să scriem pe listele de frontieră la un vârf.

.dws-menu li> ul li {graniță: 1px solid # c7c8ca; }

Pentru linkurile din submeniu, vom stabili liniuțe la 10 vârfuri. Eliminați transformarea textului și faceți fundalul câteva fundaluri mai întunecate: # e4e4e5; .

.dws-meniu li> ul li a {padding: 10px; text-transform: nici unul; fundal: # e4e4e5; }

Apoi creați un alt submeniu. Mergeți la fișierul de marcare și, de exemplu, în formularul "Electronice" prin meniul de analogie, așa cum am făcut-o înainte. Descriim rubricile articolelor ( Camere, Calculatoare, Telefoane ) și salvați.

<li> <a href="#"> Electronice </a> <ul> <li> <a href="#"> Camere foto </a> </ li> <li> <a href="#"> Calculatoare </a> </ li> <li> <a href="#"> Telefoane </a> </ li> </ ul> </ li>

Ele au fost scoase, dar ascunse sub meniul principal, acum pozitia: absolut; imbricat UL și mutați-l la vârful 150. în lateral:

.dws-menu li> ul li ul {poziție: absolut; drept: -150px; top: 0; }

Apoi, vom face ca submeniul să apară atunci când vizați elementele principale ale meniului de sus, pentru care adăugăm afișarea: niciuna; și astfel să ascundem toate punctele interne.

/ * submeniul * / .dws-meniu li ul {position: absolute; min-lățime: 150 pixeli; afișare: niciuna; }

Și pentru aspectul lor, vom selecta listele pe hover și le vom afișa cu ajutorul display: block; .

.dws-menu li: hover> ul {afișare: bloc; }

Acum puteți adăuga meniuri pe mai multe niveluri, pur și simplu prin copierea blocului UL, schimbând elementele sale.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Acasă </a> </ li> <li> <a href="#"> < </ a> Produse </ a> <ul> <li> <a href="#"> Îmbrăcăminte </a> <ul> <li> <a href = "#"> Pantofi </a> </ li> <li> <a href="#"> Jachete </a> </ li> <li> <a href="#"> Pantaloni </a> < / li> </ ul> </ li> <li> <a href="#"> Electronice </a> <ul> <li> <a href="#"> Camere foto </a> </ li> <li> <a href="#"> Calculatoare </a> </ li> <li> <a href="#"> Telefoane </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> / ul> </ li> </ ul> </ li> <li> <a href="#"> Mâncare </a> </ li> <li> <a href="#"> Instrumente </ h a> </ li> <li> <a href="#"> Gen. chimie </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> > <li> <a href="#"> Serviciu 1 </a> </ li> <li> <a href="#"> Serviciu 2 </a> </ li> <li> <a href = "</ Li> </ ul> </ li> <li> <a href="#"> <i class =" fa fa-th-list " Noutăți </a> </ li> <li> <a href="#"> <i class = "fa fa-plic-deschis"> </ i>

Apoi, terminați butoanele cu butoanele. Eu folosesc, am creat mai multe presetări, puteți crea propriul dvs., în cazul meu, am copia acest cod și așezați-l în locul de fundal pe care l-am scris anterior.

.dws-meniu> ul li a {display: bloc; / * Permalink - acest gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Browsere vechi * / background: -moz-linear-gradient (top, # c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / fundal: -webkit-gradient liniar (top, # c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / fundal: gradient liniar (la fund, # c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtru: progid: DXImageTransform. / * IE6-9 * / umplutură: 15px 30px 15px 40px; font-size: 14px; culoare: # 454547; text-decorare: nici unul; text-transform: majuscule; tranziție: toate facilitățile de 0,3s; } .dws-menu li a: hover {/ * Permalink - acest gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Browseruri vechi * / background: -moz-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / fundal: -webkit-gradient linear (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / fundal: gradient liniar (la fund, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / culoare: #ffffff; box-shadow: 1px 5px 10px -5px negru; tranziție: toate facilitățile de 0,3s; } dws-meniu> ul li a {display: bloc;  / * Permalink - acest gradient: http://colorzilla

Dacă doriți, acest meniu poate fi proiectat pentru stilul pe care îl considerăm potrivit pentru site-ul dvs., este suficient doar pentru a genera o culoare și a le înlocui în cod. Sa dovedit un meniu simplu și în același timp frumos orizontal, realizat în CSS pur.

Lasă un comentariu: