search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

Closing one menu when opening other. #337

Closed martaszmit closed 5 years ago

martaszmit commented 5 years ago

Hi, I use multiple react-burger-menus in my application, both with overlay option to closing them on clicking in whole page content. When I click on icon of menu1 and then I click on icon of menu2 , menu1 closes and I have to click again on icon of menu2 to open it. It is possible to open menu1, click ONCE on menu2 to open menu2 and automatically close menu1? I hope I explained it understandable, I'm aware that my explanation can be a little complicated.

donaldboulton commented 4 years ago

I have the same situation of two menus in my site and its fine desktop = one left and on right. But even though the menus are responsive they overlap. I would like to close the first menu when clicking on the second menu or visa versa. Guess I could use media queries and make them smaller on mobile that is not my desire though.

negomi commented 4 years ago

Hi @donaldboulton, looks like the original question here closed before I got to it, but if you want to control the state of a menu dependent on another one, you essentially need to manage the state for both menus externally, using the isOpen prop.

An example of how to do that is here: https://github.com/negomi/react-burger-menu/wiki/FAQ#i-want-to-control-the-open-state-programmatically-but-i-dont-understand-how-to-use-the-isopen-prop

You will likely also want to use the noOverlay prop on both menus, otherwise when you have one menu open and try to open the second one, the first click will be on the overlay (which will close the first menu), and the second will actually open the other menu like you want. This is also described in the original question.