Bulma is a free and open-source CSS framework used for making beautiful and responsive websites. It is based on flexbox. In this article, we will be seeing how to make a dropup in Bulma.
Dropup is just like a dropdown but it opens upwards. To convert a dropdown to dropup you just have to add the is-up modifier to the dropdown component.
Bulma Dropup classes:
- is-up: This class is used on the dropdown component to make it open upwards.
Syntax:
<div class="dropdown is-up"> ... </div>
Example: The below example illustrates the use of the is-up class to make a dropup in Bulma.
HTML
<!DOCTYPE html> < html >
< head >
< title >Bulma Dropup</ title >
< link rel = 'stylesheet' href =
< link rel = "stylesheet" href =
< 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 >
|
Output:
Reference: https://bulma.io/documentation/components/dropdown/#dropup