Practic, nici un site modern nu poate face fără navigare, cu excepția cazului în care este un site cu o singură pagină. In acest articol vom pregăti cod HTML semantically alfabetizate pentru meniul nostru, apoi Styling cu chips-uri noi pe CSS3 (box-shadow. Gradient. @ Font-face, etc sunt prezente), iar la sfârșitul anului un pic mai greu pentru noi pentru a naviga. adăugând sub-elementele dropdown cu animație simplă jQuery. Meniul rezultat poate fi folosit ca un șablon pentru propria dezvoltare.
Pregătiți codul HTML semantic al meniului nostru. Care este meniul în ceea ce privește codul? De obicei, aceasta este o listă neordonată de linkuri înfășurate de o etichetă
Cu toate acestea, este un meniu prea simplu, să adăugăm câteva sub-elemente suplimentare care vor apărea mai târziu atunci când se deplasează mouse-ul și se pun clasele:
Pentru IE mai vechi, nu uităm să conectăm toate cârjele necesare: html5shiv, PIE pentru a lucra în continuare cu proprietăți CSS3 etc. Nu uitați de conexiunea jQuery. După cum puteți vedea, cu markup totul este simplu, să mergem mai departe.
Stilizați meniul
Luați ca bază codul meu finalizat pentru meniul orizontal cu sub-elementele derulante:
În primul rând, centralizăm navigația pe orizontală pe pagină:
tag-uri
Vom face designul elementelor de navigație, mai întâi vom face declivitățile. Anterior (și totuși acest lucru este real) pentru aceasta, o bandă de un pixel a fost tăiată și umplută întregul element, în CSS3 apar proprietățile gradientului linear și gradientului radial. care creează un gradient liniar și radial, respectiv. Aveți posibilitatea să utilizați un generator de gradient online pentru a evita înfundarea totul manual și pentru a obține stiluri imediat. Folosesc serviciul ColorZilla. acest cod este obținut instantaneu:
Definiți mic meniu Rotunjirea de colț, care a fost făcut anterior poziționarea imagini în colțuri și o mulțime de unități suplimentare non-semantice acum folosesc border-radius proprietate PIE + carja pentru IE vechi sau de degradare:
Apoi, am decis să folosesc un font non-standard pentru textul de link-uri, de exemplu, a luat fontul DINMediumRegular. Îl conectăm cu proprietatea @ font-face. Există un excelent generator de reguli online pentru @ font-face. Font veveriță. încărcați fontul dorit și obțineți ieșirea din arhivă cu stiluri gata făcute, rămâne doar să le conectați la proiectul dvs.:
Pentru Internet Explorer mai vechi, folosim filtre încorporate pentru umbre sau pierdem din vedere absența și o mică inconsistență cu designul.
Restul stilurilor nu trebuie să fie luate în considerare cu atenție, pentru că totul este foarte simplu și nu trebuie să cauzeze dificultăți speciale.
Drop-down sub-elemente pe jQuery
În cele din urmă, vom aborda sub-elementele de meniu derulante. Este foarte convenabil să folosiți biblioteca jQuery, care are metoda animate () încorporată pentru animarea elementelor într-un document. animate () vă permite să creați efecte de animație pentru proprietățile numerice ale CSS, în cazul nostru, vom anima opacitatea transparenței. Scriptul este foarte simplu, doar câteva linii de cod:
Apoi, am agățat mânerul la evenimentul de hover a elementelor de navigație. Atunci când plasați cursorul mouse-ului în elementul curent, găsim un element cu meniul .dropdown de clasă. aplicați animate () la opacitate și afișați lista de link-uri folosind metoda show (). Apoi, atârnăm un alt handler când cursorul părăsește elementul. Facem totul exact invers - găsim elementul, animăm transparența la 0 și ascundem lista în document. Metoda stop () din script este necesară pentru a împiedica declanșarea mai multor animații atunci când se mișcă cursorul mouse-ului înainte și înapoi.
Acesta este modul în care un meniu simplu a fost făcut în HTML, CSS și jQuery, care pot servi drept cadru pentru dezvoltarea dumneavoastră.
Evaluarea articolelor
Articole similare
Trimiteți-le prietenilor: