How to Make Menu Dropdown on Hover using Bootstrap ?
Last Updated :
09 May, 2024
Menu Dropdown on Hover using Bootstrap involves customizing Bootstrap’s dropdown component to display menus when hovering over the trigger, not clicking. This is achieved by modifying CSS classes, such as adding “dropdown” and “dropdown-menu” to respective elements, providing a more intuitive user experience, especially for desktop users.
Syntax:
.dropdown:hover .dropdown-menu {
display: block;
}There are some common apporaches:
Approach 1: Using jQuery hover() with Bootstrap Classes
Implement menu dropdown on hover with jQuery’s hover() function and Bootstrap classes. Add ‘show’ class to toggle visibility of dropdown-menu, enhancing user interaction and navigation experience.
Step 1: Include the Bootstrap CSS and JavaScript files in your HTML document.
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”></script>
Step 2: Add a custom CSS rule to enable hover on the dropdown menu.
.dropdown:hover .dropdown-menu {
display: block;
}Step 3: Replace the default Bootstrap JavaScript code for dropdowns with a custom script that triggers the dropdown on hover.
$(document).ready(function() {
$('.dropdown').hover(function() {
$(this).addClass('show');
$(this).find('.dropdown-menu').addClass('show');
}, function() {
$(this).removeClass('show');
$(this).find('.dropdown-menu').removeClass('show');
});
});The above code uses jQuery to add an event listener for hover on the .dropdown element. When the user hovers over the element, the script finds the .dropdown-menu element inside it and shows it with a fade-in effect. When the user moves the mouse away from the element, the script hides the menu with a fade-out effect.
Example: This code uses jQuery to add event listeners to the .dropdown elements, and manipulates the CSS classes of the relevant elements to achieve the hover effect.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown {
margin-left: 40rem;
margin-right: 40rem;
}
.name {
text-align: center;
color: green;
}
</style>
<title>Document</title>
</head>
<body>
<h1 class="name">GeeksforGeeks</h1>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle"
href="#"
role="button"
id="dropdownMenuLink"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script>
$(document).ready(function () {
$('.dropdown').hover(function () {
$(this).addClass('show');
$(this).find('.dropdown-menu').addClass('show');
}, function () {
$(this).removeClass('show');
$(this).find('.dropdown-menu').removeClass('show');
});
});
</script>
</body>
</html>
Output:
Dropdown Menu on Hover using Bootstrap Example Output
Approach 2: Using fadeIn() and fadeOut() with Bootstrap Classes
To create a menu dropdown on hover with fade effects, combine Bootstrap classes for structure with jQuery’s fadeIn() and fadeOut() functions. Toggle ‘show’ class on hover, revealing dropdown-menu with fadeIn() and hiding it with fadeOut() when hovering ends.
Follow step 1 and step 2. Change step 3 to achieve the same output.
Step 3: Replace the default Bootstrap JavaScript code for dropdowns with a custom script that triggers the dropdown on hover.
$(document).ready(function(){
$('.dropdown').hover(function(){
$(this).find('.dropdown-menu')
.stop(true, true).delay(100).fadeIn(200);
}, function(){
$(this).find('.dropdown-menu')
.stop(true, true).delay(100).fadeOut(200);
});
});Example: This code uses jQuery to create a hover effect on dropdown menus in a Bootstrap menu. This code creates a smooth and elegant hover effect on dropdown menus in a Bootstrap menu, making it more user-friendly and engaging.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<style>
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown {
margin-left: 40rem;
margin-right: 40rem;
}
.btn {
background-color: green;
}
.name {
text-align: center;
}
</style>
<title>Document</title>
</head>
<body>
<h1 class="name">Dropdown Menu on Hover</h1>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle"
href="#"
role="button"
id="dropdownMenuLink"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">
Action
</a>
</li>
<li><a class="dropdown-item" href="#">
Another action
</a>
</li>
<li><a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
$('.dropdown').hover(function () {
$(this).find('.dropdown-menu')
.stop(true, true).delay(100).fadeIn(200);
}, function () {
$(this).find('.dropdown-menu')
.stop(true, true).delay(100).fadeOut(200);
});
});
</script>
</body>
</html>
Output:
Dropdown Menu on Hover using Bootstrap Example Output
Share your thoughts in the comments
Please Login to comment...