În această postare, vom face un meniu de informații laterale fixe. Pentru a implementa pictogramele, vom conecta fontul .

Pasul 1. Conectați fontul cu pictograme, creați un document gol

Puteți găsi informații detaliate despre lucrul cu fontul FontAwesome și un link către proiectul în sine în postarea mea -.

Iată codul paginii cu fișierele conectate:

Pasul 2: Adăugarea meniului fix HTML Markup

Iată codul de marcare pentru meniul nostru fix:

După cum ați observat, am aplicat eticheta

Pasul 3. Adăugarea submeniului HTML Markup

• Textul linkului dvs
• Textul linkului dvs
• Textul linkului dvs

Submeniul este aceeași listă ca și meniul principal, plus eticheta , care afișează pictograma „căruță din stânga”, îndeplinește funcția unei anumite „coade”, mai multe detalii în poza de mai jos 🙂

De asemenea, acest element conectează golul dintre blocul de meniu și submeniu, permițându-ne astfel să implementăm caracteristica de tranziție.

Pasul 4 Stilarea barei laterale fixe

Am încercat să comentez codul de stil în locurile în care contează. În general, toate punctele necomentate se referă la stilul banal al fundalului, culoarea etc.

#sidebar-menu ( poziție: fix; /* fixează meniul nostru */ sus: 200px; /* poziția meniului față de partea de sus a browserului */ stânga: 0; /* lipiți meniul în marginea din stânga */ padding: 10px; fundal: # 323A45; culoare: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( poziție: relativ; cursor: pointer; ) #sidebar-menu li i ( /* Setați pictogramele la o dimensiune fixă, înălțimea și înălțimea liniei ar trebui să fie aceleași */ lățime: 27px; înălțime: 27px; înălțime linie: 27px; raza chenar: 4px; fundal: #3CB7E7; text-align: center; ) # sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( afișare: niciunul; poziție: absolut; /* poziția relativ la stânga este egală cu lățimea elementului li */ stânga: 27px; sus: 0; înălțime: 27px; /* lățimea este egală cu decalajul dintre meniul bloc și submeniu */ lățime: 16px; înălțimea liniei: 27px; fundal: transparent; culoare: #323A45; /* poziționează pictograma însăși la dreapta, astfel încât să arate vizual împreună cu blocul submeniului */ text-align: right; ) #sidebar -menu li > ul ( display: none; poziție: absolută; sus: -10px; stânga: 42px; lățime: 120px umplutură: 10px fundal: #323A45; chenar-rază: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (afișare: bloc;) #sidebar-meniu li a ( afișare: bloc; padding: 4px 8px; chenar-radius: 4px; culoare: #FFF ; -webkit-transition: toate .2s; -moz-transition: toate .2s; -ms-transition: toate .2s; -o-transition: toate .2s; tranziție: toate .2s; ) #sidebar-menu li a :hover (afișare: bloc; fundal: #3CB7E7; )

Dacă aveți întrebări despre styling, scrieți în comentarii la această postare, vă voi răspunde cu plăcere.
Asta e tot! Meniu lateral fix Terminat 🙂

În acest tutorial, vom realiza un meniu orizontal clasic în CSS pur. Are pictograme în liste. Când treceți cu mouse-ul peste un articol, acesta schimbă ușor culoarea butonului și a textului și adaugă o umbră. Listele drop-down pot fi realizate pe mai multe niveluri și, cel mai important, toate acestea sunt implementate pur și simplu în CSS3 pur.

În lecție vom folosi:

• display:flex;
• tranziție de utilizare;
• vom poziționa elementele folosind poziția .

Structura HTML a meniului orizontal

În primul rând, să scriem marcajul pentru meniul orizontal. Deschidem mediul nostru de dezvoltare în cazul meu este PhpStorm, creăm un fișier index.html, scriem cadrul html:5, înlocuim lang cu ru .

Voi șterge toate meta, cu excepția codificării, îmi voi scrie titlul " meniul tom».

Între corp scriem eticheta de antet, iar în el se află un bloc cu clasa .dws-menu în care va fi amplasat meniul nostru. Mai departe, structura va fi după cum urmează, vom crea liste în număr de cinci piese. Fiecare listă va avea un link cu atributul href="#". Apoi va fi o pictogramă I cu clasa .fa .fa-

Faceți clic pe aplicați.

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

Apoi, selectați și conectați pictogramele. Mergem pe site-ul web Font Awesome, selectăm pictograme pentru aceste elemente de meniu:

Descărcăm arhiva de pe site cu pictograme, extragem conținutul acesteia pe computer, copiem folderul fonturi și folderul css în mediul nostru de dezvoltare.

Dosarul fonturi conține fonturi de pictograme, iar folderul css conține stilurile acestora. Stilurile comprimate pot fi eliminate de font-awesome.min , inclusiv font-awesome.css necomprimat.

În index.html conectăm pictograme și prescriem fiecărui articol propriul stil de pictogramă ( Acasă, cărucior de cumpărături, roţi dinţate, lista-a, plicul-deschis).

Am realizat cadrul principal, vom forma submeniul după ce am descris stilul principal, iar acum vom crea un fișier în care vom descrie stilurile principale ale meniului orizontal style.css și îl vom conecta la index.html . Pentru a verifica dacă stilurile sunt conectate, voi crea un folder img , voi plasa o imagine arbitrară pe fundal în el. Să scriem conexiunea imaginii folosind fundal.

Corp (imagine de fundal: url("../img/ep_naturalwhite.png"); )

Descrierea stilurilor CSS pentru meniul orizontal

În primul rând, să resetam toate indentările pe care diferitele browsere le pot seta în mod implicit:

Dws-meniu *( marja: 0; umplutură: 0; )

Să setăm antetul la 200 de pică. și atribuiți fontul Cuprum, care poate fi descărcat și conectat separat la site-ul dvs., pentru orice eventualitate, vom scrie fonturi suplimentare.

Antet (marja: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; )

Să ascundem marcatorii din liste:

dws-menu ul, .dws-menu ol( list-style: none; )

Să afișăm listele pe orizontală cu afișaj: flax și să le concentrăm:

Dws-meniu > ul( afișare: flex; justificare-conținut: centru; )

În antet, să indentăm numai de sus, scrie margin-top .

Antet( margine-top: 200px; familie de fonturi: Cuprum, Arial, Helvetica, sans-serif; )

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

Dws-meniu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:majuscule; )

Apoi poziționăm pictogramele, atribuim listelor poziția: relativă; pentru a centra mai mult pictogramele:

dws-menu > ul li( poziție: relativă; )

dws-menu > ul li > a i.fa( poziție: absolut; sus: 15px; stânga: 12px; dimensiunea fontului: 18px; )

Să atribuim listelor un separator de chenar, să selectăm primul element LI și să setăm chenarul. Selectăm ultimul element LI și îi atribuim un chenar similar.

