Share
Utilizate frecvent pe site-urile de comerț electronic sau pe scară largă, meniurile mega devin din ce în ce mai populare, deoarece oferă o soluție eficientă pentru a afișa o mulțime de conținut, păstrând în același timp un aspect curat. În acest tutorial, vom învăța cum să construim un meniu mega drop-down mega cu browserul încrucișat, folosind funcții CSS3 frumoase.
Dacă sunteți în căutarea unui punct de pornire rapid, navigați prin șabloanele CSS. Sau angajați un expert CSS3. În caz contrar, să începem acest tutorial.
Să începem cu un meniu de bază, construit cu o listă neordonată și cu un stil CSS de bază.
Vom aplica acum un stil CSS de bază. Pentru containerul de meniuri, definim o lățime fixă pe care o centrăm prin setarea marginilor din stânga și din dreapta pe "auto".
#menu style-list: none; lățime: 940px; margine: 30px auto 0px auto; înălțime: 43px; umplutură: 0px 20px 0px 20px;
Acum, să vedem cum o putem îmbunătăți cu unele caracteristici CSS3. Trebuie să folosim diferite sintaxe pentru browserele bazate pe Webkit (precum Safari) și pentru browserele bazate pe Mozilla (cum ar fi Firefox).
Pentru colțurile rotunjite, sintaxa va fi:
-moz-border-radius: 10px -webkit-border-radius: 10px; raza de graniță: 10 pixeli;
În fundal, vom folosi gradienți și o culoare alternativă pentru browserele mai vechi. Pentru a păstra consistența în alegerea culorilor, există un instrument minunat numit Fatada care vă ajută să găsiți tonuri mai ușoare și mai întunecate de o culoare de bază.
fundal: # 014464; fundal: -moz-linear-gradient (top, # 0272a7, # 013953); fundal: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (# 0272a7), până la (# 013953));
Prima linie aplică o culoare de fundal simplă (pentru browserele mai vechi); liniile a doua și a treia creează un gradient de sus în jos utilizând două culori: # 0272a7 și # 013953.
Acum putem adăuga o margine întunecată și lustruiți designul cu o margine de inserție "falsă" creată cu caracteristica "box-shadow". Sintaxa este aceeași pentru toate browserele compatibile: prima valoare este offsetul orizontal, al doilea este offsetul vertical, al treilea este raza de estompare (o valoare mică o face mai clară, va fi 1 pixel în exemplul nostru) . Am setat toate offseturile la 0, astfel încât valoarea neclară va crea o margine uniformă a luminii:
-moz-box-shadow: inserție 0px 0px 1px # edf9ff; -webkit-box-shadow: inserție 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff;
Iată codul final CSS pentru containerul #menu:
#menu style-list: none; lățime: 940px; margine: 30px auto 0px auto; înălțime: 43px; umplutură: 0px 20px 0px 20px; / * Colțuri rotunjite * / -moz-border-radius: 10px; -webkit-border-radius: 10px; raza de graniță: 10 pixeli; / * Culoare și gradienți de fundal * / background: # 014464; fundal: -moz-linear-gradient (top, # 0272a7, # 013953); fundal: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (# 0272a7), până la (# 013953)); / * Frontiere * / margine: 1px solid # 002232; -moz-box-shadow: inserție 0px 0px 1px # edf9ff; -webkit-box-shadow: inserție 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff;
Vom începe cu toate elementele de meniu aliniate la stânga și le vom spația cu marginea dreaptă (umplutura va fi necesară pentru starea de hover):
#menu li float: left; display: block; text-align: center; Poziția: relativă; umplutura: 4px 10px 4px 10px; marja de-dreapta: 30px; margin-top: 7px; frontieră: nici una;
Pentru starea de hover și drop-down, am ales o schemă de culoare gri pentru fundal.
Culoarea de rezervă va fi gri deschis (# F4F4F4) iar gradientul va fi aplicat din partea de sus (# F4F4F4) în partea de jos (#EEEEEE). Culorile rotunjite vor fi aplicate numai în colțurile de sus, pentru că vom lăsa picătură în jos sub elementele de meniu.
fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, # F4F4F4, #EEEEEE); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# F4F4F4), până la (#EEEEEE));
Plăcile din stânga și din dreapta sunt puțin mai mici aici pentru că avem o margine de 1 pixel care apare pe hover. Dacă păstrăm aceeași umplutură, elementele de meniu vor fi împinse cu două pixeli în dreapta, din cauza marginilor din stânga și din dreapta adăugate pe mouse-ul. Pentru a evita acest lucru, vom elimina 1 pixel de umplutură pe ambele părți, deci avem 9 pixeli în loc de 10.
frontieră: 1px solid # 777777; umplutură: 4px 9px 4px 9px;
Apoi, adăugăm colțuri rotunjite numai în partea superioară, astfel încât meniul derulant se va lipi perfect sub elementul din meniul părinte:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; raza de graniță: 5px 5px 0px 0px;
Aici este CSS-ul final pentru elementele de meniu de pe hover:
#menu li: hover frontieră: 1px solid # 777777; umplutură: 4px 9px 4px 9px; / * Culoare și gradienți de fundal * / fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, # F4F4F4, #EEEEEE); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# F4F4F4), până la (#EEEEEE)); / * Colțuri rotunjite * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; raza de graniță: 5px 5px 0px 0px;
Pentru linkuri, vom aplica o umbra de text frumos folosind o sintaxă simplă: prima și a doua valoare sunt compensările orizontale și verticale pentru umbra (1 pixel în exemplul nostru), a treia este neclaritatea (și 1 pixel) și atunci avem culoarea (negru):
text-shadow: 1px 1px 1px # 000;
Aici este CSS final pentru link-uri:
#menu li font-family: Arial, Helvetica, sans-serif; font-size: 14px; culoare: #EEEEEE; display: block; schiță: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000;
Pe cursorul mouse-ului, deoarece fundalul este gri, vom folosi o culoare mai închisă (# 161616) pentru linkurile și culoarea albă pentru umbra textului:
#menu li: hover a culoare: # 161616; text-shadow: 1px 1px 1px #FFFFFF;
În cele din urmă, avem nevoie de o modalitate de a indica dacă există o meniuri în jos sau nu, utilizând o imagine simplă a săgeții ca fundal, va fi poziționată în partea dreaptă, folosind polizoare, iar marginea superioară se va alinia corect. Pe hover, această marjă de vârf va fi setată la 7 pixeli în loc de 8, deoarece avem o margine suplimentară care apare pe hover (în caz contrar, săgeata va fi împinsă cu 1 pixel în jos).
Accentsconagua
#menu li .drop padding-right: 21px; fundal: url ("img / drop.png") nu-repeta dreapta 8px; #menu li: hover .drop background: url ("img / drop.png") nu-repeta dreapta 7px; Iată codul nostru final pentru containerul de meniuri și linkurile; numai elementul "acasă" nu are în prezent niciun conținut vertical:
#menu style-list: none; lățime: 940px; margine: 30px auto 0px auto; înălțime: 43px; umplutură: 0px 20px 0px 20px; / * Colțuri rotunjite * / -moz-border-radius: 10px; -webkit-border-radius: 10px; raza de graniță: 10 pixeli; / * Culoare și gradienți de fundal * / background: # 014464; fundal: -moz-linear-gradient (top, # 0272a7, # 013953); fundal: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (# 0272a7), până la (# 013953)); / * Frontiere * / margine: 1px solid # 002232; -moz-box-shadow: inserție 0px 0px 1px # edf9ff; -webkit-box-shadow: inserție 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff; #menu li float: stânga; display: block; text-align: center; Poziția: relativă; umplutura: 4px 10px 4px 10px; marja de-dreapta: 30px; margin-top: 7px; frontieră: nici una; #menu li: hover frontieră: 1px solid # 777777; umplutură: 4px 9px 4px 9px; / * Culoare și gradienți de fundal * / fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, # F4F4F4, #EEEEEE); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# F4F4F4), până la (#EEEEEE)); / * Colțuri rotunjite * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; raza de graniță: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; culoare: #EEEEEE; display: block; schiță: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000; #menu li: hover a culoare: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop umplutură-dreapta: 21px; fundal: url ("img / drop.png") nu-repeta dreapta 8px; #menu li: hover .drop background: url ("img / drop.png") nu-repeta dreapta 7px; Iar rezultatul este:
Un meniu derulant "clasic" conține, de obicei, liste imbricate în elementele listei părinte și arată astfel:
Pentru meniul Mega, în loc de liste imbricate, vom folosi pur și simplu DIV-urile standard, care vor funcționa ca orice listă imbricată:
Aceasta va fi structura de bază pentru cădere. Ideea din spatele ei este de a putea include orice fel de conținut, cum ar fi paragrafe, imagini, liste personalizate sau un formular de contact, organizat în coloane.
Containerele cu dimensiuni diferite vor păstra întregul conținut descendent. Am ales numele etichetelor în funcție de numărul de coloane pe care le vor conține.
Pentru a ascunde drop-urile, vom folosi poziționarea absolută cu o margine stângă negativă:
Poziția: absolută; stânga: -999em;
Culoarea fondului de fond este identică cu cea utilizată pentru elementele de meniu. Browserele moderne vor afișa un gradient care începe cu #EEEEEE în partea superioară (pentru a se potrivi cu gradientul elementului din meniul părinte) și se termină cu #BBBBBB în partea de jos:
fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, #EEEEEE, #BBBBBB); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (#EEEEEE), la (#BBBBBB));
Vom folosi din nou colțuri rotunjite, cu excepția celei de la stânga sus:
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; raza de graniță: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; Poziția: absolută; stânga: -999em; / * Ascunde derularea * / text-align: left; padding: 10px 5px 10px 5px; frontieră: 1px solid # 777777; border-top: nici unul; / * Gradient background * / fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, #EEEEEE, #BBBBBB); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (#EEEEEE), la (#BBBBBB)); / * Colțuri rotunjite * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; raza de graniță: 0px 5px 5px 5px;
Pentru a ilustra acest lucru, să vedem cum ar părea dacă nu ar fi acordat atenție detaliilor:
Acum este exemplul nostru:
După cum puteți vedea, căderea în jos se lipsește frumos în elementul din meniul părinte.
Pentru a avea un container perfect descendent, trebuie să specificăm lățimea fiecăruia:
.dropdown_1 coloană width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
Și pentru a arăta căderile de pe mouse-ul, vom folosi pur și simplu:
#menu li: hover .dropdown_1column, #menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; top: auto;
Clasele noastre sunt gata să fie incluse în meniul nostru. Vom folosi fiecare dintre ele pornind de la coloana de 5 coloane, aspectul în coloana cu o singură coloană:
5 Conținutul coloanelor
4 Conținutul coloanelor
3 Conținutul coloanelor
2 Conținutul coloanelor
1 Conținutul coloanei
Iată o previzualizare a codului de mai sus:
Acum, când avem containerele gata, vom crea coloane de dimensiuni crescânde, urmând principiile sistemului de grilă 960.
.col_1, .col_2, .col_3, .col_4, .col_5 afișare: inline; plutește la stânga; poziție: relativă; margin-stânga: 5px; margin-dreapta: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px;
Iată un exemplu de drop-down care conține mai multe coloane. În acest exemplu, avem combinații diferite folosind toate tipurile de coloane:
Acesta este un conținut de 5 Coloane
Acesta este un conținut din 1 coloană
Acesta este un conținut din 1 coloană
Acesta este un conținut din 1 coloană
Acesta este un conținut din 1 coloană
Acesta este un conținut din 1 coloană
Acesta este un conținut cu 4 coloane
Acesta este un conținut din 1 coloană
Acesta este un conținut de 3 Coloane
Acesta este un conținut cu 2 coloane
Previzualizarea codului:
Acum, să vedem cum putem alinia meniul nostru și conținutul derulant până la marginea dreaptă a barei de navigare; nu numai elementul de meniu, ci și containerul derulant trebuie schimbat.
Pentru a realiza acest lucru, vom adăuga o nouă clasă numită .menu_right la elementul listei părinte, astfel încât să restabilim marginea dreaptă și să o plutim la dreapta:
#menu .menu_right float: right; marja de-dreapta: 0px;
Mai târziu, să vedem pauza în jos. În codul anterior CSS, colțurile rotunjite au fost aplicate tuturor colțurilor, cu excepția celei de la stânga sus, pentru a se potrivi cu fundalul elementului din meniul părinte. Acum dorim ca această meniuri să rămână la marginea dreaptă a elementului din meniul părinte. Deci, vom suprascrie valorile razei de graniță cu o nouă clasă numită .align_right și vom seta colțul din dreapta sus la 0.
#menu li .align_right / * Cornere rotunjite * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; raza de graniță: 5px 0px 5px 5px;
Nu în ultimul rând, dorim să facem căderea în jos pe dreapta; așa că vom folosi noua noastră clasă și vom reseta valoarea stânga, apoi facem să rămânem la dreapta:
#menu li: hover .align_right stânga: auto; dreapta: -1px; top: auto;
Acum este gata de utilizare în meniu:
Acesta este un conținut din 1 coloană
Și o mică previzualizare a codului de mai sus:
Acum că avem pregătită întreaga structură, putem adăuga cât mai mult conținut: text, liste, imagini etc..
Să începem cu un stil de bază pentru paragrafe și titluri:
#menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; literă Spațiere: -1px; margine: 7px 0 14px 0; padding-bottom: 14px; frontieră-fund: 1px solid # 666666; #menu h3 font-size: 14px; margine: 7px 0 14px 0; padding-bottom: 7px; margine de fund: 1px solid # 888888; #menu p linie-înălțime: 18px; margine: 0 0 10px 0; .strong font-weight: bold; .ital font-style: italic;
Putem aplica o culoare albastră frumoasă legăturilor din cadrul drop-down:
#menu li: hover div a font-size: 12px; Culoare: # 015b86; #menu li: hover div a: hover culoare: # 029feb;
Să ne reînnoim listele; trebuie să resetați un anumit stil, cum ar fi culoarea de fundal sau marginea care este utilizată în bara de navigare:
#menu li ul stil-list: nici unul; padding: 0; margine: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24px; Poziția: relativă; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; lățime: 130 x; #menu li ul li: hover fundal: nici unul; frontieră: nici una; padding: 0; margin: 0;
.imgshadow fundal: #FFFFFF; padding: 4px; frontieră: 1px solid # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666;
Și pentru a crea un paragraf cu o imagine în stânga:
.img_left width: auto; plutește la stânga; margine: 5px 15px 5px 5px;
Pentru a evidenția un anumit conținut, iată un exemplu de cutie întunecată cu colțuri rotunjite și o umbră subtilă de inserție:
#menu li .black_box background-color: # 333333; culoare: #eeeeee; text-shadow: 1px 1px 1px # 000; umplutura: 4px 6px 4px 6px; / * Colțuri rotunjite * / -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; / * Shadow * / -webkit-box-shadow: inserție 0 0 3px # 000000; -moz-box-shadow: inserție 0 0 3px # 000000; box-shadow: inserție 0 0 3px # 000000;
Și pentru a termina, iată un alt mod de a-ți modela listele folosind, din nou, unele CSS3:
#menu li .greybox li fundal: # F4F4F4; frontieră: 1px solid #bbbbbb; margine: 0px 0px 4px 0px; umplutura: 4px 6px 4px 6px; lățime: 116 px; / * Colțuri rotunjite * / -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; #menu li .greybox li: hover fundal: #ffffff; frontieră: 1px solid #aaaaaa; umplutura: 4px 6px 4px 6px; margine: 0px 0px 4px 0px;
Toate browserele rulează cu mouse-ul pe etichete non-anchor ... cu excepția Internet Explorer 6; așa că meniul nostru Mega încă nu funcționează cu acest browser vechi. Putem remedia această problemă datorită unui fișier comportament care va adăuga această funcție. Puteți să o găsiți aici și să utilizați comentariile condiționale pentru a viza numai IE6; mai multe explicații pot fi găsite prin intermediul acestui articol din CSS-Tricks.
Pentru a viza IE6, vom folosi următorul cod:
Am folosit câteva fișiere PNG în acest tutorial și, așa cum știe toată lumea, IE6 nu suportă transparența, deci avem soluții diferite:
Vă voi lăsa să alegeți cea care se potrivește nevoilor dvs. Acum, să examinăm un exemplu de lucru complet.
Mega Drop Down Menu
Bună și bun venit aici! Aceasta este o prezentare a posibilităților acestui minunat Mega Drop Down Menu.
Acest element vine cu o gamă largă de stilizări tipografice pregătite, cum ar fi titluri, liste, etc.
Acest meniu mega a fost testat în toate browserele majore.
Acesta este un text cutie gri închis. Fusce în metus la enim porta lacinia vitae a arcu. Sed sediul nulla mollis porta quis.
Phasellus vitae sapien și leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus acumulă tincidunt.
Acesta este un eșantion de text italic. Consecință sceleristică. Fusce sediul la arcu mollis cumsan la nis nisi porta quis sit amet.
Curabitur euismod gravida ante comod. Nunc dolor nulla, semper în ultrici vitae, vulputate porttitor neque.
Acesta este un eșantion de text îndrăzneț. Sucurile de alcool nu sunt incluse în elementele de bază.
Maecenas eget eros lorem, nu pellentesque lacus. Aenean dui orci, rhoncus stau amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed în sem mauris. Aenean un commodo mi. Praesent augue lacus.Citiți mai multe ...
Cu toate acestea, elementele de bază se datorează sceleriscului. Fusce sediul la arcu mollis acumulat la n nisi. Aliquam pretium mollis fringilla. Nunc în leo urna, eget varius metus. Aliquam sodales nisi.Citiți mai multe ...
Aceasta este o cutie neagră, o puteți folosi pentru a evidenția conținut. Sed sed lacus nulla și lacinia risus. Phasellus vitae sapien și leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus la velit varius gravida. Nulla ipsum risus.
Maecenas eget eros lorem, nu pellentesque lacus. Aenean dui orci, rhoncus stau amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.Citiți mai multe ...
Cu toate acestea, elementele de bază se datorează sceleriscului. Fusce sediul la arcu mollis acumulat la n nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Citeste mai mult…
corp, ul, li font-size: 14px; font-familie: Arial, Helvetica, sans-serif; line-height: 21px; text-align: left; / * Bară de navigare * / #menu style-list: none; lățime: 940px; margine: 30px auto 0px auto; înălțime: 43px; umplutură: 0px 20px 0px 20px; / * Colțuri rotunjite * / -moz-border-radius: 10px; -webkit-border-radius: 10px; raza de graniță: 10 pixeli; / * Culoare și gradienți de fundal * / background: # 014464; fundal: -moz-linear-gradient (top, # 0272a7, # 013953); fundal: -webkit-gradient (linear, 0% 0%, 0% 100%, de la (# 0272a7), până la (# 013953)); / * Frontiere * / margine: 1px solid # 002232; -moz-box-shadow: inserție 0px 0px 1px # edf9ff; -webkit-box-shadow: inserție 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff; #menu li float: stânga; text-align: center; Poziția: relativă; umplutura: 4px 10px 4px 10px; marja de-dreapta: 30px; margin-top: 7px; frontieră: nici una; #menu li: hover frontieră: 1px solid # 777777; umplutură: 4px 9px 4px 9px; / * Culoare și gradienți de fundal * / fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, # F4F4F4, #EEEEEE); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# F4F4F4), până la (#EEEEEE)); / * Colțuri rotunjite * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; raza de graniță: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; culoare: #EEEEEE; display: block; schiță: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000; #menu li: hover a culoare: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop umplutură-dreapta: 21px; fundal: url ("img / drop.png") nu-repeta dreapta 8px; #menu li: hover .drop background: url ("img / drop.png") nu-repeta dreapta 7px; / * Drop Down * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; plutește la stânga; Poziția: absolută; stânga: -999em; / * Ascunde derularea * / text-align: left; padding: 10px 5px 10px 5px; frontieră: 1px solid # 777777; border-top: nici unul; / * Gradient background * / fundal: # F4F4F4; fundal: -moz-linear-gradient (sus, #EEEEEE, #BBBBBB); fundal: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (#EEEEEE), la (#BBBBBB)); / * Colțuri rotunjite * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; raza de graniță: 0px 5px 5px 5px; .dropdown_1 coloană width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px; #menu li: hover .dropdown_1column, meniul li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; top: auto; / * Coloane * / .col_1, .col_2, .col_3, .col_4, .col_5 afișare: inline; plutește la stânga; poziție: relativă; margin-stânga: 5px; margin-dreapta: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Alinierea dreapta * / #menu. menu_right float: right; marja de-dreapta: 0px; #menu li .align_right / * Colțuri rotunjite * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; raza de graniță: 5px 0px 5px 5px; #menu li: hover .align_right stânga: auto; dreapta: -1px; top: auto; / * Drop Down Content Stylings * / #menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; literă Spațiere: -1px; margine: 7px 0 14px 0; padding-bottom: 14px; frontieră-fund: 1px solid # 666666; #menu h3 font-size: 14px; margine: 7px 0 14px 0; padding-bottom: 7px; margine de fund: 1px solid # 888888; #menu p linie-înălțime: 18px; margine: 0 0 10px 0; #menu li: mutați div a font-size: 12px; Culoare: # 015b86; #menu li: hover div a: hover culoare: # 029feb; .strong font-weight: bold; .ital font-style: italic; .imagină (fundal: #FFFFFF; padding: 4px; frontieră: 1px solid # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666; .img_left / * Bara de imagine spre stânga * / lățimea: auto; plutește la stânga; margine: 5px 15px 5px 5px; #menu li .black_box background-color: # 333333; culoare: #eeeeee; text-shadow: 1px 1px 1px # 000; umplutura: 4px 6px 4px 6px; / * Colțuri rotunjite * / -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; / * Shadow * / -webkit-box-shadow: inserție 0 0 3px # 000000; -moz-box-shadow: inserție 0 0 3px # 000000; box-shadow: inserție 0 0 3px # 000000; #menu li ul stil-list: none; padding: 0; margine: 0 0 12px 0; #menu li ul li font-size: 12px; line-height: 24px; Poziția: relativă; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; lățime: 130 x; #menu li ul li: hover fundal: nici unul; frontieră: nici una; padding: 0; margin: 0; #menu li .greybox li fundal: # F4F4F4; frontieră: 1px solid #bbbbbb; margine: 0px 0px 4px 0px; umplutura: 4px 6px 4px 6px; lățime: 116 px; / * Colțuri rotunjite * / -moz-border-radius: 5px; -webkit-border-radius: 5px; raza de graniță: 5px; #menu li .greybox li: hover fundal: #ffffff; frontieră: 1px solid #aaaaaa; umplutura: 4px 6px 4px 6px; margine: 0px 0px 4px 0px; Sper că te-ai bucurat de acest tutorial în crearea de meniuri mega. Mulțumesc că ați urmat!
De asemenea, dacă aveți nevoie de un punct de plecare rapid pentru a construi un site profesional, atunci navigați prin galeria noastră de Șabloane CSS. Acestea oferă o serie de caracteristici profesionale gata de utilizare.
