Onsen UI 2.0 Splitter and pushPage not works together

Question

I made a main tab (tab1.html) where you have a menu to change options or go to settings... Now I want that you can click on a button on the main tab (tab1.html) to come to another oner (tab4.html). The problem is that it doesnt work both together so a menu(splitter) and a pushpage function ;/ How to solve it? The Splitter for the menu:

<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
  <ons-list>
    <ons-list-item onclick="fn.load('tab1.html')" tappable>
      <ons-icon icon="home" style="color: #1e88e5;"></ons-icon><p  style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Startseite</p>
    </ons-list-item>
    <ons-list-item onclick="fn.load('tab6.html')" tappable>
      <ons-icon icon="user" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Mein Profil</p>
    </ons-list-item>
    <ons-list-item onclick="fn.load('tab8.html')" tappable>
      <ons-icon icon="sliders" style="color: #1e88e5;"></ons-icon><p style="opacity: 0.6;">&nbsp;&nbsp;&nbsp;Einstellungen</p>
    </ons-list-item>
  </ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
</ons-splitter>

And the navigator where you should come to page 4:

<ons-navigator id="pushpage_navigator" page="tab1.html"></ons-navigator>

Then tab1.html:

<ons-template id="tab1.html">
<ons-page> 
<div class="left"> <!--left-->
  <ons-toolbar-button onclick="fn.open()">
    <ons-icon icon="md-menu"></ons-icon>
  </ons-toolbar-button>
</div>
<button onclick="change()" />
</ons-page>

And tab4.html where you should come from tab1.html:

<ons-template id="tab4.html">
<ons-page>
<ons-toolbar>
  <div class="left"><ons-back-button>Back</ons-back-button></div>
  <div class="center">Uhrzeitenansicht</div>
 </ons-toolbar>
 </ons-page>
 </ons-template>

And finally the javscript:

//ONSEN UI 2.0
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
 .then(menu.close.bind(menu));
};

function change()
{
  var myNavigator = document.getElementById('pushpage_navigator');
  myNavigator.pushPage('tab4.html');
}

If you set the 'ons-navigator'-tag before the splitter, the splitter does not work. If you set it after it you get errors like: myNavigator is null or pushPage is already running.

Answer 1

It looks to me as though you may have some problem with the nesting of the two elements (splitter and navigator). Both of them are supposed to act as containers for actual pages. So if you want to use both you should put one inside the other.

If you have something like:

<ons-navigator id="pushpage_navigator">
  <ons-page>
    <ons-splitter>
      <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
        <ons-page>
          <ons-list>
            <ons-list-item onclick="fn.load('tab1.html')" tappable>1</ons-list-item>
            <ons-list-item onclick="fn.load('tab6.html')" tappable>6</ons-list-item>
            <ons-list-item onclick="fn.load('tab8.html')" tappable>8</ons-list-item>
          </ons-list>
        </ons-page>
      </ons-splitter-side>
      <ons-splitter-content id="content" page="tab1.html"></ons-splitter-content>
    </ons-splitter>
  </ons-page>
</ons-navigator>

This way you will have access to both the splitter and navigator from the beginning. Demo.

If I have misunderstood you somehow or if you have further problems feel free to comment and I can update my answer accordingly.