Bună ziua cititori blog dragi. Astăzi vom învăța să faci destul de mult meniul din antet, cu o destul de bună și atractiv efect Hover.
Aș dori să spun imediat că dimensiunea foarte mică din acest meniu și nu sunt potrivite pentru toate site-urile și nu pentru fiecare desen sau model. Acesta tinde mai mult la stilul de design minimalist. Cu toate că multe, dacă nu modificați stilurile, acesta poate fi nastoroit pentru orice design site-ul web.
În acest post se poate descărca navigarea codul sursă, precum și vedea în acțiune, care este un exemplu.
Vă reamintesc că această lecție ne-a împărtășit site-ul designfestival.com. pentru care multumesc mult.
Ei bine, acum să trecem direct la unitatea.
Exemplul ι Descărcați sursele
Acest cod trebuie să fie introdus în locul în care doriți să se afișeze meniul:
După cum puteți vedea aici ne etichetați
- a cerut clasa principala-ul, care, în viitor, vor fi utilizate în stilurile.
Acum să trecem la stiluri CSS.
Pentru a începe în orice loc în stil CSS, adăugați acest lucru:
Deci, vom elimina implicit etichetele de stil ol și ul.
Acum, avem nevoie pentru a distribui lista sine pe pagina web. Sau, cu alte cuvinte, specificați poziția. Acest lucru se face după cum urmează.
animație Smooth (tranziție)
Dar acum vom face foarte designul meniului. Aici vom folosi animații CSS3 (de tranziție), care permite ulterior să facă astfel de efecte frumoase hover netede pe ele. Aici el este codul:
Viteza de animație este în valoare de 1 secundă. La cerere, acesta poate fi schimbat.
Acum trebuie să setați dimensiunea, stilul și fontul în sine. Bineînțeles, le puteți schimba de unul singur, dacă nu aveți o dimensiune standard nu sunt îndeplinite:
Doar aici, puteți seta o culoare diferită de link-ul atunci când treci. El este stabilit în conformitate cu planare tag-ul, #fff standard de culoare (alb).
Animație (transformare) și culoarea planare
Deci, este timpul pentru a adăuga la efectul nostru de meniu (cum ar fi, astfel să-l numesc :-)) nu este o cotitură mare. Vom face acest lucru cu ajutorul CSS transforma. Și aici vom face separat pentru fiecare legătură într-o culoare diferită atunci când vă mutați:
După cum puteți vedea culoarea expuse în fundal. Un grad de rotație este: transforma: roti (-3deg); Această valoare poate fi modificată.
Următorul este practic același cod CSS numai cu nu de mult de clasă alterată și culoare în culoare de fundal.
Exemplul ι Descărcați sursele
Acest lucru sa dovedit destul de meniu nu-i rău, care poate fi folosit pe orice site. -)