Los menús desplegables son una de las partes más importantes de un sitio web interactivo. CSS se utiliza para diseñar los menús desplegables. Un menú desplegable es un conjunto de listas debajo de una lista desordenada, es decir, <ul>, como se le conoce popularmente en el mundo HTML. Etiquetas de lista anidada (<li>) bajo la etiqueta <ul> usadas para crear una estructura desplegable. Para resaltar los efectos, use CSS para los componentes presentes en la estructura. El CSS es una propiedad muy sencilla que se utiliza para crear el menú desplegable.
<!DOCTYPE html> <html> <head> <title>Dropdown property</title> </head> <body> <nav> <ul> <li class="Lev-1"> <a href="">Level-1</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> </ul> </nav> </body> </html>
Producción:
Ejemplo: agregar la propiedad CSS en la estructura HTML para crear una estructura desplegable interactiva.
<!DOCTYPE html>
<html>
<head>
<title>Navigation property</title>
<style>
a {
color: white;
background-color:#990;
text-decoration: none;
}
nav{
background: #333;
}
nav >ul{ margin: 0 auto; width: 80px; }
nav ul li{
display: block;
float: left;
margin-left:-40px;
position: relative;
}
nav ul a{
display: block;
float: left;
width: 150px;
padding: 10px 20px;
}
nav ul a:hover{
background: #090;
}
nav ul li ul li{
float: none;
}
nav ul li ul{
display: none;
position: absolute;
background: #333;
top: 42px;
}
nav ul li:hover>ul{
display: block;
}
nav ul li a{
display: block;
}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Dropdown Navigation property</p>
<nav>
<ul>
<li class="Lev-1">
<a href="">Level-1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Producción:
El código escrito anteriormente produce una salida adecuada sobre la base de una estructura desplegable. Las partes importantes del código HTML se analizan a continuación:
- nav es el contenedor más externo
- nav ul li ul li – float se establece en none para que permanezca intacto cuando pasemos el mouse sobre él.
- Use la posición relativa para que li se mueva o cambie su posición en relación con su componente.
- Use ‘>’ después de pasar el mouse para ver el efecto de pasar el mouse sobre el siguiente ul inmediato del li.
Menú desplegable alineado a la derecha : el menú desplegable alineado a la derecha es un menú desplegable cuyo valor flotante es correcto para mostrar el contenido desplegable en la pantalla derecha. Agregue float a la derecha del div que contiene el contenido.
<!DOCTYPE html>
<html>
<head>
<title>right-aligned dropdown content property</title>
<style>
#drop {
background-color: teal;
color: white;
padding: 10px;
font-size: 16px;
width: : 200px;
height: : 60px;
border-radius: 5px;
font-size: 20px;
}
#drop-down {
position: relative;
display: inline-block;
}
#dropdown-menu {
display: none;
position: absolute;
background-color: #666;
width: 160px;
margin-left:-45px;
border-radius: 5px;
z-index: 1;
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
#dropdown-menu a:hover {background-color: #ddd;}
#drop-down:hover #dropdown-menu {display: block;}
</style>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Right-aligned Dropdown content property</p>
<div id="drop-down" style=" float: right; margin-right: 70px;">
<button id="drop">DropDown</button>
<div id="dropdown-menu">
<a href="">Item 1</a>
<a href="">Item 2</a>
<a href="">Item 3</a>
<a href="">Item 4</a>
</div>
</div>
</body>
</html>
Producción:
Desplegable de imagen: no es un menú desplegable, pero amplía la imagen sobre la que se desplaza. Necesita CSS básico y una imagen para que funcione.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Image Dropdown</title>
<style>
.dropmenu {
position: relative;
display: inline-block;
margin-left:150px;
}
.sub-dropmenu {
display: none;
position: absolute;
}
.dropmenu:hover .sub-dropmenu {
display: block;
}
.enlarge {
padding: 15px;
text-align: center;
}
.gfg {
margin-left:40px;
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "gfg">Image Dropdown property</div>
<div class="dropmenu">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
width="150" height="50" align="middle">
<div class="sub-dropmenu">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
width="600" height="200">
</div>
</div>
</body>
</html>
Producción:
Menús desplegables en los que se hizo clic: esto requiere una comprensión básica de JavaScript, ya que se utiliza para ejecutar algunas funciones para que el menú desplegable en el que se hizo clic funcione.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>clicked dropdown</title>
<style type="text/css">
button {
background: #009900;
width: 200px;
height: 60px;
color: white;
border: 1px solid #fff;
font-size: 20px;
border-radius: 5px;
}
ul li {
list-style: none;
}
ul li a {
display: block;
background: #c99;
width: 200px;
height: 50px;
text-decoration: none;
text-align: center;
padding: 10px;
border-radius: 5px;
text-align: center;
color: white;
font-size: 25px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
background: #009900;
}
.open {display: none;}
.gfg {
font-size:40px;
font-weight:bold;
color:#009900;
Text-align:center;
}
p {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
<script type="text/javascript">
function open_menu(){
var clicked= document.getElementById('drop-menu');
if(clicked.style.display=='block')
{
clicked.style.display='none';
}
else{
clicked.style.display='block';
}
}
</script>
</head>
<body>
<div class="gfg">GeeksforGeeks</div>
<p>Clicked Dropdown content property</p>
<div id="dropdown">
<button onclick="open_menu()">Click Me!</button>
<div class="open" id="drop-menu">
<ul>
<li><a href="">Item-1</a></li>
<li><a href="">Item-2</a></li>
<li><a href="">Item-3</a></li>
<li><a href="">Item-4</a></li>
</ul>
</div>
</div>
</body>
</html>
Producción:
Nota: Algunos aspectos destacados importantes del código:
- La función javascript expandirá y colapsará el menú cuando se haga clic en el botón «Click Me».
- Usamos onclick para llamar a la función javascript en la etiqueta del botón.
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA