Un meniu derulant frumos poate fi creat nu numai în JavaScript, ci și folosind etichete HTML standard. Această metodă de creare a unui meniu drop-down va fi utilă pentru cei care abia încep primii pași în crearea site-urilor și doresc să simplifice activitatea de creare a meniurilor pe pagini.
Instrucțiuni
Pasul 1
În codul HTML, un astfel de meniu este o listă neordonată cu liste imbricate în interior. Pentru a începe, creați un fișier style.css și copiați următorul cod CSS acolo pentru a stiliza și formata meniul:
#nav, #nav ul {
list-style: nici unul;
marja: 0;
umplutură: 0;
chenar: 1px solid # 000;
fundal: # 515151;
plutește la stânga;
lățime: 100%;
}
#nav li {
plutește la stânga;
poziție: relativă;
culoare de fundal: # 003366;
back / ground: none;
}
#nav li ul {
display: none;
poziție: absolută;
culoare de fundal: # 003366;
umplutură: 8px 0;
lățime: 138px;
}
Pasul 2
Acum trebuie să adăugăm ceva decor la elementele de meniu. Definiți lățimea și înălțimea pentru acestea, eliminați liniile subliniate, setați o lățime liberă pentru fiecare legătură și specificați culorile de fundal dorite.
Pasul 3
Pentru toate aceste modificări, adăugați următorul cod în fișier:
#nav a {
culoare: #fff;
decor-text: nici unul;
display: bloc;
lățime: 120px;
umplutură: 4px 10px;
culoare de fundal: # 003366 repetați-dreapta;
}
#nav a: hover {
culoare: # 000;
culoare de fundal: # 0033FF;
}
#nav li: hover {
culoare de fundal: # 333333;
}
Apoi adăugați următoarea bucată de cod pentru a finaliza meniul:
#nav li: hover li ul {
display: none;
lățime: 138px;
sus: -9px;
stânga: 133px;
}
#nav li: hover li: hover ul {
display: bloc;
}
Pasul 4
În versiunea HTML, lista generală de meniuri neordonate arată astfel - pe baza sa, este creat meniul, care a fost menționat în articol.
- Acasă
-
Catalog
-
Toate produsele
- După dată
- Producătorii
- Alte
-
