Bulma es un marco CSS gratuito y de código abierto que se utiliza para crear sitios web hermosos y receptivos. Está basado en flexbox. En este artículo, veremos cómo hacer un dropup en Bulma.
Dropup es como un menú desplegable pero se abre hacia arriba. Para convertir un menú desplegable en un menú desplegable, solo tiene que agregar el modificador is-up al componente desplegable.
Clases de Bulma Dropup:
- is-up: esta clase se usa en el componente desplegable para que se abra hacia arriba.
Sintaxis:
<div class="dropdown is-up">
...
</div>
Ejemplo: El siguiente ejemplo ilustra el uso de la clase is-up para hacer un menú desplegable en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Dropup</title>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<style>
.container>p{
margin-top: 30px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Dropup
</b>
<div class="container is-fluid">
<p><b>Normal Dropdown:</b></p>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
aria-controls="dropdown-menu1">
<span>Select a topic</span>
<span class="icon is-small">
<i class="fas fa-angle-down"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu1"
role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Algorithms</p>
</div>
<div class="dropdown-item">
<p>DBMS</p>
</div>
<div class="dropdown-item">
<p>Data Structures</p>
</div>
</div>
</div>
</div>
<p><b>Dropdown with <i>is-up</i> modifier:</b></p>
<div class="dropdown is-up">
<div class="dropdown-trigger">
<button class="button"
aria-controls="dropdown-menu1">
<span>Select a topic</span>
<span class="icon is-small">
<i class="fas fa-angle-up"></i>
</span>
</button>
</div>
<div class="dropdown-menu"
id="dropdown-menu1"
role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Algorithms</p>
</div>
<div class="dropdown-item">
<p>DBMS</p>
</div>
<div class="dropdown-item">
<p>Data Structures</p>
</div>
</div>
</div>
</div>
</div>
<script>
var triggers = document.querySelectorAll(
".dropdown .dropdown-trigger");
triggers.forEach(function (trigger) {
var isopen = false;
trigger.addEventListener('click', function(){
if(isopen){
trigger.parentElement.classList.remove("is-active");
isopen = false;
}else{
trigger.parentElement.classList.add("is-active");
isopen = true;
}
})
});
</script>
</body>
</html>
Producción:
bulma abandono
Referencia: https://bulma.io/documentation/components/dropdown/#dropup