@Fran-Diox if you look at the kitchensink example: http://tutorial.onsen.io/?framework=vanilla&category=common patterns&module=kitchensink

When you open the menu, the page slide to the left to reveal the menu on the right (kind of popping from underneath the page.

But now it’s like this: http://tutorial.onsen.io/?framework=vanilla&category=reference&module=splitter
where the page doesn’t move but the side menu just slides in in front of the page.

I preferred the first one and I don’t know why it changed by just moving the page out of the navigator.

@Fran-Diox Thanks, i’ve gone with removing the page from the navigator and it works as expected. However I lose the nice effect of the menu moving the current page as it slides from the right instead of it sliding on top of the current page. If you have a solution to that it would be awesome however the main issue is solved.

Hi, I am using the onsen UI kitchen sink application as the basis of my application.
I am having trouble with loading a page before the tabbar. What I want to achieve is when the app starts up, a loading page(splash screen) pops up instead with a loading wheel, after whatever logic, redirect the user to a sign in page or the home screen(the tab bar). So far I have only been able to load the start up page by adding a second navigator (I have tried other ways, this is the only way it worked). When I do this though, I face another issue which is I can’t navigate off that start up page even when I add a button to manually.

Most of my pages are in their own separate files but for the purpose of this I have moved the start up page to the same index file.

Please see the code below, as you can see I’ve commented out the second navigator, which if I uncomment works but can’t navigate off it. I have tried adding page="startup2.html" to the appNavigator and that doesn’t work.

I have also tried the loadView and pushPage for the button none of which worked.

Thank you and apologies if this is basic but I have stuck on this for a couple of days.

Index

  <!--Tabbar navigation-->
  <ons-navigator id="appNavigator">
    <ons-page>
      <ons-splitter id="appSplitter">
        <ons-splitter-side id="moremenu" page="moremenu.html" swipeable side="right" collapse="" width="260px"></ons-splitter-side>
        <ons-splitter-content>
          <ons-page>
            <ons-toolbar>
              <div class="center">FACT</div>
              <div class="right">
                <ons-toolbar-button onclick="fn.toggleMenu()">
                  <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
                </ons-toolbar-button>
              </div>
            </ons-toolbar>
            <ons-tabbar id="appTabbar" position="auto">
              <ons-tab label="Home" icon="ion-home" page="view/home.html" active></ons-tab>
              <ons-tab label="Charts" icon="ion-arrow-graph-down-right" page="view/charts.html"></ons-tab>
              <ons-tab label="Animations" icon="ion-film-marker" page="view/preview.html"></ons-tab>
              <ons-tab label="More" icon="ion-more" onclick="fn.toggleMenu()"></ons-tab>
            </ons-tabbar>
          </ons-page>
        </ons-splitter-content>
      </ons-splitter>
    </ons-page>
  </ons-navigator>

  <!--<ons-navigator id="myNavigator" page="startup2.html"></ons-navigator>-->

<template id="startup2.html">
<ons-page id="startup2">
    <div style="text-align: center; margin: 40px; color: #666">
        <p>
          <ons-progress-circular class="progressStyle" indeterminate></ons-progress-circular>
        </p>
        <ons-list>
        <ons-list-item onclick="fn.load('homepage.html')" tappable>
          <div class="left">
            <ons-icon fixed-width class="list-item__icon" icon="ion-home, material:md-home"></ons-icon>
          </div>
          <div class="center">
            Home
          </div>
          <div class="right">
            <ons-icon icon="fa-link"></ons-icon>
          </div>
        </ons-list-item>
        </ons-list>
    </div>
</ons-page>
</template>

Navigation

// Navigation for the application

window.fn = {};

window.fn.toggleMenu = function () {
  document.getElementById('appSplitter').right.toggle();
};

window.fn.loadView = function (index) {
  document.getElementById('appTabbar').setActiveTab(index);
  document.getElementById('moremenu').close();
};

window.fn.loadLink = function (url) {
  window.open(url, '_blank');
};

window.fn.pushPage = function (page, anim) {
  if (anim) {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title }, animation: anim });
  } else {
    document.getElementById('appNavigator').pushPage(page.id, { data: { title: page.title } });
  }
};

window.fn.load = function (page) {
  // var menu = document.getElementById('menu');
  var navi = document.getElementById('myNavigator');

  // menu.close();
  var currentPage = navi.getAttribute('page');
  if (currentPage != page) {
    navi.setAttribute('page', page);
    navi.resetToPage(page, {
      animation: 'fade'
    });
  }
};

ons.ready(function () {
  const moremenu = document.getElementById('appSplitter');
  ons.platform.isAndroid() ? moremenu.right.setAttribute('animation', 'overlay') : moremenu.right.setAttribute('animation', 'reveal');
})