¿Cómo creo menús CSS desplegable?
Las hojas de estilo en cascada (CSS) es un nombre utilizado para describir la forma en que se formatean un documento de lenguaje de marcado de Hyper Text (HTML) o lenguaje de marcado extensible (XML). Se puede usar para cualquier tipo de documento XML, pero se usa con mayor frecuencia con páginas web escritas en HTML. CSS se puede usar para crear menús desplegables en las páginas web. Los menús de desplazamiento CSS tienen un solo elemento de texto que se muestra hasta que el visitante use el mouse para desplazarse sobre el menú, momento en el cual se muestra la lista completa de elementos. El menú se crea utilizando la identificación de CSS y las etiquetas de clase.
menús desplegable CSS comienzan con el selector de ID. Este selector parece #. Es seguido por el nombre de la identificación. Puede nombrar la identificación de cualquier cosa, pero debe ser descriptivo para que otros puedan leer su código. Por ejemplo, un menú desplegable puede usar el código #drop1.
Crear la clase para el primer elemento en el menú desplegable CSS utilizando el selector de clases, que parece un período. La clase será parte del elemento de lista HTML. El elemento de la lista está designado por los personajes "Li". Cree la clase de nivel superior escribiendo "li.top". La descripción de la clase está contenida entre dos aparatos ortopédicos rizados.
El siguiente ejemplo muestra todo el código CSS para el primer elemento en la lista:
#drop1 li.top {Font-Family: Verdana, Ginebra, San-Serif;
tamaño de fuente: 100%;
Color: #ff00ff;}
A continuación, cree una clase para los elementos que se ocultarán debajo del primer elemento en el menú CSS. La clase describirá la lista desordenada HTML, que se designa con los caracteres "UL". La descripción se verá esencialmente igual que el elemento de menú de nivel superior, con la adición de las palabras "Pantalla: Ninguno#59" al comienzo de la descripción. Esto indica que los elementos en la lista desordenada se ocultarán hasta que el puntero se cierne sobre el menú desplegable CSS.
lo siguientees un ejemplo de esta parte del código CSS:
#drop1 ul.link {
Pantalla: ninguno#59
Font-Family: Verdana, Ginebra, San-Serif;
tamaño de fuente: 100%;
Color: #ff00ff;}
Querrá que aparezca el menú CSS desplegable sobre el resto del documento HMTL. De lo contrario, cuando el visitante se cierne sobre el menú, empujará el resto del documento por la página para dejar espacio para la lista. Establecer el elemento de posición en absoluto, hará esto.
El código para establecer la posición es:
#drop1 {posición: absoluto;}
Eso es todo lo que se necesita para la parte CSS del menú desplegable. El resto del menú desplegable CSS se crea en el documento HTML utilizando los elementos "Div", "Id", "clase", "Li" y "UL". La etiqueta "Div" separa la parte del menú del documento. Escriba
Agregue la clase superior al primer elemento de lista y la clase de enlace para el resto de los elementos. El código HTML debería parecer similar a:
Cuando abre el documento en un navegador web, el menú desplegable CSS aparecerá como un elemento único en la página. Cuando mueva el mouse sobre el elemento superior, aparecerá el resto del menú. El resto del texto en la página no se moverá, pero el menú oculta una parte.