Saturday 11 January 2020

Display menu items in next view using reactjs

I am making reactjs application with reactstrap (Bootstrap) and I am almost done with the menu part in desktop view.

Complete react demo with menu is here

The list of steps I am in the need to implement in the above example in responsive view,

-> The main menu (Menu 1, Menu 2, Menu 3) (Already implemented)

-> The submenus under each main menu (Submenu 1.1, Submenu 1.2, ... So on) Please hover over the main menu there will be separate submenu for each main menu.( Already implemented)

Expected:

-> On click on the main menu, the respective submenu should be opened in next view.

-> Eg.., If I click on the Menu1 then their respective submenus Submenu 1.1, Submenu 1.2, Submenu 1.3 should be displayed in next view.

-> The submenu view section should have back button and upon click on the same it should get back to main menu

The expectation is exactly like the below given image,

Main Menu Section (Ignore Register, Login, My Account menu in image)

enter image description here

Submenu Section( Menu 1 was clicked in main menu section).

enter image description here

Example.Js

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

It is ok for me if you modify above code or include another useful library (strictly no jquery) to achieve this. I humbly request you to please provide me the right solution like expected images given and please consider this question as I am stucked for very long time in it.

Thanks in advance.



from Display menu items in next view using reactjs

No comments:

Post a Comment