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.

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

Drop up
Drop Right
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 () {  
    // Your code here
});

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

<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" /> Menu2    
            </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>

Add CSS

 #dropmenu {
            top: 67px;
            left: 220px;
        }

.dropdown-menu a {
            color: black;
        }
.dropdown-menu a {
            color: black;
            text-decoration: none;
            display: block;
            padding: 5px;
        }
 .dropdown-menu a:hover {
            background-color: rgb(247, 247, 247);
        }

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

Output

Summary

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