Cómo crear: Barra de navegación superior responsive

Aprende a crear una barra de navegación superior responsive utilizando CSS y JavaScript.

Crear un menú de navegación superior responsive

Primer paso - Añadir HTML:

/* Cargar la biblioteca de iconos para mostrar el menú hamburguesa en pantallas pequeñas */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Inicio</a>
  <a href="#news">Noticias</a>
  <a href="#contact">Contacto</a>
  <a href="#about">Acerca de</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Los enlaces con clase "icon" se utilizan para abrir y cerrar la barra de navegación en pantallas pequeñas.

Segundo paso - Añadir CSS:

/* Añadir un fondo negro a la barra de navegación superior */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Establecer el estilo de los enlaces en la barra de navegación */
.topnav a {
  float: left;
  mostrar: bloque;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  decoración de texto: ninguna;
  tamaño de fuente: 17px;
}
/* Cambiar el color del enlace al pasar el ratón por encima */
.topnav a:hover {
  color de fondo: #ddd;
  color: negro;
}
/* Añadir una clase activa para resaltar la página actual */
.topnav a.active {
  color de fondo: #04AA6D;
  color: blanco;
}
/* Ocultar el enlace utilizado para abrir y cerrar la navegación superior en pantallas pequeñas */
.topnav .icon {
  mostrar: ninguno;
}

Añadir consulta de medios:

/* Al tener un ancho de pantalla menor de 600 píxeles, ocultar todos los enlaces excepto el primero ("Inicio") y mostrar el enlace que abre y cierra la navegación superior (.icon) */
@media pantalla y (ancho máximo: 600px) {
  .topnav a:not(:first-child) {mostrar: ninguno;}
  .topnav a.icon {
    flotar: derecha;
    mostrar: bloque;
  }
}
/* Al hacer clic en el ícono, JavaScript agregará la clase "responsive" a topnav. Esta clase hace que topnav se vea mejor en pantallas pequeñas (muestra los enlaces verticalmente en lugar de horizontalmente) */
@media pantalla y (ancho máximo: 600px) {
  .topnav.responsive {posición: relativa;}
  .topnav.responsive a.icon {
    posición: absoluta;
    derecha: 0;
    arriba: 0;
  }
  .topnav.responsive a {
    flotar: ninguno;
    mostrar: bloque;
    alineación de texto: izquierda;
  }
}

Tercero - Añadir JavaScript:

/* Al hacer clic en el ícono, alternar entre agregar y eliminar la clase "responsive" en topnav */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Barra de navegación CSS