Cómo hacerlo: barra de navegación desplegable
Aprenda a crear una barra de navegación desplegable.
Menú desplegable en la barra de navegación
Crear una barra de navegación desplegable
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">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
Ejemplo explicado
Utilice cualquier elemento para abrir el menú desplegable, por ejemplo, un elemento <button>, <a> o <p>.
Use un elemento contenedor (como <div>) para crear el menú desplegable y agregue los enlaces desplegables dentro de él.
Envuelva un elemento <div> alrededor del botón y el <div> para posicionar 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-family:
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;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links
on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
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
clase es el contenedor de
.dropdown-content
. Dado que este es un elemento <div> y no un elemento <a>, tenemos que flotarlo para asegurarnos de que permanezca junto a los enlaces.
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). Tenga en cuenta min-width
que está configurado en 160px. Siéntete libre de cambiar esto.
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.
Menú desplegable en el que se puede hacer clic en la barra de navegación
Ejemplo
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.