Bootstrap Dropdown Menu

Introduction

 

Dropdowns are toggleable and overlay for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering. This article demonstrates how to create a bootstrap dropdown menu.

 

Bootstrap

 

Bootstrap is a free front-end framework that includes HTML and CSS based design templates. Bootstrap gives you responsive designs.

 

Get Bootstrap from getbootstrap.com or CDN.

 

Below are the CDN paths:

• https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
• https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js
• or 
• https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js 

Dropdown Menu 

 

Dropdown can be triggered using a button tag or anchor tag. 

<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="menuButton" data-toggle="dropdown">
    Menu Button
  </button>
  <div class="dropdown-menu">
    <a href="#">Menu1</a>
    <a href="#">Menu2</a>
    <a href="#">Menu3</a>
    <a href="#">Menu4</a>
  </div>
</div>

#menuButton class dropdown-toggle is used to enable to down arrow in the button.

 

#menuButton data attribute data-toggle is used to toggle the div or unordered list  or whatever we used will open and close.

 

The dropdown-menu class is a key one that used to change the content in the pop-up.

 

Types of Variations 

1. Drop up
2. Drop Right
3. Drop Left 

The default variation is Drop down. We can set these variations based on our requirements. 

<div class="dropup"> //replace here to set the variations
  <button class="dropdown-toggle" type="button" id="menuButton" data-toggle="dropdown">
    Menu Button
  </button>
  <div class="dropdown-menu">
    <a href="#">Menu1</a>
    <a href="#">Menu2</a>
    <a href="#">Menu3</a>
    <a href="#">Menu4</a>
  </div>
</div>

Note

Dropup/dropright/dropleft will work based on the browser space respectively. For example, we set the variation to dropup, but the user scrolled at some point and there is no enough space to load the whole toggle content, at that time it will take drop-down for that. similarly for drop up and drop right.

 

Set Active/Use Disable

 

Similarly we can set active for the menu items, which will add background color and looks like it is currently selected. 

<div class="dropdown-menu">
  <a href="#">Menu1</a>
  <a class="active" href="#">Menu2</a>
  <a href="#">Menu3</a>
</div>

To disable we can use disabled class in the menu item.

<div class="dropdown-menu">
  <a href="#">Menu1</a>
  <a class="disabled" href="#">Menu2</a>
  <a href="#">Menu3</a>
</div>

Toggle/Update/Destroy element using Javascript 

 

Please make sure  data-toggle="dropdown" is present in the HTML. Because it is mandatory to have this so that we can toggle it in Javascript.

 

$('.dropdown-toggle').dropdown()

 

$('#dropmenu').dropdown('update')- Updates the position of an element’s dropdown

 

$('#dropmenu').dropdown('dispose')

 

Events

 

show.bs.dropdown- this event fires when dropdown opened

 

hide.bs.dropdown- this event fires when dropdown closed 

$('#myDropDownId').on('show.bs.dropdown', function () {

})

So far we have seen how to create a bootstrap drop-down menu and its configuration.

 

Here we will see how to create a drop-down menu with checkboxes:

 

Add HTML

<style>
    #dropmenu {
        top: 67px;
        left: 220px;
    }
</style>

<div>
    <button data-toggle="dropdown" data-open-dropdown="dropmenu"> Menu </button>
    <ul id="dropmenu" class="dropdown-menu">
        <li>
            <a href="#" data-value="menu1" tabIndex="-1">
                <input id="menu1" type="checkbox" /> Menu1
            </a>
        </li>
        <li>
            <a href="#" data-value="menu2" tabIndex="-1">
                <input id="menu2" type="checkbox" /> Menu3
            </a>
        </li>
        <li>
            <a href="#" data-value="menu3" tabIndex="-1">
                <input id="menu3" type="checkbox" /> Menu3
            </a>
        </li>
        <li>
            <a href="#" data-value="menu4" tabIndex="-1">
                <input id="menu4" type="checkbox" /> Menu4
            </a>
        </li>
        <li>
            <a href="#" data-value="menu5" tabIndex="-1">
                <input id="menu5" type="checkbox" /> Menu5
            </a>
        </li>
    </ul>
</div>

How it works 

 

Your toggle content can be in an unordered list. Use a button or link to toggle your content using data-toggle="dropdown".

 

Use class "dropdown-menu" to your unordered list which makes your list inside the toggle box.

 

Add JQuery

<script>
    var checkBoxOptions = []
    $('.dropdown-menu a').on('click', function (event) {
        var $target = $(event.currentTarget),
            val = $target.attr('data-value'),
            $inp = $target.find('input'),
            idx;
        if ((idx = checkBoxOptions.indexOf(val)) > -1) {
            checkBoxOptions.splice(idx, 1);
            setTimeout(function () {
                $inp.prop('checked', false)
            }, 0);
        } else {
            checkBoxOptions.push(val);
            setTimeout(function () {
                $inp.prop('checked', true)
            }, 0);
        }
        $(event.target).blur();
        return false
    })
</script>

How it Works 

 

The above jQuery code will retain your checked items when you toggle back. 

 

The checkBoxOptions array variable will store the data-value attribute of the checked items. so that whenever the changes happened to the checkboxOptions array the checked property will be handled. If the array doesn't have the data-value then it will push to the array else it will splice/remove the value and uncheck the checkbox. 

 

Output 

 

 

 

Summary

 

Here we have seen how to create a drop down menu with checkboxes using Bootstrap.