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/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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
Similar Reads
How to open dropdown menu on hover in Bootstrap ?
Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).hover(Function_in,
2 min read
How to use bootstrap-select for dropdown?
Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user. ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compon
2 min read
How to make bootstrap version 2 tab dropdown?
Using a simple Bootstrap plug-in, you can add dropdown menu in tabs by using the dropdown class. The nav and nav-tabs classes are also used to achieve this. First, make an unordered list and give it a class of nav and nav-tabs. Now, give a class of dropdown to the list item tag which you wish to beh
3 min read
How to make Dropdown using Angular UI Bootstrap ?
In this article, we will see how to make Dropdown using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: <div uib-dropdown></div> Download AngularUI from the link: https://angu
2 min read
How to create a form within dropdown menu using Bootstrap ?
A Dropdown menu is used to allow the user to choose the content from the menu as per their requirement and it is used to save screen space and avoid the long scrolling of the web pages. In web design, we often come in a scenario where we need to create a form within the dropdown menu to get some use
3 min read
How to show/hide dropdown menu on mouse hover using CSS ?
The approach of this article is to show and hide the dropdown menu on mouse hover using CSS. The task can be done by using the display property and :hover selector. Example: C/C++ Code <!DOCTYPE html> <html lang="en"> <head> <title> How to Show Hide Dropdown Using C
2 min read
How to Add Headers inside the Dropdown Menu in Bootstrap ?
Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap. Table of Content U
3 min read
How to Add Headers inside the Dropdown Menu in Bootstrap ?
Bootstrap provides the ability to create headers within dropdown menus, which enhances the clarity and organization of your website's navigation. Headers serve as titles or categories that group related dropdown items together, making it easier for users to quickly locate what they are looking for a
2 min read
How to Add a Image to React Bootstrap dropdown ?
In this article, we will see how to add an image to the React Bootstrap dropdown. It is a React-based implementation of the Bootstrap components. Dropdown Component provides a way to display lists of links or more actions within a menu when clicked over it. Steps to Create React Application and Inst
3 min read
How to create a dropdown menu in Bootstrap ?
A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1
2 min read