În această lecție, vom examina un exemplu de crearea de meniuri fără imagini, în stilul Apple și folosind doar CSS3! Singura problemă este că munca acestui tip de meniu se limitează la numărul de browsere care vă vor putea afișa corect eforturile (numai Firefox și Safari). Prin urmare, dacă doriți să asigurați funcționarea corectă a meniului în alte browsere, aveți grijă de imagini adecvate și de codul alternativ.
Avantajul utilizării CSS3 este că reduce semnificativ timpul de încărcare a paginii. Cu cât mai repede, cu atât mai bine.
Acum, meniul ar trebui să arate astfel:
Acum vom adăuga un alt atribut CSS3 numit raza de graniță, care va rotunji colțurile legăturilor noastre la fiecare capăt al laturilor. Puteți face acest lucru cu ajutorul primului copil și ultimului copil.
Trebuie să adăugăm marginea în 1px (margine) în partea dreaptă a li, pentru a crea un spațiu, pentru a afișa fundalul ul.
Adăugați un gradient la fundalul ul:
Acum trebuie să adăugăm starea noastră activă și starea activă. Este destul de simplu, același cod, dar selectori diferiți:
Pentru stare - activ:
Rezultatul final ar trebui să arate astfel:
ATENȚIE! Utilizați un browser Internet Explorer învechit
Acest site este construit pe tehnologii avansate și moderne și nu suportă versiunile 6 și 7 ale Internet Explorer.
Articole similare
-
Mai puțin meniu CSS în stilul Apple, xozblog - lecții și articole despre crearea unui site, blog
-
Baterie creată pentru smartphone-uri, care este încărcată într-un minut, - știri din lumea mărului
Trimiteți-le prietenilor: