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 submenusSubmenu 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)
Submenu Section( Menu 1 was clicked in main menu section).
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