Es pot crear un bon menú desplegable no només amb JavaScript, sinó també mitjançant etiquetes HTML estàndard. Aquest mètode per crear un menú desplegable serà útil per a aquells que acaben de començar els primers passos per crear llocs i volen simplificar la feina de creació de menús a les pàgines.
Instruccions
Pas 1
Al codi HTML, aquest menú és una llista no ordenada amb llistes imbricades al seu interior. Per començar, creeu un fitxer style.css i copieu-hi el codi CSS següent per donar estil i formatar el menú:
#nav, #nav ul {
estil de llista: cap;
marge: 0;
encoixinat: 0;
vora: 1 px sòlid # 000;
fons: # 515151;
flotador: esquerra;
amplada: 100%;
}
#nav li {
flotador: esquerra;
posició: relativa;
color de fons: # 003366;
back / ground: none;
}
#nav li ul {
visualització: cap;
posició: absoluta;
color de fons: # 003366;
encoixinat: 8 px 0;
amplada: 138 px;
}
Pas 2
Ara hem d’afegir una mica de decoració als elements del menú. Definiu-ne l'amplada i l'alçada, traieu les línies subratllades, configureu una amplada lliure per a cada enllaç i especifiqueu els colors de fons desitjats.
Pas 3
Per a tots aquests canvis, afegiu el codi següent al fitxer:
#nav a {
color: #fff;
decoració de text: cap;
pantalla: bloc;
amplada: 120 px;
encoixinat: 4 px 10 px;
color de fons: # 003366 repetir-y a la dreta;
}
#nav a: passeu el cursor {
color: # 000;
color de fons: # 0033FF;
}
#nav li: passeu el cursor {
color de fons: # 333333;
}
A continuació, afegiu el fragment de codi següent per finalitzar el menú:
#nav li: hover li ul {
visualització: cap;
amplada: 138 px;
superior: -9px;
esquerra: 133 px;
}
#nav li: hover li: hover ul {
pantalla: bloc;
}
Pas 4
A la versió HTML, la llista general de menús no ordenats té aquest aspecte: en la seva base, es crea el menú, que es va esmentar a l'article.
- Inici
-
Catàleg
-
Tots els productes
- Per data
- Fabricants
- Altres
-
