Cómo hacer un menú oculto con JavaScript

El lenguaje JavaScript le permite mostrar y ocultar elementos de menú de forma dinámica cuando un usuario realiza una acción como hacer clic en un botón. La propiedad JavaScript "estilo" le da la capacidad de ocultar un menú. Utilice los menús ocultos para ocultar y mostrar los enlaces de navegación en sus páginas Web. Encerrar el código de menú dentro de un contenedor div rodeándolo con las etiquetas "div". Aplicar la propiedad "visibilidad" de estilo CSS para ocultar y mostrar los elementos del menú.

Instrucciones

1 Haga clic en el archivo HTML que desea editar y seleccione "Abrir con". Haga clic en el editor HTML de su elección en la lista de programas que se despliega. Si usted no tiene instalado un editor, haga clic en "Bloc de notas", que se incluye con Windows.

2 Añadir una etiqueta div que contiene los elementos de menú. Escriba el siguiente código al principio de los elementos del menú:

<Div id = "Menú">

Agregue el código siguiente al final del menú:

</ Div>

La apertura y cierre de etiquetas div contienen los elementos de menú, por lo que puede utilizar el div para ocultar el contenido del menú.

3 Agregue el código siguiente a la etiqueta div que creó en el paso dos:

style = "visibility: hidden"

El código anterior se esconde todo el menú. Si coloca este código en sólo una parte del menú, sólo una parte de su menú está oculta.

4 Agregue el código siguiente en el archivo HTML:

<Script type = "text / javascript">

OcultarMostrar función () {

si (document.getElementById ( "menú"). style.visibility = "oculto") {

document.getElementById ( "menú"). style.visibility = "visible"}

else {

document.getElementById ( "menú"). style.visibility = "oculto"

}

}

</ Script>

La función de JavaScript oculta el menú si es visible y muestra el menú si está oculto.

5 Vincular la nueva función de JavaScript a un botón. El botón muestra u oculta el menú, dependiendo del estado actual del menú. Agregue el código siguiente a la página:

<Input type = "button" onclick = "OcultarMostrar ()" value = "Mostrar u ocultar Menú">

6 Guarde los cambios y abrir el archivo en el explorador Web. El menú está oculta de manera predeterminada. Haga clic en el botón para mostrar el menú. Haga clic en el botón de nuevo para ocultar el menú.

Consejos y advertencias

• Debe cargar los cambios al código de su proveedor de alojamiento web para promover los cambios en el servidor en vivo.