Dws-menu > ul li:first-child( chenar-stânga: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( chenar-dreapta: 1px solid #babbbd; )

Realizarea separatorilor pentru liste LI:

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

Meniul a dobândit aspectul, apoi puteți începe să descrieți stiluri la hover.

Animați meniul orizontal la trecerea cursorului

Dws-meniu li a:hover( fundal: #454547; culoare: #ffffff; box-shadow: 1px 5px 10px -5px negru; tranziție: toate 0,3s ease; )

Și pentru ca acest efect să dispară fără probleme, adăugați acest stil la link-ul în repaus:

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:majuscule; tranziție: toate 0.3s ușurință; )

Meniul principal este terminat și puteți începe să descrieți submeniurile și submeniurile acestora.

Descrierea unui meniu derulant CSS/HTML

Deschidem index.html și adăugăm, de exemplu, un meniu suplimentar produselor. Între listele LI inserăm UL , vom plasa cinci liste în el, în care vor exista legături cu atributul herf="#” .

ul>li*5>a

Faceți clic pe aplicați, scrieți numele articolelor ( Îmbrăcăminte, electronice, alimente, unelte, viață. chimie).

• Pânză
• Electronică
• Alimente
• Instrumente
• Gen. chimie

Apoi deschidem style.css și descriem stilurile submeniului.

Selectați a doua listă și dați-i poziția: absolută; , setați lățimea minimă la 150 de pixeli.

/*submeniu*/ .dws-menu li ul( poziție: absolut; min-width: 150px; )

Să scriem marginea unui vârf pe liste.

Dws-menu li > ul li( chenar: 1px solid #c7c8ca; )

Pentru legăturile din submeniu, setați padding-ul la 10 pixeli, eliminați transformarea textului și faceți fundalul cu câteva tonuri de fundal mai închis: #e4e4e5; .

Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )

Apoi vom crea un alt meniu imbricat. Să mergem la fișierul de marcare și, de exemplu, în „Electronics” formăm meniul prin analogie, așa cum am făcut înainte. Descrieți titlurile de paragraf ( Camere, Calculatoare, Telefoane) și salvați.

Electronică

• camere de luat vederi
• Calculatoare
• Telefoane

Sunt afișate, dar ascunse sub meniul principal, acum poziție: absolută; imbricat UL și deplasați-l cu 150 de vârfuri. in lateral:

Dws-menu li > ul li ul( poziție: absolut; dreapta: -150px; sus: 0; )

/*submeniu*/ .dws-menu li ul( poziție: absolut; min-width: 150px; afișaj: niciunul; )

Iar pentru aspectul lor, vom selecta listele de pe hover și le vom afișa folosind display: block; .

dws-menu li:hover > ul( display: block; )

Acum puteți adăuga meniuri cu mai multe niveluri prin simpla copiere a blocului UL, schimbându-i elementele.

• Acasă
• Produse
  • Pânză
    • Pantofi
    • jachete
    • Pantaloni
  • Electronică
    • camere de luat vederi
    • Calculatoare
    • Telefoane
      • Samsung
      • Flf
      • măr
  • Alimente
  • Instrumente
  • Gen. chimie
• Servicii
  • Serviciul 1
  • Serviciul 2
  • Serviciul 3
• știri
• Contacte

Apoi să decorăm nasturii cu ingredientul pentru etapele finale. Folosesc un generator CSS, am mai multe presetări create, puteți să vă creați propriile dvs., în cazul meu doar copiez acest cod și îl plasez în fundal pe care l-am scris anterior.

.dws-menu > ul li a( display: block; /* Permalink - utilizați pentru a edita și partaja acest gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ fundal: #c9c9c9 ; /* Browsere vechi */ fundal: -moz-linear-gradient(sus, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ fundal: -webkit-linear-gradient(sus, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25, Safari5.1-6 */ fundal: gradient liniar (în jos, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ umplutură: 15px 30px 15px 40px; dimensiunea fontului: 14px; culoare: #454547; text-decor: niciuna; text-transform:majuscule; tranziție: toate 0.3s ușurință; ).dws-menu li a:hover( /* Permalink - utilizați pentru a edita și partaja acest gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background: #e0e1e5; /* Browsere vechi */ fundal: -moz-linear-gradient(sus, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ fundal: -webkit-linear-gradient(sus, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25, Safari5.1-6 */ fundal: gradient liniar (în jos, #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 0.3s ușurință; )

Dacă doriți, acest meniu poate fi conceput pentru stilul care vi se potrivește pe site, este suficient doar să generați o culoare și să o înlocuiți în cod. Rezultatul este un meniu orizontal simplu și în același timp drăguț realizat cu CSS pur.

Navigarea bună pe site este foarte importantă pentru bloggeri. Cu ajutorul acestuia, vizitatorul găsește rapid pagina dorită a blogului. Apreciază claritatea site-ului și a motoarelor de căutare. În acest articol, veți învăța cum să creați un meniu orizontal pentru Blogger cu pictograme pop-up.
Meniul cu butoane-pictograme pop-up este creat pe CSS. Pentru a vizualiza meniul, faceți clic pe butonul de mai jos:

Cum să inserați meniul CSS orizontal cu pictograme pe Blogger

1. Accesați fila „Șablon”, puneți cursorul în editor (orice loc),
2. Apăsați Ctrl + F pentru a căuta după cod și pentru a găsi o bucată de cod ]]>
3. Introduceți următorul cod înainte de acest cod:
   ..
   

   /* Codul CSS pentru meniu începe aici bloggertrix.com */ #btrix-nav (marja: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;)
   #btrix-nav li (float: left;)
   #btrix-nav li a (afișare: bloc;culoare: alb;lățime: 120px;înălțime: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; chenar-jos: 1px solid #555;)
   #btrix-nav li a span.aname (font: bold 17px/61px "Arial";culoare: #fff;text-transform: majuscule;cursor: pointer;position: relative;top: 0;tranziție: top .5s ease; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0,5);)
   #btrix-nav li a img (poziție: relativă; sus: 0; tranziție: top .5s ease;)
   #btrix-nav li a:hover (cursor: pointer;)
   #btrix-nav li a:hover img (sus: -85px;)
   #btrix-nav li a:hover .aname (sus: 85px;)
   #btrix-nav li:nth-child(1) a (fond: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;)
   #btrix-nav li:nth-child(2) a (fond: #9bc704;)
   #btrix-nav li:nth-child(3) a (fond: #0dc3ff;)
   #btrix-nav li:nth-child(4) a (fond: #51a2ec;)
   #btrix-nav li:nth-child(5) a (fond: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)

4. Acum accesați fila „Design”,
5. Adăugați un nou element HTML/JavaScript și adăugați codul:

   
   

   Acasă https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

   
   

   Descarca https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

   mysql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

   
   

   HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

   
   

   Contacte https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Faceți modificările necesare codului pe care l-ați adăugat la gadgetul HTML/JavaScript:

• Schimbați pictograma # într-un link către pagina de blog dorită (de exemplu, pagina de etichetă, pagina de contact, pagina de pornire a blogului etc.)
• link către imaginea evidențiată în portocaliu, înlocuiți cu un link direct către pictograma-imagine pentru articolul corespunzător.
• Element evidențiat cu albastru, acesta este titlul paginii meniului CSS.

Mutați un element HTML? JavaScript la locul potrivit în fila „Design” a blogului.

Pentru meniul dvs., puteți utiliza pictograme, logo-uri și alte imagini PNG cu un fundal transparent. Pentru a găsi imaginile dorite, este mai bine să folosiți căutarea după pictograme. De exemplu, iconsearch.com

O zi bună, dragi cititori. Astăzi vom discuta subiectul cum să faci un meniu orizontal folosind html și css". Meniul, de regulă, se află în antetul site-ului și este o listă de link-uri către cele mai importante pagini, mai este numit și meniu principal. Utilizatorii vor face clic în mod constant pe aceste link-uri. Modul în care le aranjați și ce design îi oferiți meniului vor afecta comportamentul utilizatorilor, conversia, experiența lor generală a site-ului dvs. și, desigur, .

Cod HTML pentru meniul orizontal

Pe vremuri, meniul principal al site-ului se făcea pe poze, tabele, flash și, eventual, altceva, dar în prezent există cea mai populară și corectă metodă de a crea un meniu folosind etichete „listă”.

Etichetele sunt folosite pentru a crea meniuri.

,
• Și .

Un exemplu de utilizare a etichetelor html pentru a crea un meniu în codul de mai jos:

• Acasă
• Servicii
• Preturi
• Contacte

Stiluri CSS standard pentru meniul orizontal

ul ( list-style: none; /*eliminați marcatorii listei*/ margin: 0; /*eliminați padding-ul*/ padding-left: 0; /*eliminați padding-ul*/ ) a ( text-decoration: none; /*eliminați sublinierea link text*/ ) li ( float:left; /*Plasați lista pe orizontală pentru a implementa meniul*/ margin-right:5px; /*Indentați elementele de meniu*/ )

Obținem un meniu de top gata făcut în antet, fără stiluri speciale și clopoței și fluiere, acesta poate fi numit cadrul viitorului tău meniu frumos. Dacă copiați și lipiți acest html și css, va arăta așa.

Un exemplu de cadru (șablon) pentru viitorul meniu

Totul a ieșit destul de simplu, desigur, doriți un meniu principal frumos imediat, dar fără a înțelege elementele de bază, pur și simplu nu veți putea crea un meniu bun fără erori în html și css.

Există, de asemenea, câteva alte metode CSS utilizate pentru a face meniurile orizontale în afară de float:left; , de exemplu display:inline-block; sau display:flex; , dar se recomandă utilizarea metodei descrise mai sus.

Să umplem șablonul nostru de meniu cu diverse stiluri și să îl facem frumoasa.

Exemple de meniu orizontal frumos pentru un site web

Acum voi da câteva exemple gata făcute cu un design de meniu orizontal gata făcut.

Puteți crea toate „lucrurile drăguțe” pentru site-ul dvs. și nu căutați pe Internet. Cel mai simplu mod de a face acest lucru se bazează pe unul dintre exemplele de mai jos.

Meniu albastru simplu cu articole separate

Stiluri CSS pentru meniul „de sus”.

Mai jos sunt stilurile pentru acest meniu. HTML-ul rămâne același ca în meniul „schelet”.

Ul ( list-style: none; /*eliminați marcatorii listei*/ margin: 0; /*eliminați padding*/ padding-left: 0; /*eliminați padding*/ margin-top:25px; /*indent top*/ ) a ( text-decoration: none; /*eliminați sublinierea textului linkului*/ background:#30A8E6; /*adăugați fundal la elementul de meniu*/ color:#fff; /*schimbați culoarea linkului*/ padding:10px; /*adăugați padding */ font-family: arial; /*schimba fontul*/ border-radius:4px; /*adăugați rotunjire*/ -moz-transition: toate 0.3s 0.01s ease; /*face o tranziție lină*/ -o-transition : toate 0,3 s 0,01 s ușurință; -webkit-transition: toate 0,3 s 0,01 s ușurință; ) a:hover ( background:#1C85BB;/*adăugați efect de hover*/ ) li ( float:left; /*așează lista pe orizontală la implementați meniul*/ margin-right:5px; /*Indentați elementele de meniu*/ )

Meniul principal situat pe o linie colorată cu fundal roșu

meniu stil css pe linia de culoare

ul ( list-style: none; /*eliminați marcatorii listei*/ margin: 0; /*eliminați umplutura*/ padding-left: 0; /*eliminați umplutura*/ margin-top:25px; /*indent top*/ fundal :#FF4444; /*adăugați un fundal la întregul meniu (înlocuirea acestui parametru va schimba culoarea întregului meniu)*/ înălțime: 50px; /*setați înălțimea*/ ) a ( text-decoration: none; /* eliminați sublinierea textului linkului* / background:#FF4444; /*adăugați un fundal la elementul de meniu (înlocuirea acestei setări va schimba culoarea tuturor elementelor de meniu)*/ color:#fff; /*schimbați culoarea linkului* / padding:0px 15px; /*adăugați padding*/ font-family: arial; /*schimbați fontul*/ line-height:50px; /*aliniați meniul pe verticală*/ afișare: bloc; chenar-dreapta: 1px solid # F36262; /*adăugați un chenar la dreapta*/ -moz-transition: toate 0.3s 0.01s ușurință; /*face o tranziție lină*/ -o-transition: toate 0.3s 0.01s ease; -webkit-transition: toate 0.3s 0.01s ease; ) a:hover ( background:#D43737;/ *adăugați un efect de hover*/ ) li ( float:left; /*Plasați lista pe orizontală real meniul*/ )

Meniu derulant în HTML+CSS

Pentru implementare meniu suplimentar derulant (drop-down) pe site pentru orice element de meniu, trebuie să adăugăm o listă suplimentară de articole la codul HTML pentru orice link din meniul orizontal și să schimbăm stilurile CSS. În stiluri, vom aplica un truc simplu - schimbarea afișajului meniului derulant de pe hover la elementul de care avem nevoie în meniul de sus. De exemplu, să luăm articolul „servicii”.

Exemplu de creare a unui meniu derulant simplu

Codul HTML al meniului drop-down

• Acasă
• Servicii
  • Serviciul 1
  • Serviciu îndelungat 2
  • Serviciul 3
• Preturi
• Contacte

Meniu derulant Stiluri CSS

ul ( list-style: none; /*eliminați marcatorii listei*/ margin: 0; /*eliminați padding*/ padding-left: 0; /*eliminați padding*/ margin-top:25px; /*indent top*/ background :#819A32; /*adăugați un fundal la întregul meniu*/ înălțime: 50px; /*setați înălțimea*/ ) a ( text-decoration: none; /*eliminați sublinierea textului linkului*/ background:#819A32 ; /*adăugați un fundal la elementul de meniu*/ color:#fff; /*schimbați culoarea linkurilor*/ padding:0px 15px; /*adăugați padding*/ font-family: arial; /*change font*/ line-height :50px; /*aliniați meniul la verticale*/ afișare: bloc; chenar-dreapta: 1px solid #677B27; /*adăugați un chenar la dreapta*/ -moz-transition: toate 0,3s 0,01s ușurință; /*face un tranziție lină*/ -o-tranziție: toate 0.3s 0.01s ușurință; -webkit-transition: toate 0.3s 0.01s ușurință; ) a:hover ( background:#D43737;/*Adăugați un efect de hover*/ ) li ( float :left; /*Plasați lista pe orizontală pentru a implementa meniul* / position:relative; /*setați poziția pentru poziționare*/ ) /*Stiluri pentru meniul derulant ascuns* / li > ul ( poziție: absolut; sus: 25px; afișaj: niciunul; ) /*Faceți vizibilă partea ascunsă*/ li:hover > ul ( display:block; width:250px; /*Setați lățimea meniului drop-down*/ ) li:hover > ul > li ( float:none; /* Eliminați poziționarea orizontală* / )

Și pentru a înțelege exact ce servicii și categorii ar trebui să aveți, vă recomand să vă familiarizați cu materialul:.

Am încercat să vă spun cât mai pe scurt posibil despre cum să creați un meniu principal orizontal, să faceți câteva șabloane, cum să adăugați stiluri simple la el și să-l faceți mai frumos, cum să faceți un meniu drop-down pentru site-ul dvs. Pentru comoditate, am adunat toate meniurile prezentate mai sus într-un singur fișier html, pe care îl puteți descărca mai jos. Arată ca în captura de ecran:

Vă mulțumesc pentru atenție.

Meniu vertical se face pe baza unei liste, marcate sau numerotate. În mod implicit, toate articolele din listă sunt stivuite vertical, ocupând întreaga lățime a elementului container, care la rândul său ocupă întreaga lățime a blocului său container.

Elementele listei pot conține nu numai linkuri, ci și titluri, pictograme, imagini. Folosind meniul vertical, puteți face comentarii pe site, o listă de categorii etc.

1. Meniu vertical cu titlu

Design simplu elegant. Potrivit pentru categoriile de styling de pe site. La trecerea cursorului, elementul din listă își schimbă culoarea linkului.

* (dimensiunea casetei: border-box; margine: 0;) .widget (complet: 20px 30px; fundal: alb; font-family: "Roboto", sans-serif; ) .widget-title ( text-transform: majuscule ; spațiere între litere: 2 px; culoare: #222; dimensiune font: 16 px; umplutură-stânga: 15 px; margine-jos: 15 px; chenar-stânga: 2 px solid #b99d61; ) .widget-list (padding: 0; listă) -style: none; ) .widget-list a:before (conținut: „\2014”; margin-right: 14px; ) .widget-list a ( text-decoration: none; outline: none; display: block; padding: 6px 0; spațiere între litere: 1px; greutate font: 300; culoare: #444; tranziție: .3s liniar; ) .widget-list a:hover (culoare: #b99d61;)

2. Meniu vertical în stilul „hartă metroului”

O soluție interesantă pentru proiectarea unui meniu vertical, este posibil să adăugați meniuri imbricate. „Sucursală metrou” - marginea din stânga a listei, marcatorii sunt generați înainte de fiecare link.

• Element din listă
  • element din listă imbricat
  • element din listă imbricat
  • element din listă imbricat
• Element din listă
• Element din listă

.metro (stil listă: niciunul; umplutură: 0; margine: 30px 0 0 50px; chenar-stânga: 5px solid #DAE4F1; ) .metro li (înălțimea liniei: 2em;) .metro ul (marja: 20px 0 20px 15px; umplutură: 0; chenar: niciunul; stil listă: niciunul; ) .metro ul:before, .metro ul:after (conținut: ""; lățime: 5px; înălțime: 28px; fundal: #DAE4F1; poziție: relativă ; afișare: bloc; stânga: -9px; ) .metro ul:before ( transformare: rotire(-45deg); margin-top: -15px; ) .metro ul:după (transformare: rotire(45deg); jos: -20px ; ) .metro ul li (chenar-stânga: 5px solid #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( text-decor: niciunul; display: block; font-family: "Noto Sans", sans-serif; culoare: #4A4B4D; ) .metro a: înainte (conținut: „”; afișare: bloc inline; fundal: #CA682D; lățime: 12px; înălțime: 12px; stânga: -9px; poziție: relativă; rază-chenar: 50%; margine-dreapta: .5em; )

3. Meniu vertical cu efecte de hover

Pictograma și umplerea fundalului care apar atunci când treceți cu mouse-ul peste un element din listă vor ajuta la diversificarea designului elementelor de meniu vertical.

.category-wrap ( padding: 15px; fundal: alb; lățime: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( dimensiunea fontului: 16px; culoare: rgba(0,0,0,.6); margine: 0 0 10px; padding: 0 5px; poziție: relativă; ) .category-wrap h3:după ( conținut: ""; lățime: 6px; înălțime: 6px; fundal: #80C8A0; poziție: absolut; dreapta: 5px; jos: 2px; umbră casetă: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul (stil listă: niciunul; margine: 0; padding: 0; margine-sus: 1px solid rgba(0,0,0,.3); ) .category- wrap li (marja: 12px 0 0 0px;) .category-wrap a ( text-decor: none; display: block; font-size: 13px; culoare: rgba(0,0,0,.6); padding: 5px ; poziție: relativă; tranziție: .3s liniar; ) .category-wrap a:after (conținut:"\f18e"; font-family: FontAwesome; poziție: absolut; dreapta: 5px; culoare: alb; tranziție: .2s liniar ; ) .category-wrap a:hover ( fundal: #80C8A0 ; culoare albă; )

4. Meniu vertical cu pictograme

Pictogramele de meniu oferă o ancoră vizuală, completând descrierea verbală a fiecărei categorii. Pentru a afișa pictograme, trebuie să vă conectați. De asemenea, puteți utiliza orice alt font pictogramă sau pictograme imagine.

* (dimensiunea casetei: border-box; margine: 0;) .widget ( umplutură: 20px; chenar: 5px solid #f1f1f1; fundal: #fff; border-radius: 5px; font-family: „Roboto”, sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; culoare: #424949; ) .widget ul (marja: 0; umplutură: 0; listă -style: none; width: 250px; ) .widget li ( chenar-jos: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( chenar-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decor: niciunul; culoare: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; vertical-align:bottom; culoare: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (conținut:"\f1fc";) .widget li:nth-child( 2):before (conținut:"\f0d0";) .widget li:nth-child(3):before (conținut:"\f0cd";) .widget li:nth-child(4):before (conținut:" \f028";) .widget li:nth-child(5):before (conținut:"\f03d";)

5. Meniu vertical cu poze

Acest exemplu poate fi folosit pentru a proiecta blocuri cu produse noi, produse similare etc. site-ul magazinului online.

Jpeg">