Q:

How to open Bootstrap dropdown menu on hover rather than click

mhmadesk
Save to bookmark
|
2022-05-19
|
  178 
Very Easy
0

How to open Bootstrap dropdown menu on hover rather than click

Bootstrap,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-19
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the jQuery hover() method

By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Activate Bootstrap Dropdown with Hover</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
    .dropdown:hover .dropdown-menu{
        display: block;
    }
    .dropdown-menu{
        margin-top: 0;
    }
</style>
<script>
$(document).ready(function(){
    $(".dropdown").hover(function(){
        var dropdownMenu = $(this).children(".dropdown-menu");
        if(dropdownMenu.is(":visible")){
            dropdownMenu.parent().toggleClass("open");
        }
    });
});     
</script>
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a href="#" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <div class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">Inbox</a>
                        <a href="#" class="dropdown-item">Sent</a>
                        <a href="#" class="dropdown-item">Drafts</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</body>
</html>

As you can see in the above example, we've used the CSS media query for showing the dropdown menu on mouse hover only on small, medium and large devices, because it is not appropriate for the extra small devices like cell-phones. We've also used some jQuery to add .open class to highlight the active dropdown element.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

BOOTSTRAP / SASS Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to add Bootstrap tooltip to an icon... >>