En este artículo, veremos el menú desplegable Bulma Hoverable y Toggable . Bulma usa menús desplegables para dar a los usuarios una lista de varios elementos para seleccionar. A continuación, hemos discutido los tres tipos de menús desplegables con sus ejemplos.
Bulma Hoverable o Alternar clases desplegables:
- dropdown-trigger: esta clase se usa para mostrar los elementos desplegables cuando se activa con un clic.
- is-active: esta clase se usa para mostrar elementos desplegables todo el tiempo.
- is-hoverable: esta clase se usa para mostrar los elementos desplegables al pasar el cursor sobre el disparador desplegable.
Sintaxis:
// Dropdown trigfer
<div class="dropdown">
<div class="dropdown-trigger">
....
</div>
</div>
// is-active dropdown
<div class="dropdown is-active">
<div class="dropdown-trigger">
....
</div>
</div>
// is-hoverable dropdown
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
....
</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra el menú desplegable Bulma Hoverable y Toggable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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.15.4/js/all.js">
</script>
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">GeekforGeeks</h1>
<h1 class="subtitle">Bulma Hoverable or Toggable Dropdown</h1>
<div class="container m-4">
<!-- Dropdown -->
<div class="dropdown ">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu3">
<span>Normal dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down"
aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item"> Java </a>
<a href="#" class="dropdown-item"> C++ </a>
<a href="#" class="dropdown-item"> Python </a>
<a href="#" class="dropdown-item"> C </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> DSA </a>
</div>
</div>
</div>
<!-- Hoverable dropdown -->
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu4">
<span>Hoverable dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item"> Java </a>
<a href="#" class="dropdown-item"> C++ </a>
<a href="#" class="dropdown-item"> Python </a>
<a href="#" class="dropdown-item"> C </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> DSA </a>
</div>
</div>
</div>
</div>
</div>
<script>
const dropdown =
document.querySelector('.dropdown');
const active =
document.querySelector('.is-active')
document.body.addEventListener('click', function () {
if (active) {
dropdown.classList.remove('is-active')
}
})
dropdown.addEventListener('click', function (event) {
event.stopPropagation();
this.classList.toggle('is-active');
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el menú desplegable Bulma Active.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<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.15.4/js/all.js">
</script>
</head>
<body>
<div class="content container has-text-centered">
<h1 class="title has-text-success">GeekforGeeks</h1>
<h1 class="subtitle">Bulma Active Dropdown</h1>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true"
aria-controls="dropdown-menu3">
<span>Active dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item"> Java </a>
<a href="#" class="dropdown-item"> C++ </a>
<a href="#" class="dropdown-item"> Python </a>
<a href="#" class="dropdown-item"> C </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> DSA </a>
</div>
</div>
</div>
</div>
<script>
const dropdown = document.querySelector(".dropdown");
const active = document.querySelector(".is-active");
document.body.addEventListener("click", function () {
if (active) {
dropdown.classList.remove("is-active");
}
});
dropdown.addEventListener("click", function (event) {
event.stopPropagation();
this.classList.toggle("is-active");
});
</script>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA