How do I make it so that when my mouse arrow is placed on the dropdown menu, it automatically descends or expands

Bootstrap Studio Help
1

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
1699803915353

2

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');
  });
});
1 Like
3

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;
  }
}
5 Likes
4

Thank you so much, it works :smiley:

2 Likes
5

Thank you gilmar :+1:

1 Like
7

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

8

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

2 Likes