Después de leer este artículo, podrá crear su propia barra de navegación vertical. Para seguir este artículo, solo necesita algunos conocimientos básicos de HTML y CSS.
Comencemos a escribir nuestra barra de navegación vertical, primero, escribiremos la estructura de la barra de navegación. En este tutorial, creamos la barra de navegación utilizando un elemento de lista HTML. Usamos 5 íconos impresionantes en la barra de navegación. Para esto, después de la etiqueta «título» hemos agregado la etiqueta «script» para incluir la biblioteca de fuentes impresionantes .
HTML
<!DOCTYPE html> <html> <head> <script src= "https://kit.fontawesome.com/a076d05399.js"> </script> </head> <body> <ul> <li> <a href="#" class="active"> <i class="fas fa-home icon"></i> Home </a> </li> <li><a href="#"> <i class="fas fa-rss icon"></i> News </a> </li> <li><a href="#"> <i class="fas fa-address-book icon"></i> Contact </a> </li> <li><a href="#"><i class="fas fa-user icon"></i> About </a> </li> </ul> </body> </html>
Hemos definido la estructura de la página web mediante HTML. Ahora necesitamos agregar algo de estilo usando las propiedades CSS. Primero, elimine las viñetas, los márgenes y el relleno de la lista. Ahora dé un color de fondo y un ancho específico.
CSS
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: #f1f1f1;
}
</style>
- El tipo de estilo de lista: ninguno; La propiedad elimina las viñetas de la lista HTML.
- El margen: 0; y relleno: 0; elimina el margen predeterminado del navegador y el relleno del elemento.
Para crear una barra de navegación vertical, debe diseñar los elementos <a> dentro de la lista.
CSS
<style>
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* color change on hover */
li a:hover {
background-color: #fad390;
color: #fff;
}
</style>
- La pantalla: bloque; La propiedad que muestra los enlaces como elementos de bloque hace que se pueda hacer clic en el área del enlace. Nos permite especificar el ancho (relleno, margen, altura, etc.)
- relleno: 8px 16px; Los rellenos superior e inferior son 8px. Los rellenos derecho e izquierdo son 16px.
- texto-decoración: ninguno; Eliminar el subrayado de los elementos <a>
CSS
<style>
.icon {
margin-right: 10px;
}
</style>
- margen derecho: 10px; Añade un margen entre el texto y los iconos.
Código final: la siguiente es la combinación de todos los fragmentos de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="
https://kit.fontawesome.com/a076d05399.js">
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
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: #fad390;
color: #fff;
}
.icon {
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="active">
<i class="fas fa-home icon"></i>
Home</a></li>
<li><a href="#">
<i class="fas fa-rss icon"></i>
News</a></li>
<li><a href="#">
<i class="fas fa-address-book icon"></i>
Contact</a></li>
<li><a href="#">
<i class="fas fa-user icon"></i>
About</a></li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por coderabhijit90 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA