Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web. Con CSS puedes transformar menús HTML aburridos en atractivas barras de navegación.
Barras 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.
Ejm
<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, para ello utilizamos el siguiente código.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Ejm explicado:
- list-style-type: none: – Elimina el marcador de lista. Una barra de navegación no necesita marcadores de lista.
- Establecer margin: 0; y padding: 0; para 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.
Barra de navegación vertical
Para crear una barra de navegación vertical, puedes diseñar los elementos <a> dentro de la lista.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #ddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
</ul>
</body>
</html>
Ejemplo explicado
- display: block – Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en toda el área del enlace (no solo en el texto), y nos permite especificar el ancho (y el relleno, el margen, la altura, etc., si lo deseas).
- width: 60px – Los elementos de bloque ocupan todo el ancho disponible de forma predeterminada. Queremos especificar un ancho de 60 píxeles..
También puedes establecer el ancho de <ul> y eliminar el ancho de <a>, ya que ocuparán todo el ancho disponible cuando se muestren como elementos de bloque. Esto producirá el mismo resultado que nuestro ejemplo anterior.
Ejm
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Ejm 1 de barra de navegación vertical
El código CSS que utilizaremos será el siguiente:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
Ejm 2 – Enlace de navegación activo/actual
Agrega una clase «active» al enlace actual para que el usuario sepa en qué página se encuentra:
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Barra de navegación vertical</h2>
<p>En este ejemplo, creamos una clase "active" con un verde
color de fondo y un texto en blanco. La clase se agrega al enlace "Home".</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>
</body>
</html>
Centrar los enlaces y añadir bordes
Añade a <li> o a <a> el atributo text-align: center para centrar los enlaces. Agrega la propiedad border a <ul>, agrega un borde alrededor de la barra de navegación. Si también deseas bordes dentro de la barra de navegación, agrega un borde inferior a todos los elementos <li>, excepto al último.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Barra de navegación vertical</h2>
<p>En este ejemplo, centramos los enlaces de navegación
y agregamos un borde a la barra de navegación.</p>
<ul>
<li><a class="active" 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>
Barra de navegación vertical fija de altura completa
Veamos un ejemplo de barra de navegación vertical fija.