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