4

I used onsen ui to create sliding menu like flipkart. i used attribute side=left/right to open menu on left or right, But i required to different menu on left and right with same abovepage. When i used two different first menu is not working. I need to know how to add two different menu on left and right.

Amol
  • 41
  • 2

2 Answers2

1

It's possible by nesting it with "ons-split-view" because split-view could acts as a "left" sliding menu as well...

index.html:

<ons-split-view 
  secondary-page="leftMenu.html" 
  main-page="main.html" 
  main-page-width="70%" 
  collapse="portrait">
</ons-split-view>

<ons-template id="leftMenu.html">
  <ons-page>
    <!-- left menu page's contents -->
  </ons-page>
</ons-template>

main.html:

<ons-sliding-menu 
    var="app.menu" 
    main-page="mainPage.html" 
    menu-page="rightMenu.html" 
    max-slide-distance="200px" 
    type="reveal" 
    side="right">
</ons-sliding-menu>

<ons-template id="mainPage.html">
  <ons-page>
   <p style="text-align: center">
     <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
   </p>
  </ons-page>
</ons-template>

<ons-template id="rightMenu.html">
  <ons-page>
    <!-- right menu page's contents -->
  </ons-page>
</ons-template>
Vu Nguyen
  • 1,078
  • 9
  • 11
1

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 :)

Answer is copied from Frans Dios

Community
  • 1
  • 1
Reza
  • 18,865
  • 13
  • 88
  • 163
  • Ok, this is clever but if you open the right menu and try to swipe it shut (right swipe) it automatically opens the left menu. Can this be stopped? – Mark A. Rupert Jun 11 '18 at 21:57
  • @MarkA.Rupert I quit using onsen-ui, but I remember in the time I post this there were not such issue, may be in newer version it's changed – Reza Jun 11 '18 at 22:44
  • Thanks, it happens with the codepen above. I have tried catching it on the preopen but it does not allow me to cancel it. – Mark A. Rupert Jun 12 '18 at 00:26