Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Sliding Menu with navigator



  • I am currently building my first cordova app with onsen ui. Looks promising so far! But I ran into a problem I could not solve and I could not find the answer.
    I hope it is a beginner question and can be solved easily by someone with more experience with onsen.
    I want to have a sliding-menu and still the “usual” navigation on the main screen.
    Two different approaches I tried:

    <ons-navigator var="app.navi">
    <ons-page>
    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
    </ons-sliding-menu>
    </ons-page>
    </ons-navigator>
    <ons-template id="menu.html">
    <ons-page modifier="menu-page">
    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
    Continue last story
    </ons-list-item>
    ...
    </ons-page>
    </ons-template>
    <ons-template id="page1.html">
    <ons-page ng-controller="BooksCtrl">
    // Navigation in controller:
    app.navi.pushPage("new_action.html", {
    animation: "lift"
    });
    </ons-page>
    </ons-template>
    

    Result: No error messages. But once I navigate from the first main-page to another page I can’t open the sliding menu. (Same as in the official demo found in github repo called navigator_sliding-menu)

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
    var="menu" type="reveal" max-slide-distance="260px" swipable="true">
    </ons-sliding-menu>
    <ons-template id="menu.html">
    <ons-page modifier="menu-page">
    <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
    Continue last story
    </ons-list-item>
    ...
    </ons-page>
    </ons-template>
    <ons-template id="page1.html">
    <ons-navigator animation="slide" var="app.navi">
    <ons-page ng-controller="BooksCtrl">
    // Navigation in controller:
    app.navi.pushPage("new_action.html", {
    animation: "lift"
    });
    </ons-page>
    </ons-navigator>
    </ons-template>
    

    Same as here: http://codepen.io/argelius/pen/ogXGeV
    So the navigation element is moved to the first main-page.
    Result: I can navigate through the app (via pushPage in controller) and I can open the menu from every page. But once I click a link in the menu any pushPage calls result in the error messages:
    angular.min.js:108 TypeError: Cannot read property ‘$new’ of null

    Any ideas?
    Thank you in advance


  • Onsen UI

    Hi! The second approach is what you want. I think there is only one thing you need to change. In the menu you should call ons-navigator method instead of ons-sliding-menu methods. Otherwise you will change the content of the sliding menu frame and lose your navigator. Therefore, call app.navi.pushPage( ... ) or app.navi.replacePage( ... ) instead of menu.setMainPage( ... ). You can then use menu.closeMenu() after that.



  • @Fran-Diox It’s working thanks…