Barra de navegación CSS
Demostración: Barras de navegación
Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS puede transformar menús HTML aburridos en atractivas barras de navegación.
Barra de navegación = Lista de enlaces
Una barra de navegación necesita HTML estándar como base.
En nuestros ejemplos construiremos la barra de navegación a partir de una lista HTML estándar.
Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene mucho sentido:
Ejemplo
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Ahora eliminemos las viñetas, los márgenes y el relleno de la lista:
Ejemplo
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Ejemplo explicado:
list-style-type: none;
- Elimina las balas. Una barra de navegación no necesita marcadores de lista- Establecer
margin: 0;
ypadding: 0;
eliminar la configuración predeterminada del navegador
El código del ejemplo anterior es el código estándar que se usa en las barras de navegación verticales y horizontales, sobre el que aprenderá más en los próximos capítulos.