Barra de navegación vertical de CSS

Recomendaciones de cursos:

Barra de navegación vertical

Ejemplo

width: 200px;
  li a {
  También puede establecer el ancho de <ul> y eliminar el ancho de <a>, ya que cuando se muestra como elemento de bloque, ocuparán todo el ancho disponible. Esto dará el mismo resultado que en nuestros ejemplos anteriores:
}

Prueba personalmente

Para construir una barra de navegación vertical, además del código del capítulo anterior, también puede establecer el estilo de los elementos <a> en la lista:

  • li a { Ejemplo de explicación:
  • También puede establecer el ancho de <ul> y eliminar el ancho de <a>, ya que cuando se muestra como elemento de bloque, ocuparán todo el ancho disponible. Esto dará el mismo resultado que en nuestros ejemplos anteriores: - Al mostrar los enlaces como elementos de bloque, se puede hacer clic en toda la área del enlace (y no solo el texto), y también se puede especificar el ancho (si es necesario, también el relleno, el margen, la altura, etc.).

- Por defecto, los elementos de bloque ocupan todo el ancho disponible. Necesitamos especificar un ancho de 60 píxeles.

Ejemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  También puede establecer el ancho de <ul> y eliminar el ancho de <a>, ya que cuando se muestra como elemento de bloque, ocuparán todo el ancho disponible. Esto dará el mismo resultado que en nuestros ejemplos anteriores:
} 
width: 200px;
  li a {
}

Prueba personalmente

width: 60px;

Ejemplo de barra de navegación vertical

Ejemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Cree una barra de navegación vertical de fondo gris y cambie el color de fondo del enlace cuando el usuario mueva el ratón sobre él:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Cambiar el color del enlace al pasar el ratón */
  li a:hover {
  background-color: #4CAF50;
}

Prueba personalmente

background-color: #555;

enlace de navegación activo/actual

Ejemplo

Agregue la clase "active" al enlace actual para que el usuario sepa en qué página se encuentra:
  .active {
  background-color: #4CAF50;
}

Prueba personalmente

color: white;

Centrar los enlaces y agregar un borde text-align:center a <li> o <a> para centrar los enlaces.

Agregue border Agregue la propiedad a <ul> para agregar un borde alrededor de la barra de navegación. Si también desea agregar un borde dentro de la barra de navegación, agregue border-bottomexcepto el último elemento:

Ejemplo

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Prueba personalmente

Barra de navegación vertical fija completa

Crea una navegación lateral de altura completa "adhesiva":

Ejemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Altura completa */
  position: fixed; /* Hace que sea adhesivo, incluso mientras se desplaza */
  overflow: auto; /* Habilita la barra de desplazamiento si el contenido del lado izquierdo es demasiado largo */
}

Prueba personalmente

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