CODEWITHSUNDEEP
reactjstypescript
Peter Penzov
Peter Penzov

Reputation: 1658

Trigger only one dropdown menu on button mouse hover

Based on this example https://github.com/briancodex/react-navbar-dropdown I want to create navigation menu with multiple dropdowns:

enter image description here

Full code: https://stackblitz.com/edit/react-3it51b?file=src%2FDevelopers.js

Looks like there is event listener which triggers the two dropdowns. How only one dropdown can be triggered when I hover on a button with menu items?

Upvotes: 0

Views: 1492

Answers (4)

Joyescat
Joyescat

Reputation: 526

The other answer clearly explained the first issue, I won't go over it again.

I'll explain the second issue mentioned: The dropdown menu disappear when moving the mouse toward the dropdown menu

This is caused by Navbar.css. You have a grid-gap attributes which create a gap around each button of the navigation. So when moving the cursor on the dropdown, the cursor go over the gap and the dropdown disappear. Because the gap is not part of the button. To solve this issue you need to delete the grid-gap and use padding instead

src/Navbar/Navbar.css

...

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px; << remove this line
  ...
}

.nav-item {
  padding: 10px; << add (if you want the same spacing)
}

...

Upvotes: 1

priyanko Das
priyanko Das

Reputation: 21

You are using the same state value 'dropdown' to check the visibility of both the dropdowns.When onMouseEnter is called setDropdown(true) is getting called,which makes dropdown:true. Now you are using this value in both payment and billing dropdown checks: {dropdown && } {dropdown && } So,its obvious that both are getting displayed.

Upvotes: 1

o.mingaleev
o.mingaleev

Reputation: 74

Methods onMouseEnter and onMouseLeave of the Navbar component change only one state – dropdown.

You need to add different states and methods for show/hide dropdown-components.

Upvotes: 1

CodeoftheWarrior
CodeoftheWarrior

Reputation: 363

It's because the display of both your dropdowns is tied to the same state variable dropdown in your code. Line 59 and 69 of your navbar.js file should have separate variables for displaying payments and billing and have a separate onMouseEnter and onMouseLeave handler.

If that's not clear, I can provide a modified code example for you.

Upvotes: 1

Related Questions