Amb l'ajut d'un bon codi HTML i de regles CSS simples, podeu crear un bon menú emergent que es pot modificar i complementar fàcilment. En utilitzar el llenguatge de marques i Fulls d’estil en cascada, podeu assegurar-vos que els menús funcionin correctament a tots els navegadors.
Instruccions
Pas 1
En primer lloc, creeu l’estructura bàsica del menú. Obriu un editor de text i creeu una llista numerada amb un submenú que funcioni com a element de llista principal. Per exemple:
-
Primer element
- Element desplegable
- Menú desplegable2
Pas 2
Deseu la llista generada en un fitxer html separat. A continuació, creeu un fitxer amb una extensió.css i introduïu tots els paràmetres del full d'estil.
Pas 3
Elimineu qualsevol farciment i vinyetes que s'apliquin a la llista de vinyetes i configureu l'amplada del menú mitjançant les eines CSS: ul {list-style: none;
amplada: 200 px; }
Pas 4
Establiu la posició relativa de tots els elements de la llista mitjançant l'atribut position: ul li {position: relative; }
Pas 5
A continuació, heu de dissenyar un submenú, cadascun dels elements del qual apareixerà a la dreta del menú principal en el moment en què el punter del ratolí es troba a l’element: li ul {position: absolute;
esquerra: 199 px;
superior: 0;
visualització: cap; } L'atribut esquerre és un píxel menys que l'amplada del propi menú. Això permet que els elements emergents es posicionin de manera intel·ligent sense crear vores dobles. L'atribut de visualització s'utilitza per amagar el submenú en obrir la pàgina.
Pas 6
Estilitzeu els enllaços segons vulgueu mitjançant les opcions de css adequades. Incloeu el paràmetre display: block perquè cada enllaç ocupi tot l'espai que li ha estat reservat.
Pas 7
Per fer que el menú aparegui en el moment en què el cursor es troba a sobre (passa el cursor), has d'introduir el codi: li: hover ul {display: block; }
Pas 8
Establiu opcions addicionals per mostrar enllaços i elements de llista segons vulgueu.
Pas 9
El menú emergent està a punt. Ara queda incloure l'atribut al fitxer.html: menú emergent
