Tener una barra de navegacion en un sitio web o sistema, es importante
Los enlaces de las barras nos llevan al sitio o pagina que nosotros queramos
Para hacer una barra de navegacion no tenemos que hacer nada mas que una lista de enlaces
Codigo
<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:
...
- list-style-type: none; - Elimina las balas. Una barra de navegación no necesita marcadores de lista
- margin: 0;y padding: 0; para eliminar la configuración predeterminada del navegador
Barra de navegación vertical
La barra vertical ya la tenemos, nos falta apenas dar algunos estilos mas para quedar con mejor aparencia
A la etiqueta a le adicione 3 estilos:
- display-block Mostrar los enlaces como elementos de bloque
- width: 80px; Un ancho
- background-color: greenyellow; un color de fondo
Codigo de los estilos
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;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Navbar horizontal
La misma lista anterior, solo con poner-le el estilo display:inline a las etiquetas li los elementos se cambiaran de posicion
ya tenemos la barra en la horizontal, solo nos falta dar alguns estilos mas para quedar bien apresentable
Como vemos dependiendo de ls estilos que le demos asi se queda nuestra barra de navegacion, navbar
Si queremos que cambie de color al pasar el rato le pondremos uno estilo mas que es lo seguiente:
li a:hover {
background-color: #111;
}
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias