I want to create multilevel side menu in my ionic app.
My current code is:
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item-icon-left" menu-close href="#/app/ProSum">
<i class="icon ion-android-clipboard" ></i>Profile Summary
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/AspDash">
<i class="icon ion-easel" ></i>Aspirations Dashboard
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/Profile">
<i class="icon ion-android-contact" ></i>Profile
</ion-item>
<ion-item class="item-icon-left" menu-close href="#/app/SignOut">
<i class="icon ion-log-out" ></i>Sign Out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I click on any option, more options list should be displayed.
Profile Summary
Option 1
Option 2
Profile
Option 1
Option 2
Option 3
Related
I want to remove the back button from the navigation pane in ionic .
I tried using hide-back-button , $ionicHistory , $ionicHandleDelegate but it do=id not serve my purpose. I just dont want to navigate to previous page using "Back" because the menu button serves the purpose.
My html goes like this
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/home">
Home
</ion-item>
<div ng-repeat = "opt in menuOptions">
<ion-item ng-click = "toggleOptions(opt)">
{{opt.name}}
</ion-item>
<ion-item menu-close ng-repeat = "item in opt.items" ng-show = "opt.show" ng-click = "toggleSubOptions(item)">
{{item.itemName}}
</ion-item>
</div>
<ion-item menu-close href="#" ui-sref="app.resetpass">
Reset Password
</ion-item>
<ion-item menu-close href="#" ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
My Controller goes this way
serveApp.controller('AppCtrl', ['$scope','$state','$auth',function($scope,$state,$auth) {
console.log("App Ctrl");
$scope.menuOptions = [{
{
name : 'Opt2',
show : false,
items : [],
goTo: "app.page2"
},
{
name : 'Opt2',
show : false,
items : [],
goTo: "app.page2"
}
];
$scope.toggleOptions = function (option){
if(option.items.length != 0){
//console.log("suboption",option)
option.show = !option.show;
} else {
//console.log("no sub")
$state.go(option.goTo);
}
};
I have tried several code samples to get a back button in my home page. I couldnt see the nav back button. Where i am wrong?
<ion-side-menus enable-menu-with-back-views="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span>R</span>
<p align="center"> My App</p>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.settings">
Settings
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.logout">
Log out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home page code
<ion-view title="Home">
<ion-content>
<div class="list card">
<a class="item item-icon-left assertive" ui-sref="makerequest">
<i class="icon ion-ios-list-outline"></i>
Make New Request
</a>
<a class="item item-icon-left assertive" ui-sref="viewrequest">
<i class="icon ion-ios-copy"></i>
View Request
</a>
</div>
</ion-content>
</ion-view>
Added my home page code above.
Regards,
Sabarisri
I've a simple application with a side menu where you can navigate to different views. If I click on an item I get redirected to that view but the back button doesn't show up, which seems to be the default behaviour.
Is there a build in way to show the back button on side menu navigation?
I've found this codepen on the ionic forum which uses the same basic structure as I do: http://codepen.io/mhartington/pen/azwojR
This is my complete menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content id="header-wrapper">
<div id="logoHeader" class="bar bar-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<img src="img/rg-gunz-christmas.png" />
</div>
<ion-nav-bar id="header" class="bar bar-header">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu id="menu" side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="account">
<img ng-src="{{account.AvatarUrl}}" class="avatar"/>
<div class="username">{{account.UserID}}</div>
</div>
<ion-list>
<ion-item menu-close href="#/app/main">
<i class="icon ion-home"></i> <span class="padding-left">Home</span>
</ion-item>
<ion-item menu-close href="#/app/login" ng-show="!account">
<i class="icon ion-log-in"></i> <span class="padding-left">Login</span>
</ion-item>
<ion-item menu-close href="#/app/register" ng-show="!account">
<i class="icon ion-person"></i> <span class="padding-left">Register</span>
</ion-item>
<ion-item menu-close href="#/app/individualRanking">
<i class="icon ion-arrow-graph-up-right"></i> <span class="padding-left">Individual ranking</span>
</ion-item>
<ion-item menu-close href="#/app/clanRanking">
<i class="icon ion-ios-bolt"></i> <span class="padding-left">Clan ranking</span>
</ion-item>
<ion-item menu-close href="#/app/statistics">
<i class="icon ion-stats-bars"></i> <span class="padding-left">Statistics</span>
</ion-item>
<div class="item item-divider" ng-show="account">
Account
</div>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-settings"></i> <span class="padding-left">Settings</span>
</ion-item>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-log-out"></i> <span class="padding-left">Log out</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
its hard to predict here.just check may be some other view is override in the view which is opening.
i had same problem.may be this could help you.
place ion-nav-bar in particular view, where u want to show back button!
<ion-view view-title="Order Details">
<ion-nav-bar class=" dark">
<ion-nav-back-button class="button-clear button-dark stable ">
<i class="ion-arrow-left-c stable"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="content-stable"></ion-content>
</ion-view>
Try this code: You can add this class ion-ios-arrow-back or ion-ios7-arrow-back
<ion-side-menu-content >
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="link" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
Does anyone know how can I add a back button to the second level? In my example I need the back button when I'm on the "Settings" page:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear" ng-click="goBack()">Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="side-menu" slide-along offset="-15">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="#/event/settings" class="item" menu-close>Settings</a>
</ul>
</ion-content>
</ion-side-menu>
If I remove menu-close from the button, it's acting weird.
I have a side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="300">
<ion-content>
<div class="list">
<a class="item item-icon-left" ui-sref="app.bla" menu-close>
<i class="icon menu-icon ion-home"></i>
<h2>Bla</h2>
</a>
<a class="item item-icon-left" ui-sref="app.blub" menu-close>
<i class="icon menu-icon ion-person"></i>
<h2>Blub</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And i want to modify the title which is set in each view:
<ion-view view-title="MyTitle">
<ion-content>
</ion-content>
</ion-view>
How can i modify the title like setting it to bold or let it left align or right?