Barra de navegación horizontal de CSS

Barra de navegación horizontal

Hay dos métodos para crear una barra de navegación horizontal: usarEn líneaoFlotanteElementos.

Elementos de lista en línea

Un método para construir una barra de navegación horizontal es, además del código "estándar" del capítulo anterior, especificar los elementos <li> como inline:

Ejemplo

li {
  display: inline;
}

Pruebe personalmente

Ejemplo de explicación:

display: inline; - Por defecto, los elementos <li> son elementos de bloque. Aquí, eliminamos los saltos de línea antes y después de cada lista para que se muestren en una sola línea.

Elementos de lista flotantes

Otra manera de crear una barra de navegación horizontal es flotar los elementos <li> y definir el diseño de los enlaces de navegación:

Ejemplo

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Pruebe personalmente

Ejemplo de explicación:

  • float: left; - Utilice float para que los elementos de bloque se deslizen uno al lado del otro
  • display: block; - Al mostrar los enlaces como elementos de bloque, toda la área del enlace se puede hacer clic (no solo el texto), y permite especificar el relleno (si es necesario, también la altura, anchura, margen, etc.)
  • padding: 8px; - Haga que los elementos de bloque sean más atractivos
  • background-color: #dddddd; - Añada un fondo de color gris a cada elemento

Consejo:Si desea un fondo de ancho completo, agregue background-color a <ul> en lugar de a cada elemento <a>:

Ejemplo

ul {
  background-color: #dddddd;
}

Pruebe personalmente

Ejemplo de barra de navegación horizontal

Cree una barra de navegación horizontal de fondo oscuro y cambie el color de fondo del enlace cuando el usuario lo coloque sobre él:

Ejemplo

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Cambiar el color del enlace a #111 (negro) al pasar el ratón */
li a:hover {
  background-color: #111;
}

Pruebe personalmente

Enlace de navegación activo/actual

Añadir la clase "active" al enlace actual para que el usuario sepa en qué página se encuentra:

Ejemplo

.active {
  background-color: #4CAF50;
}

Pruebe personalmente

Alinear a la derecha los enlaces

Alinear a la derecha los enlaces flotando los elementos de la lista (float:right;）：

Ejemplo

<ul>
  <li><a href="#home">Inicio</a></li>
  <li><a href="#news">Noticias</a></li>
  <li><a href="#contact">Contacto</a></li>
  <li style="float:right"><a class="active" href="#about">Acerca de</a></li>
</ul>

Pruebe personalmente

separador de bordes

Añadir border-right Añadir el atributo a <li> para crear un separador de enlaces:

Ejemplo

/* Añadir un borde derecho gris a todos los elementos de lista, excepto al último (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Pruebe personalmente

Barra de navegación fija

Mantener la barra de navegación en la parte superior o inferior de la página, incluso si el usuario desplaza la página:

Fijo en la parte superior

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Pruebe personalmente

Fijo en la parte inferior

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Pruebe personalmente

Nota:La posición fija puede no funcionar correctamente en dispositivos móviles.

Barra de navegación horizontal gris

Ejemplo de barra de navegación horizontal gris con borde fino

Ejemplo

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Pruebe personalmente

Barra de navegación adhesiva

Añadir a <ul> position: sticky;para crear una barra de navegación adhesiva.

Los elementos adhesivos cambian entre relativo y fijo según la posición de desplazamiento. Es relativo hasta que encuentra la posición de desplazamiento dada en la vista - luego lo "pegará" en la posición adecuada (por ejemplo, position:fixed).

Ejemplo

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Pruebe personalmente

Nota:Internet Explorer, Edge 15 y versiones anteriores no admiten la posición pegajosa. Safari requiere el prefijo -webkit- (véase el ejemplo anterior). También debe especificar top,right,bottom o left Al menos uno, para que la posición pegajosa funcione.

Más ejemplos

Barra de navegación superior responsiva
Cómo usar consultas de medios CSS para crear una barra de navegación superior responsiva.
Barra lateral de navegación responsiva
Cómo usar consultas de medios CSS para crear una barra lateral de navegación responsiva.
Barra de navegación desplegable
Cómo agregar menús desplegables en la barra de navegación.