Problem with the visibility of the drop-down menu when hovering over it

Question

Problem with the visibility of the drop-down menu when hovering over it

I am currently developing a ReactJS application using reactstrap. One of the components I have created is a dropdown with submenus nested inside.

My goal is to make the submenus appear when hovering over the dropdown, and if there are multiple dropdowns (n in total), only the submenus related to the hovered item should be displayed.

This is the code snippet I have tried:

<Dropdown
  className="d-inline-block"
  onMouseOver={this.onMouseEnter}
  onMouseLeave={this.onMouseLeave}
  isOpen={this.state.dropdownOpen}
  toggle={this.toggle}
>
  <DropdownToggle caret>Dropdown1</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 1</DropdownItem>
    <DropdownItem>Submenu 1.1</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <DropdownToggle caret>Dropdown2</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 2</DropdownItem>
    <DropdownItem>Submenu 2.1</DropdownItem>
    <DropdownItem>Submenu 2.2</DropdownItem>
  </DropdownMenu>
  &nbsp;&nbsp;&nbsp;
  <br />
  <br />
  <DropdownToggle caret>Dropdown3</DropdownToggle>
  <DropdownMenu>
    <DropdownItem header>Submenu 3</DropdownItem>
    <DropdownItem>Submenu 3.1</DropdownItem>
    <DropdownItem>Submenu 3.2</DropdownItem>
    <DropdownItem>Submenu 3.3</DropdownItem>
  </DropdownMenu>
</Dropdown>

Click here for a live demo

Desired Outcome:

If you visit the link above, you will see a horizontal menu that displays its submenu when hovered over. My objective is to replicate this behavior in my React application.

css reactjs twitter-bootstrap reactstrap megamenu

Answer 1

Answer №1

To improve your code, consider organizing those menus into a single <Dropdown> component.
Make sure to assign an event handler for each menu item.
You can simplify the process of setting event handlers by using Array.prototype.map.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: -1
    };
    this.toggle = this.toggle.bind(this);

    this.menus = [
      {
        title: "Bathroom",
        submenus: [{ title: "Toilets" }, { title: "Toilet seats" }]
      },
      {
        title: "Kitchen",
        submenus: [{ title: "Farmhouse Sinks" }, { title: "Cast Iron Sinks" }]
      }
    ];
  }

  onMouseEnter(current) {
    this.setState({ dropdownOpen: current });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: -1 });
  }

  toggle() {}

  render() {
    return (
      <div>
        {this.menus.map((menu, i) => (
          <Dropdown
            className="d-inline-block"
            onMouseOver={e => this.onMouseEnter(i)}
            onMouseLeave={this.onMouseLeave}
            isOpen={this.state.dropdownOpen === i}
            toggle={this.toggle}
          >
            <DropdownToggle caret>{menu.title}</DropdownToggle>
            <DropdownMenu>
              {menu.submenus.map((submenu, i) => (
                <DropdownItem header>{submenu.title}</DropdownItem>
              ))}
            </DropdownMenu>
          </Dropdown>
        ))}
      </div>
    );
  }
}

stackblitz: https://stackblitz.com/edit/reactstrap-v6-qsffjj

Answer 2

To improve your code, consider organizing those menus into a single <Dropdown> component.
Make sure to assign an event handler for each menu item.
You can simplify the process of setting event handlers by using Array.prototype.map.

import React from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);
    this.state = {
      dropdownOpen: -1
    };
    this.toggle = this.toggle.bind(this);

    this.menus = [
      {
        title: "Bathroom",
        submenus: [{ title: "Toilets" }, { title: "Toilet seats" }]
      },
      {
        title: "Kitchen",
        submenus: [{ title: "Farmhouse Sinks" }, { title: "Cast Iron Sinks" }]
      }
    ];
  }

  onMouseEnter(current) {
    this.setState({ dropdownOpen: current });
  }

  onMouseLeave() {
    this.setState({ dropdownOpen: -1 });
  }

  toggle() {}

  render() {
    return (
      <div>
        {this.menus.map((menu, i) => (
          <Dropdown
            className="d-inline-block"
            onMouseOver={e => this.onMouseEnter(i)}
            onMouseLeave={this.onMouseLeave}
            isOpen={this.state.dropdownOpen === i}
            toggle={this.toggle}
          >
            <DropdownToggle caret>{menu.title}</DropdownToggle>
            <DropdownMenu>
              {menu.submenus.map((submenu, i) => (
                <DropdownItem header>{submenu.title}</DropdownItem>
              ))}
            </DropdownMenu>
          </Dropdown>
        ))}
      </div>
    );
  }
}

stackblitz: https://stackblitz.com/edit/reactstrap-v6-qsffjj

Problem with the visibility of the drop-down menu when hovering over it

Answer №1

Similar questions

What is the best way to host a NextJs application within a Spring Boot application?

How can one effectively generate room within an HTML/CSS file?

PHP dropdown menu is a dynamic feature that provides users

Animation showing on the progress bar is not correctly halted

In React, retrieve the value of the previously clicked radio button when a new one is

Utilizing CSS/HTML to optimize code for mobile applications

Is there a way to deactivate a full HTML page during an event, similar to when using a JavaScript alert?

Attempted to remove Child Div using Jquery, but it did not get removed as expected

ClickAwayListener's callback function stops executing midway

The website is failing to adapt properly to smaller screen sizes

Assigning the Style property to an element using a string that includes HTML tags

MUI: (Autocomplete) The input given for Autocomplete is not valid

Tips for creating an expandable div with floated content

Issue arising with the resizing of the image in the main section, as it is shrinking prematurely before reaching the designated width

Resources for ExpressJS

Click on the sort icon in React JS to change its state

Create a mobile-friendly version of the website that retains all the functionality and features of the desktop

Attempting to align a banner image in the middle using CSS styling

Having difficulty formatting text alignment using CSS

Applying toggle() using css to manipulate various elements at once