Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear sitios web hermosos y receptivos. El menú desplegable de Bulma es una lista que muestra varias opciones cuando el usuario interactúa con el menú.
Esta interacción tiene lugar normalmente cuando el usuario hace clic o se desplaza sobre el menú. Es importante tener un menú desplegable interactivo, ya que hace que su sitio web se vea mejor. El menú desplegable de Bulma es fácil de usar y altamente interactivo. Hay algunos elementos desplegables que se utilizan en el marco de Bulma para crear un menú desplegable.
Clases del menú desplegable de Bulma:
- desplegable: Es la clase para el contenedor principal que contiene el botón desplegable y el menú desplegable.
- dropdown-trigger: Es la clase para el contenedor que contiene el botón
- menú desplegable: es la clase para el menú que se puede alternar. No es visible por defecto.
- dropdown-content: Es la clase que especifica el cuadro desplegable con fondo blanco.
- dropdown-item: Es la clase para cada elemento del menú desplegable.
- dropdown-divider: Es la clase de la línea horizontal que divide los elementos desplegables.
- dropdown-content: Es la clase que especifica el cuadro desplegable con fondo blanco.
Sintaxis:
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"> ....</button>
</div>
<div class="dropdown-menu">
<div class="dropdown-content">
<a class="dropdown-item"> Item 1...</a>
<a class="dropdown-item">Item 2...</a>
....
</div>
</div>
</div>
Ejemplo: El siguiente ejemplo muestra el uso de clases de menú desplegable en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropdown Menu</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<script src=
"https://use.fontawesome.com/releases/v5.1.0/js/all.js">
</script>
</head>
<body class="has-text-centered">
<h3 class="is-size-2 has-text-success">
GeeksforGeeks
</h3>
<b>Bulma Dropdown menu</b>
<section class="section">
<div class="container">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
aria-haspopup="true"
aria-controls="dropdown-menu">
<span>Football Players</span>
<span class="icon is-small">
<i class="fa fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu"
role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Salah
</a>
<a href="#" class="dropdown-item is-active">
Messi
</a>
<a href="#" class="dropdown-item ">
Cristiano
</a>
<a href="#" class="dropdown-item">
Kane
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
Sterling
</a>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
});
</script>
</div>
</section>
</body>
</html>
Producción:
Este menú desplegable consta de modificadores adicionales en el marco de Bulma. Los siguientes son algunos de los modificadores adicionales que pueden ser muy útiles en nuestro sitio web.
- is-active : este modificador estará resaltado todo el tiempo. En el programa anterior, el elemento llamado Messi usa el modificador is-active .
- is-hover: cuando el usuario se desplaza sobre el menú, el menú desplegable mostrará automáticamente su lista.
- is-right: el modificador is-right se puede usar para alinear a la derecha el menú desplegable.
- is-up: Este modificador se puede utilizar cuando queremos poner el menú desplegable encima del botón desplegable.
Referencia: https://bulma.io/documentation/components/dropdown/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA