[Onsen UI 2.x ] Side Menu and stack based navigation in the same app.

[magestik]

How can I combine Side Menu and stack based navigation in the same app.

If possible show me a code exemple please.

[munsterlander]

@magestik I have a full example for Monaca’s Cloud IDE if you desire. I will have to upload it, but here is the main bit that does exactly as you request:

<ons-navigator id="mainNavigator" page="splitter.html">
  </ons-navigator>
  <ons-template id="splitter.html">
    <ons-splitter id="mainSplitter">
      <ons-splitter-side page="content/menu.html" side="left" swipeable collapse="portrait" width="200px">
      </ons-splitter-side>
      <ons-splitter-content page="home.html">
      </ons-splitter-content>
    </ons-splitter>
  </ons-template>

It can also be flip-flopped for your use case if needed. i.e. you always want the menus in which case you put the navigator on your home.html page.

[magestik]

if you dont mind I’d like to see your full code, html and js.
Thanks.

[munsterlander]

Here is an entire Monaca Cloud IDE project. https://www.dropbox.com/s/mk04vampl9p18bn/eBookTemplate_Monaca.zip?dl=0

It is an eBook template that has a variety of options. I did it as an example for another thread. If you don’t have a free account yet, just sign up then you can import the project and run on the device immediately.

[magestik]

Thank you for your help, your project is ok but I need also to put links in the home page like another menu to call another pages. How can I do that?. But I want to keep the side menu also

[munsterlander]

@magestik Just use JS with links or buttons.

<a href="#" onclick="document.getElementById('myNav').pushPage('myPage.html');">My link</a>

Typed on the fly and not validated.

[magestik]

Yep it’s working, I’m going to sleep because I live in Europe and tomorrow I 'll work very early . thank you for your patience.:smiley:

[munsterlander]

Glad it worked and as @Fran-Diox has mentioned in several posts, it is advisable to separate logic from the view so using inline JS is not the best method, but it sure is quick for a demo!

[Fran Diox]

I just added a new tutorial related to this here. Hope that helps other users :)

[magestik]

Thanks, it 'll help me:smile:

[munsterlander]

@magestik The example @Fran-Diox linked to maybe a better use case then what I gave. Mine specifically was built for an ebook template that had specific requirements, so consequently, the navigator was outside of the menu to allow left and right swiping of pages. If you want the menu always accessible, then you definitely want to use @Fran-Diox’s version.

[jmi23]

@Fran-Diox according to the manual, this one here is the best method to provide backbutton behavior, because only here the stack of pages is built at all.