Cómo crear: Menú grande

Aprende a crear un menú grande (un menú desplegable de ancho completo en la barra de navegación).

Crea un menú grande

Crea un menú desplegable que se muestra cuando el usuario pasa el ratón sobre un elemento de la barra de navegación.

Paso 1 - Añadir HTML：

<div class="navbar">
  <a href="#home">Inicio</a>
  <a href="#news">Noticias</a>
  <div class="dropdown">
    <button class="dropbtn">Desplegable</button>
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Menú Mega</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Categoría 1</h3>
          <a href="#">Enlace 1</a>
          <a href="#">Enlace 2</a>
          <a href="#">Enlace 3</a>
        </div>
        <div class="column">
          <h3>Categoría 2</h3>
          <a href="#">Enlace 1</a>
          <a href="#">Enlace 2</a>
          <a href="#">Enlace 3</a>
        </div>
        <div class="column">
          <h3>Categoría 3</h3>
          <a href="#">Enlace 1</a>
          <a href="#">Enlace 2</a>
          <a href="#">Enlace 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Ejemplo de explicación:

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

Crea el menú desplegable utilizando el elemento contenedor (como <div class="dropdown-content">), agrega una cuadrícula (columnas) y luego añade los enlaces del menú dentro de la cuadrícula.

Utiliza el elemento <div class="dropdown"> para envolver el botón y el elemento contenedor (como <div class="dropdown-content">) para posicionar correctamente el menú desplegable con CSS.

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 del menú desplegable */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Botón del menú desplegable */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Es importante para la alineación vertical en dispositivos móviles */
  margin: 0; /* Es importante para la alineación vertical en dispositivos móviles */
}
/* Añade fondo rojo a los enlaces del menú de navegación al pasar el ratón por encima */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Contenido de la lista desplegable (oculto por defecto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Título grande del menú (si es necesario) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Muestra el menú desplegable al pasar el ratón */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Crea tres columnas iguales y las hace flotar en paralelo */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Establece estilos para los enlaces dentro de la columna */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Añade color de fondo al pasar el ratón */
.column a:hover {
  background-color: #ddd;
}
/* Elimina el flotamiento después de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Prueba por ti mismo

Ejemplo de explicación:

Hemos establecido estilos de fondo de color, márgenes internos, etc., para la barra de navegación y los enlaces de navegación.

Hemos establecido estilos de fondo de color, márgenes internos, etc., para el botón del menú desplegable.

.dropdown-content La clase contiene el menú desplegable real. Por defecto, está oculto y se muestra al pasar el ratón (ver a continuación). Se ubica justo debajo del botón del menú desplegable y su anchura se establece en 100%, para cubrir toda la pantalla.

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

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

.column La clase se utiliza para crear tres columnas flotantes alineadas en paralelo dentro del menú desplegable (para mostrar diferentes categorías).

Páginas relacionadas

Tutoriales:menú desplegable de CSS

Tutoriales:¿Cómo crear un menú desplegable clicable?

Tutoriales:barra de navegación de CSS

Tutoriales:¿Cómo crear una barra de navegación superior responsiva?