Creați puternic css meniul drop-down
De asemenea, descărca codul sursă la computer! Deci, să creeze un meniu drop-down în css.
Pasul 1: Construirea unei bare de navigare
Să începem cu meniul principal. Noi o facem cu o listă neordonată și se adaugă un pic de CSS.
HTML5 și CSS3 practica de la zero la rezultatul!
Creați un container pentru meniul
Acum aplică CSS. Recipientul pentru meniul este fixat lățime și centrată prin setarea valorii din stânga: auto și dreapta: auto de proprietate marja
Acum, să vedem cum o putem îmbunătăți folosind CSS 3. Trebuie să folosim sintaxa diferite pentru browsere Webkit (cum ar fi Safari) și pentru browserele Mozilla (cum ar fi Firefox).
sintaxa este atât de a rotunji colturile:
Pentru a păstra coerența în alegerea culorii, puteți utiliza serviciul fațadei, el va ajuta să alegeți o brichetă sau mai închisă decât culoarea de fundal principal.
Prima linie setează culoarea de fond normale pentru browsere mai vechi. În a doua și a treia linie utilizează gradientul de sus în jos a paginii folosind o tranziție de culoare de la # 0272a7 # 013953.
Acum putem adăuga mai mult de frontieră întuneric și sofisticat, aplică un cadru și umbră pentru blocul nostru meniu. Sintaxa este aceeași pentru toate browserele: prima valoare - deplasarea pe orizontală; al doilea - deplasare verticală; a treia - raza de neclaritate (mică valoare face mai ușor, în exemplul nostru este de 1 pixel). Am stabilit toate părtinire la 0, astfel încât valoarea încețoșare va fi uniformă peste graniță.
Aici este containerul complet #menu cod CSS.
Adăugarea de stiluri de la elementele de meniu
Începem cu toate elementele de meniu aliniat stânga și Indentat între marja de-dreapta (padding va fi necesară pentru a restabili starea elementului de meniu):
Pentru starea indusă, și fixați în jos la sub, am ales gri.
Culoarea principală este gri deschis (# F4F4F4) și se aplică cu gradient de sus în jos (# F4F4F4) la (#EEEEEE). colțuri rotunjite Noi folosim doar partea de sus ca un sub-drop-down este doar sub elementul de meniu.
Dreptul și padding stânga va fi un pic mai puțin, pentru că într-o stare indusă de elementul de meniu are un chenar în 1px. Dacă vom lăsa vechea capitonarea, meniul va fi mutat de doi pixeli la dreapta, pentru că în starea indusă a elementului de meniu este prezent de frontieră. Pentru a evita acest lucru, vom elimina dreapta și marginea din stânga, și va fi 9px egal în loc de 10px.
Acum, se adaugă colțuri rotunjite numai de sus, ca și sub-meniul căzut va fi imediat sub punctul principal.
Aici este ultimul element de meniu CSS în stare indusă:
Iată CSS finală pentru link-uri:
Pentru link-uri către starea indusă, în care culoarea de fundal este gri, vom folosi o culoare mai închisă (# 161616) pentru link-urile și culoarea albă pentru umbra.
În cele din urmă, avem nevoie de un indicator că acest meniu drop-down conține un sub. Ca atare, indicatorul se va utiliza imaginea de fundal de săgeată din dreapta link-uri text. Otpozitsioniruem spre dreapta, se aplică padding-dreapta, și să dea un spațiu mic de mai sus. Sus medalion în stare indusă va 7RH în loc de 8 pixeli, astfel încât să avem o graniță în 1px indusă în jurul meniului.
Aici este codul final pentru link-urile din meniu și container. Numai elementul de meniu „acasă“ nu există nici un deficit al submarinului.
Aici este codul final pentru link-urile din meniu și container. Numai elementul de meniu „acasă“ nu există nici un deficit al submarinului.
Rezultatul arată astfel:
PASUL 2: Efectuați un drop-down sub-
Clasic meniul drop-down, de obicei, este format din liste imbricate, și arată ceva de genul:
structura de bază
Pentru „mega“ nostru în loc de meniu liste imbricate, vom folosi div - este de așteptat să fie rulat ca mai multe liste imbricate.
Aceasta este structura de bază pentru sub-pull-down. Ideea se bazează pe faptul că putem include conținut în submeniuri drop-down, cum ar fi paragrafe, imagini, alte liste, formulare de contact, etc.
Containere sub drop-down
Lățimea containerului depinde de conținutul său. Aleg numele tag-ul în funcție de numărul de coloane conținute în container.
Pentru a ascunde sub meniul drop-down, vom folosi de poziționare absolută și marginea din stânga negativă.
Culoarea de fundal a recipientului vertical de sub este aceeași cu cea a elementului de meniu selectat. browserele moderne arată un gradient de la # EEEE (la fel ca și elementul de meniu) pentru a #BBBBBB.
Din nou, vom folosi colțuri rotunjite, cu excepția partea din stânga sus.
Ilustrăm acest lucru. Vezi cum arată, dacă ai lăsa un colțul din stânga sus rotunjită:
Și acest lucru este modul în care ne uităm:
HTML5 și CSS3 practica de la zero la rezultatul!
Dupa cum se poate vedea sub atenție aderat la principalul său element de meniu.
Scopul nostru - drop perfectă în jos container, iar pentru acest lucru avem nevoie de o lățime diferită pentru fiecare dintre ele.
Și pentru a arăta recipientul drop-down pe Hover mouse-ului, folosim pur și simplu următorul cod:
Folosind un container pull-down
Clasele noastre sunt gata să le includă în meniu. Noi folosim fiecare dintre ele, începând cu a cincea, și fiecare despre meniul său:
Ce ar trebui să se întâmple, utilizați codul de mai sus.
Pasul 3: Creați coloana container drop-down
Acum avem un containere gata făcute, și vom crea coloane creșterea dimensiunii, folosind principiile sistemului 960 greierele.
Utilizarea coloanelor
Iată un exemplu drop-down de sub care conține mai multe coloane. În acest exemplu, avem diferite combinații de toate tipurile de coloane.
Se pare ca acest lucru:
PASUL 4: Aliniere la dreapta
Acum, să vedem cum putem alinia meniul nostru și subelementele în zona din dreapta a barei de navigare, nu numai elementele de meniu, dar containerele verticale au, de asemenea, să se schimbe.
Pentru a face acest lucru vom adăuga o nouă clasă de la lista de articole .menu_right părinte. Astfel, trebuie să reinstalați marginea din dreapta și pluti spre dreapta.
Următoarea privire la container vertical. În codul CSS anterior am folosit pentru toate rotunjiri, cu excepția partea din stânga sus. Acum trebuie să se alinieze containerul la dreapta. În consecință, vom rescrie valoarea border-radius cu o nouă clasă de .align_right și a stabilit un ula dreapta sus rotunjire la 0.
Dorim să facem apare meniul nostru pe dreapta, pentru aceasta vom folosi noua clasă și resetează valorile din stânga și din dreapta pe punctele noastre sunt pe marginea din dreapta.
Acum sunteți gata să utilizați din meniu.
Ar trebui să arate.
STEP5: Adăugați conținutul și stilurile în elementele verticale
Avem o structură complet finisată. Acum putem adăuga orice doriți conținut: text, liste, imagini ...
stiluri principale
Să începem cu stilurile de bază pentru punctele și pozițiile.
Putem aplica o culoare albastru frumos pentru link-urile pe meniul drop-down.
Stiluri pentru liste
Noi decora listele noastre. Dorim să redefinim stiluri, cum ar fi culoarea de fundal sau liste de frontieră, care sunt utilizate în meniul principal (bara de navigare).
Stiluri pentru imagini
Și face paragrafe cu imagini din stânga
blocuri de text
Noi individualizeze conținut, cum ar fi o cutie de culoare închisă, cu colțuri rotunjite și o ușoară umbră.
Resetată stiluri pentru liste
În cele din urmă, vom folosi un alt mod de a adăuga stil la lista, folosind din nou CSS 3.
PASUL 6: browsere compatibile și IE 6
Pentru întregul IE utilizați următorul cod:
Am folosit mai multe fișiere PNG în acest articol, și toată lumea știe că IE 6 nu acceptă transparența. Pentru a rezolva această problemă există mai multe soluții.
a le converti în format GIF sau PNG-8
utilizați un script
Atribuirea o culoare de fundal, alta decât gri, de exemplu TweakPNG
Din aceste soluții, puteți alege una care se potrivește mai bine de tine.
Acum, să ne uităm la un exemplu complet.
Codul finală
concluzie
Tradus și editat de: Victor Horn și Andrew Bernatsky. Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
