Cómo - Mega Menú
Aprenda a crear un mega menú (menú desplegable de ancho completo en una barra de navegación).
Menú Mega
Crear un megamenú
Cree un menú desplegable que aparece cuando el usuario mueve el mouse sobre un elemento dentro de una barra de navegación.
Paso 1) Agregar HTML:
Ejemplo
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega
Menu</h2>
</div>
<div class="row">
<div
class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
Ejemplo explicado
Utilice cualquier elemento para abrir el menú desplegable, por ejemplo, un elemento <button>, <a> o <p>.
Usa un elemento contenedor (como <div class="dropdown-content">) para crear el menú desplegable y agregar una cuadrícula (columnas) y agregar enlaces desplegables dentro de la cuadrícula.
Envuelva un elemento <div class="dropdown"> alrededor del botón y el elemento contenedor (<div class="dropdown-content"> para colocar el menú desplegable correctamente con CSS.
Paso 2) Agregar CSS:
Ejemplo
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
/* Important for vertical align on mobile phones */
margin: 0; /*
Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.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;
}
/* Mega Menu header, if needed */
.dropdown-content
.header {
background: red;
padding: 16px;
color: white;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links
inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background
color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Ejemplo explicado
Hemos diseñado la barra de navegación y los enlaces de la barra de navegación con un color de fondo, relleno, etc.
Hemos diseñado el botón desplegable con un color de fondo, relleno, etc.
La .dropdown-content
clase contiene el menú desplegable real. Está oculto de forma predeterminada y se mostrará al pasar el mouse (ver más abajo). Se coloca para ser visible justo debajo del botón desplegable y el ancho se establece en 100% para cubrir toda la pantalla.
En lugar de usar un borde, hemos usado la box-shadow
propiedad para hacer que el menú desplegable parezca una "tarjeta". También usamos el índice z para colocar el menú desplegable frente a otros elementos.
El :hover
selector se usa para mostrar el menú desplegable cuando el usuario mueve el mouse sobre el botón desplegable.
Las .column
clases se utilizan para crear tres columnas que flotan una al lado de la otra dentro del menú desplegable (para mostrar diferentes categorías).
Mega menú receptivo
Ejemplo
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height:
auto;
}
}
Sugerencia: vaya a nuestro tutorial de menús desplegables de CSS para obtener más información sobre los menús desplegables.
Sugerencia: vaya a nuestros menús desplegables en los que se puede hacer clic para obtener más información sobre los menús desplegables en los que se puede hacer clic.
Sugerencia: vaya a nuestro Tutorial de barra de navegación CSS para obtener más información sobre las barras de navegación.
Sugerencia: vaya a nuestra Navegación superior receptiva para obtener información sobre cómo crear una barra de navegación receptiva.