Día 68: CSS Vertical Navbar

Barra de navegación vertical

Para crear una barra de navegación vertical, puedes diseñar los elementos <a> dentro de una lista (li), además del código de la página anterior:

Ejemplo:

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 desea)

• 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:

Ejemplo:

Ejemplos - barra de navegación vertical

Cree una barra de navegación vertical básica con un color de fondo gris y cambie el color de fondo de los enlaces cuando el usuario mueva el mouse sobre ellos:

Ejemplo:

Enlace de navegación active/current

Agregue una clase active al enlace actual para que el usuario sepa en qué página se encuentra:

Ejemplo:

Centrar enlaces y agregar bordes

Agregue text-align:center a <li> o <a> para centrar los enlaces.

Agregue la propiedad border a <ul>, agregue un borde alrededor de la barra de navegación. Si también desea bordes dentro de la barra de navegación, agregue border-bottom a todos los elementos <li>, excepto al último:

Ejemplo:

Barra de navegación vertical fija de altura completa

Cree una navegación lateral sticky de altura completa:

Ejemplo:

Nota: Es posible que este ejemplo no funcione correctamente en dispositivos móviles.

Resumen

Este artículo muestra cómo crear una barra de navegación vertical en CSS, con ejemplos que incluyen agregar un color de fondo y cambiar el color de fondo de los enlaces al pasar el mouse sobre ellos, agregar una clase active al enlace actual, centrar enlaces y agregar bordes, y crear una barra de navegación vertical fija de altura completa.

Traducido con 💚 desde W3Schools.com