I'm new to Onsen-UI and would like to have slide-menus on both sides of my page. I intend to have multiple pages that will have this functionality and dont know how I can implement that. What is the best way to do that?
Asked
Active
Viewed 330 times
1 Answers
3
You have to nest two different ons-sliding-menu like this:
<ons-sliding-menu
main-page="page"
menu-page="menu-left.html"
side="left" ...>
</ons-sliding-menu>
<ons-template id="page">
<ons-sliding-menu
main-page="content.html"
menu-page="menu-right.html"
side="right" ...>
</ons-sliding-menu>
</ons-template>
<ons-template id="menu-left.html"> ... </ons-template>
<ons-template id="menu-right.html"> ... </ons-template>
<ons-template id="content.html"> ... </ons-template>
Working here: http://codepen.io/onsen/pen/qHeJx
Hope it helps :)
Fran Dios
- 3,482
- 2
- 15
- 26
-
1If it was useful for you, please, consider marking it as the correct answer. Thanks! – Fran Dios May 12 '15 at 10:33
-
Hi Fran, I just started using this a couple of days ago and still learning my way around. I just found where to mark as accepted, thanks. – Anele Mash Mbanga May 13 '15 at 21:28
-
This works great except when I slide it close it opens the other menu. Any way to avoid that? – Mark A. Rupert Jun 15 '18 at 21:05