[MDBReact] cannot add hover dropdown in Navbar


Topic: [MDBReact] cannot add hover dropdown in Navbar

Nhân Nguyễn Thiện free asked 4 years ago

Hi everyone,I tried to remove isOpen prop in <Dropdown> and added hover effect dropdown menu in bootstrap 4 as:                               .dropdown:hover>.dropdown-menu {                                       display: block;                                }                               .dropdown>.dropdown-toggle:active {                                       pointer-events: none;                                } but it did not run. What should I do to have hover effect dropdown menu in bootstrap 4 when using MDBReact ? P/S: I want to have hover effect dropdown as : https://codepen.io/KillerJK/pen/braqMJ

Jakub Strebeyko staff answered 4 years ago

Hi there Nhân,
Thanks for contributing to the support board! It's an interesting issue being raised here, and is slightly more tricky than it might seem at first sight. The <DropdownMenu> appears/disappears not by basing directly upon its CSS features, but depends on react-popper for this job. To have a dropdown in a navbar, therefore, you have to make sure several elements are present.
1. a state property:

this.state = {
       ...
       dropdownOpen: false
     };

2. a funtion:

toggle() {
      this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
  }

3. and finally, a properly configured this.prop object in render():

<Dropdown isOpen={this.state.dropdownOpen} toggle={()=>"anythingYouLike"} onMouseEnter={this.toggle} onMouseLeave={this.toggle}>
...
</Dropdown>

I think it is worth to mention what exactly is happening here. Usualy, the <DropdownMenu> component uses function in the toggle to do it's toggling with a click through toggle="this.toggle" prop. Now, as we want to alter the triggering method, we have to replace the original toggle method (which is required) with a mock function returning a string ("anythingYouLike") and add two event listeners - one for onMouseEnter and second for onMouseLeave event - to fire the toggling function instead. It would be totally reasonable to consider custom functions to explicitly open or close the menu as opposed to simply toggling it, just to be sure.

With Best Regards,
Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags