-
Código HTML para Vertical Pop-Out Menú
-
Puede ahorrar espacio en su sitio web mediante el uso de menús pop-out. Estos contienen una lista de opciones para los padres y como el usuario pasa el ratón sobre el elemento, todos los elementos del menú infantil aparecen dentro de la página. Este tipo de menú se puede lograr en un archivo de HTML independiente, o como parte de un sistema de gestión de contenido mediante la adición de la codificación CSS a la principal hoja de estilo CSS.La creación de la hoja de estilos
Si desea que el menú para ir en un archivo HTML independiente, se debe hacer un espacio entre las etiquetas <head> y </ head> en el código CSS tope. Escriba lo siguiente en el archivo:
<Style type = "text / css">
</ Style>
El espacio entre estas dos etiquetas es la hoja de estilos. Si está utilizando un archivo CSS independiente, añada lo siguiente en algún lugar entre las etiquetas de la cabeza:
<LINK rel = href = tipo "style.css" "estilo" = "text / css">
A continuación, cree un archivo llamado "style.css", que es la hoja de estilos. Mantenga la hoja de estilos en el mismo directorio que el archivo HTML principal.Creación del menú de
Debe crear una etiqueta que contiene <div> para el menú de entrar. Añadir lo siguiente a la página HTML en el lugar que desee en el menú para ir:
<Div id = Menú>
</ Div>A continuación, debe definir el divisor de menú. Agregue el código siguiente a la hoja de estilos:
{menú
Anchura: 200px;
}Añadir a esta entrada a cualquier otro estilo CSS desea que contiene el divisor de tener - por ejemplo, un color de fondo, las fronteras, o diferente tamaño.
Formato HTML
Añadir el código para el menú en sí. El menú utilizará una lista desordenada: <ul>. Agregue el código siguiente entre las etiquetas <div> para su menú:
<Ul>
<Li> Elemento de menú 1
<Ul>
<Li> <a href="#"> Elemento de submenú 1 </a> </ li>
<Li> <a href="#"> Elemento de submenú 2 </a> </ li>
</ Ul>
</ Li>
</ Ul>Tenga en cuenta que <ul> etiquetas de la sub-menú se anidan dentro de la <li> y </ li> etiquetas para "Elemento de menú 1." Esto le dice al navegador que el sub-menú está contenida en virtud de ese elemento del menú. Adaptar el código anterior para representar su propio menú, añadiendo sus propias direcciones URL y submenús adicionales si fuera necesario.
CSS Styling
En este punto, aparece el menú, pero el sub-menú estará en exhibición en todo momento. Es necesario utilizar el atributo "pantalla" para ocultar y revelar el submenú. Agregue lo siguiente a la hoja de estilos:
Menú li {position: relative;} menú ul ul {
position: absolute;
top: 0;
izquierda: 100%;
Anchura: 100px;
}
div # menú ul ul {display: none;}
div # menú ul li: hover ul {display: block;}Guardar todos los archivos. Su menú pop-out ya está listo.
