I want to add a page before my sliding menu page. I succeeded to accomplish that. But, now I can't access menu.toggle(); I logged the menu object, that says undefined. And I've also tried navi.menu but that also doesn't seem to work. This is the closest solution I've got but no menu.toggle Onsen UI - Using Slide-Menu just for specifics pages here is my code
<ons-navigator title="Navigation" var="navi" page="homePage.html">
</ons-navigator>
<ons-template id="homePage.html">
<ons-page ng-controller="mainPageController">
<ons-toolbar>
<div class="center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>Exit</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row class="home-page">
<ons-col>
<ons-list>
<ons-list-item modifier="tappable"
style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[2].status"
ng-click="navi.pushPage('home.html')">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-building" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Hotels</div>
<div class="description">Find the perfect hotel room</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[6].status || modules[7].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-plane" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Flights</div>
<div class="description">Get the best flight</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[3].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Tours</div>
<div class="description">Your vacation awaits</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[1].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-car" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Cars</div>
<div class="description">Seek a deal on wheels</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[0].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Blog</div>
<div class="description">Travel news portal</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<br><br>
<ons-list class="menu-list">
<ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
<i class="glyphicon glyphicon-home"></i>
Home
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
<i class="glyphicon glyphicon-calendar"></i>
Browse Hotels
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
<i class="glyphicon glyphicon-gift"></i>
Special Offers
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
<i class="glyphicon glyphicon-th-list"></i>
Blog
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
<i class="glyphicon glyphicon-user"></i>
My Bookings
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
<i class="glyphicon glyphicon-map-marker"></i>
Contact Us
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<!-- <ons-navigator var="nav"> -->
<ons-page ng-controller="homeController">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center text-center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>
<!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
<ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div>some text</div>
</ons-page>
</ons-template>
The methods toggle(), open() and close() for the sliding menu are deprecated.
You can use the toggleMenu([options]) method instead: http://onsen.io/reference/ons-sliding-menu.html#method-toggleMenu
It seems like you want a page before the sliding menu so I made a small example: http://codepen.io/argelius/pen/XJOQwy