Monaca Onsen UI Discord Chat Github Repo

Can't open side menu outside tabbar pages

  • Hi,
    I need to open side menu on tabbar pages and outside tabbar pages. But I am only able to open it on tabbar pages. Could someone please advice on how to open side menu from outside tabbar pages?

    Here below I have given all the components. I am able to open menu from dashboard page but I also need to open it from member page.

    <!-- Theis is the navigator -->
    <ons-navigator id=“appNavigator” swipeable swipe-target-width=“80px” page=“login.html”>

    <!-- The Splitter Page -->
    <template id=“home_splitter.html”>
    <ons-page id=“home_splitter”>
    <ons-splitter id=“appSplitter”>
    <ons-splitter-side id=“usermenu” page=“usermenu.html” side=“right” collapse="" width=“200px”>
    <ons-splitter-content page=“tabbar.html”></ons-splitter-content>

    <!-- Tabbar -->
    <template id=“tabbar.html”>
    <ons-page id=“tabbar-page”>
    <ons-fab class=“right user-icon” onclick=“fn.userMenu()”>
    <img class=“user-img” src=“car.jpg” alt=“User”>

        <ons-tabbar swipeable id="appTabbar" position="auto">
            <ons-tab label="Dashboard" icon="ion-home" page="dashboard.html"></ons-tab>
            <ons-tab label="Plan & Reports" icon="ion-home" page="planAndReports.html"></ons-tab>
            <ons-tab label="Support" icon="ion-home" page="support.html"></ons-tab>


    <!-- Menu–>
    <template id=“usermenu.html”>
    <ons-list-item onclick=“fn.logout()”>
    <div class=“left”>
    <i class=“icon ion-md-log-out dashboard-icon”></i>
    <div class=“center”>
    Sign Out

    <!-- dashboard page -->
    <template id=“dashboard.html”>

    <!-- member page -->
    <template id=“member.html”>
    <ons-page id=“member”>
    <div class=“left”>
    <div class=“center”>Member</div>
    <ons-fab class=“right user-icon” onclick=“”>
    <img class=“user-img” src=“Car.jpg” alt=“User”>

    //here is the .js function
    window.fn.login = function () {

    window.fn.userMenu = function () {

  • administrators

    Maybe something like this? patterns&module=splitter_navigator
    But instead of navigator use tabbar.

  • @emccorson But I need tabbar to swipe between tabbar pages.

  • administrators

    The problem is that you have currently have the splitter inside the navigator, when you actually need the navigator inside the splitter.

    Copy the example from the link I already posted. It defines a splitter, and within the splitter content is a navigator. That means that the splitter is available on every page, no matter what page the navigator shows.

    Then for the tabbar, just define a page with a tabbar and push it using the navigator. That means you have:

    1. A top-level splitter
    2. Inside the top-level splitter: a navigator that is used to show pages.
    3. Inside the navigator: a page containing a tabbar that is pushed by the navigator.