dropdown expands automatically when the mouse moves over a menu option
I am using a dropdown navbar component, and under its menu I created a multilevel menu and added items, How do I make it so that when my mouse arrow is placed on the dropdown menu, it automatically descends or expands? Please help me
I personally wouldn’t waste time creating websites for computers, it’s better to dedicate time to creating mobile sites first.
Source:https://chat.openai.com/
I can get some help on chat.gpt.
The request was:
When hovering the mouse I need it to change from this:
<li class="nav-item dropdown">
<a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">Dropdown </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">First Item</a>
<a class="dropdown-item" href="#">Second Item</a>
<a class="dropdown-item" href="#">Third Item</a>
</div>
</li>
For this:
<li class="nav-item dropdown">
<a class="dropdown-toggle nav-link show" aria-expanded="true" data-bs-toggle="dropdown" href="#">Dropdown </a>
<div class="dropdown-menu show" data-bs-popper="static">
<a class="dropdown-item" href="#">First Item</a>
<a class="dropdown-item" href="#">Second Item</a>
<a class="dropdown-item" href="#">Third Item</a>
</div>
</li>
GPT chat response below.
document.addEventListener("DOMContentLoaded", function() {
var dropdownNavItem = document.querySelector('.nav-item.dropdown');
// Adiciona classes ao passar o mouse
dropdownNavItem.addEventListener('mouseover', function() {
var dropdownToggle = this.querySelector('.dropdown-toggle');
var dropdownMenu = this.querySelector('.dropdown-menu');
dropdownToggle.classList.add('show');
dropdownMenu.classList.add('show');
});
// Remove classes ao tirar o mouse
dropdownNavItem.addEventListener('mouseout', function() {
var dropdownToggle = this.querySelector('.dropdown-toggle');
var dropdownMenu = this.querySelector('.dropdown-menu');
dropdownToggle.classList.remove('show');
dropdownMenu.classList.remove('show');
});
});
You do it like this with CSS
@media (min-width: 768px) {
.dropdown:hover > .dropdown-menu {
display: block;
}
}
@media (min-width: 768px) {
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
}
Thank you so much, it works
Thank you gilmar
So there are multiple menus in my navbar that are multidropdown, they all perform the dropdown expansion automatically when my mouse cursor is placed over it, but I want one of the dropdown to expand manually, how do I do this? It is also said that there is a dropdown in the dropdown column, I want to make this secondary dropdown can only be manually expanded, and other dropdown are automatically expanded, how can I achieve? could you help me? thank you
You could update @kuligaposten code to:
@media (min-width: 768px) {
.dropdown:hover:not(.manual) > .dropdown-menu {
display: block;
}
}
@media (min-width: 768px) {
.dropdown:not(.manual) > .dropdown-toggle:active {
pointer-events: none;
}
}
Then add a class of manual to dropdowns you don’t want to open automatically