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.

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”>
    </ons-navigator>

    <!-- 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-side>
    <ons-splitter-content page=“tabbar.html”></ons-splitter-content>
    </ons-splitter>
    </ons-page>
    </template>

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

        <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>
        </ons-tabbar>
        </script>
    </ons-page>
    

    </template>

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

    <!-- dashboard page -->
    <template id=“dashboard.html”>
    <ons-page>
    <h1>Hi</h1>
    </ons-page>
    </template>

    <!-- member page -->
    <template id=“member.html”>
    <ons-page id=“member”>
    <ons-toolbar>
    <div class=“left”>
    <ons-back-button>Back</ons-back-button>
    </div>
    <div class=“center”>Member</div>
    <ons-fab class=“right user-icon” onclick=“fn.open()”>
    <img class=“user-img” src=“Car.jpg” alt=“User”>
    </ons-fab>
    </ons-toolbar>
    </ons-page>
    </template>

    //here is the .js function
    window.fn.login = function () {
    document.getElementById(‘appNavigator’).pushPage(“home_splitter.html”);
    };

    window.fn.userMenu = function () {
    document.getElementById(‘appSplitter’).right.toggle();
    }


  • administrators

    Maybe something like this? https://onsen.io/playground/?framework=vanilla&category=common 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.