CAPÍTULO XIX. MENÚS.
Un menú o barra de navegación no es más que una barra de enlaces, por lo que suelen utilizarse las etiquetas <ul> y <li>:
<ul>
<li><a href="...">Inicio</a></li>
<li><a href="...">Noticias</a></li>
<li><a href="...">Contacto</a></li>
Etc.
</ul>
Una vez creados los enlaces, debemos aplicar estilo a nuestra barra de navegación mediante CSS. Una de las cosas que se suele hacer es eliminar los marcadores de la lista y quitar la configuración por defecto del navegador en cuanto a márgenes:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Barra de navegación o menú vertical
Para construir una barra de navegación vertical, podemos también dar estilo a los elementos <a> dentro de la lista:
li a {
display: block;
width: 60px;
}
display: block; permite la visualización de los enlaces como elementos de bloque, para que se pueda hacer clic en toda la zona ocupada por el bloque (no sólo sobre el texto) y poder además especificar el ancho (y el relleno, margen, altura, etc. si quieres).
width: 60px; los elementos de bloque ocupan todo el ancho disponible de forma predeterminada, de esta manera queremos especificar un ancho de 60 píxeles.
También se puede establecer la anchura del elemento <ul>, esto producirá el mismo resultado que el ejemplo anterior:ul {
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Ejemplo de menú vertical:
Es interesante añadir el código necesario para que se muestre de alguna manera el enlace que se encuentre activo y que el usuario sepa en qué página se encuentra:
Por otro lado, se puede añadir text-align:center a <li> para centrar los enlaces y border a <ul> para incluir un borde general alrededor del menú, más border-bottom a <li> para añadir bordes a cada uno de los ítems de la lista (a todos menos al último):
li {
display: inline;
}
Barra de navegación o menú horizontal
Una forma de construir una barra de navegación horizontal es especificar los elementos <li> como en línea:
Por defecto, los elementos <li> son de bloque. Con display:inline se eliminan los saltos de línea antes y después de cada elemento de la lista, para mostrarlos en una sola línea.
Otra forma de crear una barra de navegación horizontal es "flotar" los <li>elementos y especificar un diseño para el menú de navegación:
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Consejo. Añade el color de fondo a <ul> en lugar de a cada elemento <a> si quieres un color de fondo de ancho completo:
ul {
background-color: #dddddd;
}
Ejemplo de menú horizontal:
