I'v try to make Sliding-menu , Tabber on the same page. everything is fine and work well till i added the "Tabbar" in to the page , and then both Sliding-Menu and ons-button in the page not working.
Need help , here's my code.
<body ng-controller="AppController">
<ons-navigator>
<ons-tabbar>
<ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true">
</ons-tab>
<ons-tab page="page2.html" icon="ion-heart" label="Favorites">
</ons-tab>
<ons-tab page="page3.html" icon="ion-person" label="Profile">
</ons-tab>
</ons-tabbar>
</ons-navigator>
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-plus"></ons-icon>
New Post
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
<ons-icon icon="fa-bookmark"></ons-icon>
Bookmark
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-twitter"></ons-icon>
Official Twitter
</ons-list-item>
</ons-list>
<br>
<ons-list class="bottom-menu-list">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Settings
<div class="notification menu-notification">3</div>
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
Help
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
Send feedback
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-button modifier="cta" ng-click="menu.toggleMenu()">
Toggle Menu
</ons-button>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Page 2</div>
</ons-toolbar>
<ons-row style="margin-top: 100px;">
<ons-col align="center">
<ons-button modifier="light" ng-click="menu.toggleMenu()">
Toggle Menu
</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
</body>
Try putting your tabbar inside a template like this:
<ons-template id="tabbar.html">
<ons-tabbar>
<ons-tab page="page1.html" icon="ion-search" label="Find a place" active="true">
</ons-tab>
<ons-tab page="page2.html" icon="ion-heart" label="Favorites">
</ons-tab>
<ons-tab page="page3.html" icon="ion-person" label="Profile">
</ons-tab>
</ons-tabbar>
</ons-template>
How use that template as the main page of your sliding menu:
<ons-sliding-menu
menu-page="menu.html" main-page="tabbar.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
You might want to change the type to "overlay" if you don't want the sliding menu to push the tabs to the right when you open it.
See this in action here:
http://codepen.io/argelius/pen/NPqawd
Related
I am trying to add a side menu in my Onsenui app but it isnt showing up. I am using <ons-tabbar-item> approach so not sure how I would go about adding a menu in the <ons-tabbar-item> section below:
<body>
<ons-sliding-menu var="app.menu" main-page="dashboard.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
test
</ons-page>
</ons-template>
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" ng-click="app.menu.toggleMenu()"></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</body>
There is no need for ons-navigator if you are already using ons-tabbar and ons-sliding menu as you can perform the navigation using these two elements.
Here is a CodePen example about how to combine tabbar and sliding-menu:
http://codepen.io/andipavllo/pen/RrdPNo
Here is the code:
<ons-tabbar var="tabbar">
<ons-tabbar-item icon="ion-stop" label="menu" page="hoge.html" active="true"></ons-tabbar-item>
<ons-tabbar-item icon="ion-stop" label="menu" page="page2.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="hoge.html">
<ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" var="menu" type="overlay" max-slide-distance="250px">
</ons-navigator>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 1</div>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<h1 style="text-align: center">Tabbar+SlidingMenu Test</h1>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-navicon" size="32px" fixed-width="true" style="vertical-align: -7px"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<h1 style="text-align: center">Tab bar+SlidingMenu Test</h1>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(0)">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="tabbar.setActiveTab(1)">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
Hope it helps!
I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<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">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!
You just need to wrap the menu page and the main page with <ons-template> like this:
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
...
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page>
...
</ons-page>
</ons-template>
Hope it helps!
I can't get the navigation to work with the tab bar. I have a list page, search page and details page. For some reason I can't get the list page to persist when navigating either. The details page is never shown even thought I am using app.navi.pushPage('detail.html'). Before adding the tab-bar everything worked fine. Any ideas on what I am doing wrong?
As well, I need to access the detail page from both the list and search pages.
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-tabbar>
<ons-tab page="favourites.html" label="Favourites" icon="fa-heart"></ons-tab>
<ons-tab page="list.html" label="Near Me" icon="fa-map-marker" active="true"></ons-tab>
<ons-tab page="search.html" label="Search" icon="fa-search"></ons-tab>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
You cannot combine <ons-navigator> with <ons-tabbar>. If you use the tabbar element, you can switch pages using setActiveTab(index, [options]). I created a working sample using the template you provided and added a <ons-button> in the list.html template that changes the active page. For more info about the tabbar element, take a look here. Let me know if you need more help :)
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="list.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="search.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="detail.html"></ons-tabbar-item>
</ons-tabbar>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Near Me</div>
</ons-toolbar>
<ons-list id="lst-estblshmnt"></ons-list>
<ons-button id="btn-switch-search" ng-click="tabbar.setActiveTab(2)">Cancel</ons-button>
</ons-page>
</ons-template>
<ons-template id="search.html">
<ons-page id="search-page">
<ons-toolbar>
<div class="center">Search</div>
</ons-toolbar>
<ons-row>
<ons-col>
<input id="srch" type="search" class="search-input">
</ons-col>
<ons-col width="75px" style="display: none">
<ons-button id="btn-cancel-search" modifier="quiet">Cancel</ons-button>
</ons-col>
</ons-row>
<ons-list id="lst-srch"></ons-list>
</ons-page>
</ons-template>
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="right">
<ons-toolbar-button id="btn-fllw"><ons-icon icon="fa-heart-o"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row>
<ons-col id="establishment-details">
<header>
<center class="item-title">Title</center>
</header>
<div class="item-details">
<ons-row>
<ons-col>
<p class="item-address"></p>
<p class="item-city"></p>
<p class="item-postal_code"></p>
</ons-col>
</ons-row>
</div>
</ons-col>
</ons-row>
</ons-list>
</ons-page>
</ons-template>
</body>
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
Im developing with onsen ui + angularjs. My app have to ways to access to different sections, one is for "home" page and another is for lateral menu. When i use "home" menu and i access to any items of my list works perfect, but if i use lateral menu and i try to access to any items chrome debugger show me this error:
TypeError: Cannot read property 'pushPage' of null
at Scope.$scope.showPost (http://recorramisiones.com.ar/rutadelaselva/app2/js/app.js:103:26)
at $parseFunctionCall (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:12133:18)
at http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15815:21
at Scope.$get.Scope.$eval (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14123:28)
at Scope.$get.Scope.$apply (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:14221:23)
at HTMLElement.click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste.split.forEach.ngEventDirectives.(anonymous function).compile.listener (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/onsenui.js:15814:25)
at HTMLElement.eventHandler (http://recorramisiones.com.ar/rutadelaselva/app2/lib/onsen/js/angular/angular.js:3013:21)
My project url: http://recorramisiones.com.ar/rutadelaselva/app2/
Screenshot: http://puu.sh/g4Zr5.jpg
menu.html (lateral menu):
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('home.html', {closeMenu: true})">
<ons-icon icon="fa-home" fixed-width="true"></ons-icon>
Inicio
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('areas.html', {closeMenu: true})">
<ons-icon icon="fa-leaf" fixed-width="true"></ons-icon>
Areas Naturales
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('informes.html', {closeMenu: true})">
<ons-icon icon="fa-info-circle" fixed-width="true"></ons-icon>
Informes Turísticos
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('atractivos.html', {closeMenu: true})">
<ons-icon icon="fa-camera" fixed-width="true"></ons-icon>
Atractivos y Actividades
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('alojamientos.html', {closeMenu: true})">
<ons-icon icon="fa-building" fixed-width="true"></ons-icon>
Alojamientos
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('hospitales.html', {closeMenu: true})">
<ons-icon icon="fa-plus-square" fixed-width="true"></ons-icon>
Hospitales y Servicios
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('markers.html', {closeMenu: true})">
<ons-icon icon="fa-map-marker" fixed-width="true"></ons-icon>
Mapa
</ons-list-item>
</ons-list>
</ons-page>
home.html (home menu)
<ons-navigator animation="slide" var="gallery">
<ons-page>
<ons-toolbar modifier="opacity">
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Ruta de la Selva</div>
</ons-toolbar>
<div class="app-page">
<div class="app-page-menu">
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('alojamientos.html');">
<img src="img/alojamientos.jpg">
<p>Alojamientos</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('informes.html');">
<img src="img/informes.jpg">
<p>Informes Turísticos</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('atractivos.html');">
<img src="img/actividades.jpg">
<p>Atractivos y Actividades</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('areas.html');">
<img src="img/areas.jpg">
<p>Áreas Naturales</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('dishes.html');">
<img src="img/hospitales.jpg">
<p>Hospitales y Servicios</p>
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col>
<ons-button modifier="clean" ng-click="gallery.pushPage('markers.html');">
<img src="img/map.jpg">
<p>Mapa</p>
</ons-button>
</ons-col>
</ons-row>
</div>
</div>
</ons-page>
</ons-navigator>
Any idea?
In the case where you use the main page you push the list of places onto the navigator page stack. This works well because you can now push the next page on top of the page stack as well.
In the case when you use the menu you set the main page to the list of places (without a navigator). So when you click it can't push the page since there is no navigator.
Basically you can get to a page like "areas.html" in two different ways, one where you have a navigator and one where you don't. I would advice you to use one navigator per page and have the menu on top of everything so it's always available.