Los menús desplegables son una de las partes más importantes de un sitio web interactivo. Un menú desplegable es la colección de elementos de menú que permiten a los usuarios elegir un valor de la lista. W3.CSS también proporciona clases para crear un menú desplegable suave y receptivo. Hay dos tipos de menú desplegable disponibles, es decir, se puede desplazar y hacer clic. Las clases disponibles para el menú desplegable son las siguientes:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-desplegable-contenido |
Se utiliza para hacer el contenido del menú desplegable. |
|
2. |
w3-desplegable-hover |
Se utiliza para hacer un elemento desplegable flotante. |
|
3. |
w3-desplegable-clic |
Se utiliza para hacer un menú desplegable en el que se puede hacer clic. |
Ejemplo: Creación de un menú desplegable flotante.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge">GeeksForGeeks</h2> </div> <!-- Hoverable Dropdown Menu in W3.CSS --> <div class="w3-container w3-center"> <!-- Hoverable Dropdown Menu --> <div class="w3-dropdown-hover w3-round-large"> <button class= "w3-button w3-hover-blue w3-pink w3-round-large"> Hover Over Me! </button> <div class="w3-dropdown-content w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button"> Gfg </a> <a href="#" class="w3-bar-item w3-button"> GeeksForGeeks </a> <a href="#" class="w3-bar-item w3-button"> Geek </a> </div> </div> </div> </body> </html>
Producción:
- Antes de pasar el mouse:
- Después de pasar el mouse por encima:
Ejemplo: Creación de un menú desplegable en el que se puede hacer clic.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Function to show and hide dropdown menu -->
<script>
function show() {
var x = document.getElementById("gfg");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</head>
<body>
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<!-- Hoverable Dropdown Menu in W3.CSS -->
<div class="w3-container w3-center">
<!-- Hoverable Dropdown Menu -->
<div class="w3-dropdown-click w3-round-large">
<button onclick = "show()"
class="w3-button w3-blue w3-round-large">
Click Me!
</button>
<div id="gfg"
class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Gfg</a>
<a href="#" class="w3-bar-item w3-button">
GeeksForGeeks
</a>
<a href="#" class="w3-bar-item w3-button">Geek</a>
</div>
</div>
</div>
</body>
</html>
Producción:
- Antes de hacer clic:
- Después de hacer clic:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA