ubiquitour.com

Cómo hacer una barra de navegación desplegable

Cómo hacer una barra de navegación desplegable

Barras de navegación son uno de los elementos más críticos en un sitio Web. Sitios con contenido extenso pueden ser difíciles de atravesar. Una barra de navegación bien estructurado es esencial para hacer más fácil para los visitantes a encontrar contenido relevante. Usar barras de navegación para presentar todas las páginas principales y categorías de su sitio. Seguir algunas pautas para crear un menú desplegable de navegación usando HTML y CSS de la barra.

Instrucciones

Crear el menú en HTML

1 Crear el div contenedor que albergará su barra de navegación. Dar tu div de navegación una identificación única, como "nav_menu":

< div id = "nav_menu" >

< / div >

2 Crear la lista desordenada que envolverá sus elementos de lista individuales. Dar esta lista desordenada una identificación, como "navegación":

< div id = "nav_menu" >

< ul id = "navegación" >

< /ul >

< / div >

3 Crear elementos de lista para cada uno de los productos en la barra de navegación. Envuelva cada artículo en una apertura y tag de cierre "li", así como una etiqueta de ancla para enlazar cada elemento a una página en su sitio de Internet:

< div id = "nav_menu" >

< ul id = "navegación" >

< li >

&lt;a href="testpage.html">

This is a test page

&lt;/a>

< /li >

< /ul >

< / div >

4 Crear una lista desordenada de sus subpáginas. Coloque la nueva lista desordenada directamente antes de la etiqueta de cierre < /li > de la Página principal:

< div id = "nav_menu" >

< ul id = "navegación" >

< li >

&lt;a href="testpage.html">

This is a test page

&lt;/a>

&lt;ul>

&lt;/ul>

< /li >

< /ul >

< / div >

5 Crear elementos de lista para cada una de sus subpáginas. Coloque estos artículos de la lista dentro de la lista desordenada que creó en el paso 4:

< div id = "nav_menu" >

< ul id = "navegación" >

&lt;li>

&lt;a href="testpage.html">

This is a test page

&lt;/a>

&lt;ul>

&lt;li>

&lt;a href="subpage.html">

This is a sub page

&lt;/a>

&lt;/li>

&lt;/ul>

< /li >

< /ul >

< / div >

Creación de CSS para controlar el menú de

6 Abra las hojas estilo en cascada (CSS) de su página Web. Crear una nueva entrada para el div contenedor que creó para su menú de navegación en la sección 1, paso 1 de la casa:

{nav_menu} }

Dar su contenedor div Mostrar y fija estilos de ancho. Elegir un ancho que cabe dentro del contenedor principal de la página. Aquí está un ejemplo de un menú que es 900 píxeles de ancho:

{nav_menu} Mostrar: bloquear;

width: 900px;

}

7 Crear una entrada para la lista desordenada de la sección 1, paso 2 en el archivo CSS:

navegación {} }

Establecer su lista desordenada márgenes a "0" y su estilo de lista en "ninguno":

navegación {} lista estilo: ninguno;

margen: 0;

}

8 Crear una entrada para los elementos de la lista principal de la sección 1, paso 3 en el archivo CSS:

navegación li {} }

Definir sus elementos de lista para flotar a la izquierda y tienen un ancho fijo de tu elección:

navegación li {} flotante: izquierda;

width: 200px;

}

9 Crear una entrada para las listas sin ordenar secundarias que contienen sus páginas de sub:

navegación li ul {} }

Establecer los valores de estilo de pantalla y lista a "ninguno":

navegación li ul {} Mostrar: ninguno;

lista estilo: ninguno;

}

10 Crear una entrada para ti secundarias listas sin ordenar y cómo ellos deben comportarse cuando su elemento padre es sobrevolado:

navegación li:hover ul {} }

Establecer el valor de la pantalla de la lista no ordenada secundaria para "bloquear":

navegación li:hover ul {} Display: block;

}

11 Guardar los archivos y subirlos a su servidor.

Consejos y advertencias

  • Se trata de un menú muy básico. Añadir colores y estilos adicionales a su barra de navegación y su contenido para complementar el tema de su sitio web existente.
  • Asegúrese de que su página Web tiene un tipo DOC válido, que puede evitar que el menú funciona en algunas versiones de Internet Explorer.