Los programadores pueden agregar imágenes a la lista desplegable para cada elemento mediante dos métodos que se mencionan a continuación.
Método 1: Usar CSS La clase .dropdown usa position:relative; se usa cuando el usuario necesita que el contenido se establezca justo debajo del botón desplegable (se hace usando la posición: absoluta ).
La clase .dropdown-content contiene el contenido desplegable real. Tenga en cuenta que el «ancho mínimo» es 160px. El programador puede configurar esto según la necesidad. Agregue la etiqueta <img> en el contenido desplegable para insertar la imagen en la lista desplegable para cada elemento.
Nota: En caso de que el usuario necesite que el ancho del contenido sea tan ancho como el botón desplegable, configure el ancho al 100% (Establecer desbordamiento: automático para desplazarse en pantallas pequeñas). En lugar de usar un borde , hemos usado la propiedad box-shadow de CSS para crear el menú desplegable como una «tarjeta». El selector :hover se usa para mostrar el menú desplegable cuando el usuario mueve el mouse sobre el botón desplegable.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Adding image to dropdown list</title>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<div class="dropdown">
<button class="dropbtn">
Country Flags
</button>
<div class="dropdown-content">
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
width="20" height="15"> India</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
width="20" height="15"> USA</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
width="20" height="15"> England</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
width="20" height="15"> Brazil</a>
</div>
</div>
</center>
</body>
</html>
Producción:
En el ejemplo anterior, debe «pasar» el puntero del mouse sobre el botón para ver la lista desplegable.
Método 2: Uso de Bootstrap: los menús desplegables se pueden implementar desde los componentes <a> o <button> . Para mostrar registros o listas, alterne las superposiciones contextuales junto con el complemento desplegable Bootstrap.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity= "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity= "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity= "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"> </script> </head> <body> <center> <h1 style="color: green"> GeeksforGeeks </h1> <div class="dropdown"> <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Country Flags </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li class="dropdown-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg" width="20" height="15"> India</li> <li class="dropdown-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg" width="20" height="15"> USA</li> <li class="dropdown-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg" width="20" height="15"> England</li> <li class="dropdown-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg" width="20" height="15"> Brazil</li> </ul> </div> </center> </body> </html>
Producción:
En el ejemplo anterior, puede alternar (hacer clic en activar y desactivar) el botón para ver la lista desplegable.
Nota: Puede usar la etiqueta <div> en lugar de la etiqueta <ul> y la etiqueta <a> en lugar de la etiqueta <li> en el ejemplo anterior.
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA