Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS puedes transformar aburridos menús HTML en atractivas barras de navegación.
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> es perfecto. sentido:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Ahora eliminemos las viñetas, los márgenes y el relleno de la lista:
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Ejemplo explicado:
list-style-type: none;- Elimina las balas. Una barra de navegación no necesita marcadores de lista.
margin: 0;para eliminar la configuración predeterminada del navegador
padding: 0;para eliminar la configuración predeterminada del navegador
El código del ejemplo anterior es el código estándar utilizado en las barras de navegación verticales y horizontales, sobre el cual aprenderá más en los próximos capítulos.