Cómo crear: barra de navegación con menú desplegable

Página anterior menú desplegable en cascada
página siguiente menú desplegable en la barra de navegación lateral

Aprenda a crear una barra de navegación con menú desplegable.

Menú desplegable en la barra de navegación

Crear una barra de navegación con menú desplegable

Al pasar el ratón sobre un elemento dentro de la barra de navegación, aparecerá un menú desplegable.

Primer paso - Añadir HTML:

<div class="navbar">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <div class="dropdown">
    <button class="dropbtn">Desplegable
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Enlace 1</a>
      <a href="#">Enlace 2</a>
      <a href="#">Enlace 3</a>
    </div>
  </div>
</div>

Ejemplo de explicación:

Use cualquier elemento para abrir el menú desplegable, por ejemplo <button>, <a> o elemento <p>.

Cree un menú desplegable usando un elemento contenedor (como <div>) y agregue enlaces de menú desplegable.

Envuelva el botón y otro elemento <div> para usar CSS para posicionar correctamente el menú desplegable.

Segundo paso - Añadir CSS:

/* Contenedor de la barra de navegación */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Enlaces dentro de la barra de navegación */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Contenedor desplegable */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Botón desplegable */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Muy importante para alineación vertical en teléfonos */
  margin: 0; /* Importante para alineación vertical en móviles */
}
/* Añade un fondo de color rojo a los enlaces de la barra de navegación al pasar el mouse */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Contenido del menú desplegable (oculto por defecto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Enlaces en el menú desplegable */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Añade un fondo de color gris al enlace del menú desplegable al pasar el mouse */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Muestra el menú desplegable al pasar el mouse */
.dropdown:hover .dropdown-content {
  display: block;
}

Prueba por ti mismo

Ejemplo de explicación:

Ya hemos establecido estilos como color de fondo, margen interno para los enlaces de la barra de navegación.

Ya hemos establecido estilos como color de fondo, margen interno para el botón del menú desplegable.

.dropdown clase es .dropdown-content contenedor. Ya que es un elemento <div> y no un elemento <a>, debemos hacerlo flotar para asegurarnos de que se quede al lado del enlace.

.dropdown-content clase que contiene el menú desplegable real. Por defecto, está oculto y se mostrará al pasar el mouse (ver a continuación). Nota: el ancho mínimo se establece en 160px. Puedes cambiar este ajuste libremente.

No usamos bordes, sino que usamos box-shadow La propiedad hace que el menú desplegable se vea como una 'tarjeta'. También usamos z-index Coloca el menú desplegable delante de otros elementos.

:hover El selector se utiliza para mostrar el menú desplegable cuando el usuario coloca el mouse sobre el botón del menú desplegable.