Cómo crear un menú de la izquierda Vertical Drop-Down en HTML

HTML listas desordenadas - se utilizan normalmente para mostrar listas simples - también aparecen en las páginas web de todo el mundo en forma de menús. Puede aparecer un menú en la parte superior de la página horizontal o verticalmente a lo largo de los lados de la página. A menudo se encuentran los menús de navegación de la izquierda. Mediante la adición de un poco de la funcionalidad de JavaScript para un menú vertical, puede crear un menú desplegable efecto. Los visitantes del sitio pueden hacer clic en un vínculo para abrir y cerrar el menú siempre que lo deseen.

Instrucciones

1 Lanzar su procesador de textos o un programa de edición de HTML.

2 Abrir un documento HTML y localizar su sección de cuerpo. Pegar el código se muestra a continuación en esa sección:

<a href="javascript:manageMenu('menuContainer')"> alternación del menú </a>

<Div id = "MenuContainer">

<Ul id = "menu1">
<Li> <a href="Add Enlace Here"> productos </a> </ li>
<Li> <a href="Add Enlace Here"> Descargas </a> </ li>
<Li> <a href="Add Enlace Here"> Ayuda </a> </ li>
</ Ul>

</ Div>

La primera instrucción crea un enlace. Este enlace se ejecuta una función de JavaScript que activa el menú vertical izquierdo encendido y apagado. Tenga en cuenta que la declaración pasa el ID del div contenedor del menú. La siguiente sentencia crea el contenedor div que contiene el menú. El valor de ID de div es "MenuContainer." Las declaraciones finales crean la lista desordenada. Cada elemento de la lista, li, en la lista contiene una etiqueta de ancla que crea un vínculo. Reemplazar "Añadir enlace aquí" con las URL de las páginas que existen en su página web o en otro lugar en la web.

3 Agregue el código CSS se muestra a continuación a la sección de estilo del documento:

MenuContainer

{
display: none;
}

ul # menu
{
Anchura: 100px; margin-left: 10px; frontera de estilo: punteado; border-width: 2px; border-color: marrón;
}

li menu1

{
bloqueo de pantalla; list-style-type: none; color azul;
}

menu1 un {

text-decoration: none;
}

menu1 a: hover {

text-decoration: underline; background-color: amarillo;
}

El primer selector CSS establece la propiedad de visualización del contenedor a "ninguno". Esto hace que el menú invisible cuando se carga la página Web. El selector # ul menú define la forma en que desea que el menú para mirar. En este ejemplo, los atributos establecidos en el margen, estilo y color del borde fronterizo de menú al valor mostrado. El selector # menu1 li establece el atributo de visualización de los elementos de la lista a "bloque". Hacer esto hace que aparecen verticalmente hacia abajo en la página. Si no incluye este valor, los elementos de menú aparecerían horizontalmente a través de la página. El valor de tipo list-style atributo 'es "ninguna". Esto elimina las balas que normalmente aparecen al principio de elementos de la lista. El color: Azul atributo establece el color de los elementos de menú a azul. Cambiar el color de lo que quiera. El siguiente selector CSS, # menu1 una, elimina los subrayados que aparecen debajo de los enlaces por defecto. El selector de final hace aparecer el subrayado y cambia el color de fondo de un elemento a amarillo cuando se mueve el puntero del ratón sobre el elemento.

4 Pega el siguiente función JavaScript bajo el código que agregó en el paso anterior ::

función manageMenu (MenuID) {
var menuObject = document.getElementById (MenuID);

si (== menuObject.style.display "ninguna" || menuObject.style.display == "")
menuObject.style.display = "bloque";

otra cosa menuObject.style.display = "none";
}

Esta función recupera el ID del contenedor pasa a la función cuando se hace clic en el enlace "Activar menú" enlace. El código a continuación, establece el estilo de visualización del contenedor para "bloquear" si es "ninguno" y "ninguno" si se trata de "bloqueo". Esto causa el menú para desplegar y contraer al hacer clic en el enlace.

5 Guarde el documento HTML y abrirlo en su navegador. Haga clic en el enlace "Ver elementos de menú". El código se ejecuta y muestra el menú desplegable de la izquierda.

Consejos y advertencias

• Cuando la construcción de sus propios menús desplegables verticales izquierdas, sustituir los enlaces que se muestran en este ejemplo con sus propias direcciones URL, que apuntan a ubicaciones en la Web que son relevantes para usted. También puede probar diferentes estilos de lista mediante el uso de diferentes valores para el color, relleno, márgenes, frontera de fuente y otros atributos en la sección de estilo CSS.