Bulma es un framework CSS que se puede utilizar como alternativa a Bootstrap . Está basado en flexbox . En este artículo, veremos cómo hacer un menú desplegable alineado a la derecha en Bulma. Para hacer un menú desplegable alineado a la derecha, solo tenemos que agregar el modificador is-right al contenedor desplegable.
Clases desplegables alineadas a la derecha de Bulma:
- is-right: esta clase se usa en el contenedor desplegable para alinear el menú desplegable a la derecha.
Sintaxis:
<div class="dropdown is-right">
...
</div>
Ejemplo: El siguiente ejemplo ilustra cómo usar el modificador is-right en el contenedor desplegable para hacer que el menú desplegable se alinee a la derecha en Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<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 Right ALigned Dropdown
</b>
<div class="container is-fluid">
<p><b>Default 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>Right Aligned Dropdown:</b></p>
<div class="dropdown is-right">
<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>
</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:
Desplegable alineado a la derecha de Bulma
Referencia: https://bulma.io/documentation/components/dropdown/#right-aligned