Amb l'ajut d'un codi HTML competent i de regles CSS senzilles, podeu crear un menú emergent, complementar-lo i modificar-lo. Utilitzant les taules en cascada i les eines del llenguatge de marques, podeu assegurar-vos que el propi menú funcioni correctament a tots els navegadors.
Instruccions
Pas 1
Mantingueu primer la barra de menú bàsica. Creeu una llista numerada especial amb un submenú en un editor de text. Normalment s'utilitza "Bloc de notes" per a aquests propòsits. El submenú actua com a element de la llista principal. Per exemple: Primer Element Element Flood Element Flood2Field Element3Field Element4Field Element5
Pas 2
Deseu aquesta llista en un fitxer html separat. A continuació, creeu un fitxer.css. Introduïu tots els paràmetres necessaris del full d'estil. Feu-ho amb molta cura, perquè hi ha un error i el menú emergent no es mostrarà correctament o no funcionarà.
Pas 3
Elimineu les vinyetes i el farciment aplicats a la llista de vinyetes. Definiu l'amplada del menú mitjançant eines CSS: ul -style: none; width: 200px; }
Pas 4
Marqueu la posició relativa de tots els elements de la llista amb un atribut anomenat position: ul li: relative; }
Pas 5
A continuació, organitzeu el submenú, els elements del qual apareixeran des del menú principal a la dreta quan el cursor del ratolí estigui a sobre de l’ítem: li ul: absolut; left: 199px; top: 0; display: none; }
Pas 6
L'atribut esquerre és un píxel menys que l'amplada del propi menú. Això permet que els elements emergents es posicionin correctament sense crear dobles vores. L'atribut de visualització s'utilitza per amagar el submenú en obrir la pàgina.
Pas 7
Estilitzeu els enllaços segons sigui necessari mitjançant les opcions de css adequades. Incloeu el paràmetre display: block perquè els enllaços ocupin tot l'espai reservat per a ells. Per fer que el menú aparegui quan el cursor del ratolí hi passa el cursor, introduïu el codi següent: li: hover ul: block; }
Pas 8
Definiu opcions addicionals per mostrar els elements de la llista i els enllaços segons vulgueu. Incloeu un atribut al fitxer.html. El menú emergent ja es pot utilitzar.
