i added ion-nav-back-button to my side menu in ion-nav-bar but the problem that the nav back button hadn't been displayed, i don't know why i tried many attributes but it is still hidden,the following code for my menu layout with side menu code
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainContent" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header id="header" class="bar bar-header bar-balanced">
<h1 class="Side Menu"></h1>
</header>
<ion-content class="has-header" has-subheader="false">
<ion-list>
<ion-item nav-clear menu-close ui-sref="">Home</ion-item>
<ion-item nav-clear menu-close ui-sref="app.account">Account</ion-item>
<ion-item nav-clear menu-close ui-sref="app.help">Help</ion-item>
<ion-item nav-clear menu-close ui-sref="">Sign Out</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<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">Menu</h1>
</ion-header-bar>
<ion-content class="menubox">
<ion-list>
<ion-item menu-close href="#/app/home">Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Related
This is my file in angularjs. I am not able to insert the code for sidemenus. If I include that code, the style of ion-nav-view changes and the page is blank. Pls help me to get to know the exact place I should insert the menu.
<ion-nav-view class="dashboard_pane">
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
<div class="bar bar-footer bar-light" style='background-image:url(../img/advertisement_button.png);background-size:cover;width:100%;height:8%;'></div>
</body>
Is the header section fine ?
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
</ion-nav-bar>
To create side menus in ionic, you have to use <ion-side-menus> directive as parent directive. Inside that you have use 2 directive (3 directives if you are using both right and left menu):
One for main body content <ion-side-menu-content> Main body or <ion-nav-view> will go here. Another for left/right menu : <ion-side-menu side="left">
Example Code:
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios">
<!-- Main body content will go here -->
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<div ng-include src="'templates/left-menu.html'"></div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive header-color">
<!-- Header title and back button codes-->
</ion-nav-bar>
<ion-nav-view animation="slide-ios" class="dashboard_pane">
<!-- Main body content will go here -->
<ion-header-bar class="bar-positive">
<button menu-toggle = "left" class = "button button-icon icon ion-navicon" ng-click="toggleSideMenu()"></button>
<h1 class="title">DASHBOARD</h1>
<button class="button" ng-click="getSyncData()" style='background-image:url(../img/sync.png);width:35px;height:35px;background-size:cover'></button>
</ion-header-bar>
<ion-content padding="true" >
<div class="row">
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size: 100% 100%;'><img ng-src='../img/about.png' ng-click="AboutUs()"/></div>
<div class="col col-60 col-offset-60" style='background-image:url(../img/schbg1.png);width:15px;height:160px;background-size:100% 100%'><img ng-src='../img/contact.png' ng-click="ContactUs()" /></div>
</div>
</ion-content>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" enable-menu-with-back-views="false" width="290">
<ion-content has-header="false">
<!-- Left menu code will go here-->
<!-- You can also create a separate html file for left menu and include like this -->
<!--<div ng-include src="'menu.html'"></div> -->
**<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>**
</ion-content>
</ion-side-menu>
</ion-side-menus>
I am trying to develop an ionic application like screenshot which I put here.
But there is something that I want to know about google map, or whatever the answer is it.
as you see, I opened the sidebar.the thing that I want to do is moving the map during this situation.
is it posible ? thanks in advance..
this is my map.html page.
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-pinpoint" ng-click="goster()"></button>
</ion-nav-buttons>
<ion-content>
<div class="mapWrap" data-tap-disabled="true">
<ng-map center="{{konum.lat}},{{konum.lon}}"
on-click="hideInfo()"
disable-default-u-i="true"
zoom="15">
</div>
</ion-content>
here is my menu.html page.
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="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="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content >
</ion-content>
</ion-side-menu>
</ion-side-menus>
I am new to angular and ionic and would was trying to make an app
<ion-side-menus >
<ion-side-menu-content>
<ion-nav-bar class="bar-assertive nav-title-slide-ios7">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized ">
<h1 class="title">My Test</h1>
</ion-header-bar>
<ion-content class="has-header">
<ion-list>
<ion-item href="#/" class="item-icon-left" menu-close><i class="icon ion-home"></i> Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
My side menu hamburger icon doesnt show up and is always hidden behind the navbar.If i remove the navbar then the icon is visible! how to resolve this please help!
Working code.. Use Ion header .You was using 2 times
<ion-side-menus >
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
<h1 class="title" >Slider </h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-energized ">
<h1 class="title">My Test</h1>
</ion-header-bar>
<ion-content class="has-header">
<ion-list>
<ion-item href="#/" class="item-icon-left" menu-close><i class="icon ion-home"></i> Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
We are working on an application, which uses ngCordova and would like to implement a side menu. The side menu has been implemented, as shown below.
After adding the subheader, the menu looks like this:
This is our code for the side menu:
<ion-view title="Home" ng-app="app.controllers" >
<ion-header-bar class="bar bar-subheader bar-positive">
<h1 class="title">Subheader</h1>
</ion-header-bar>
<ion-side-menus ng-controller="homeCtrl">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<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 bar-dark">
<h1 class="title">Category</h1>
</ion-header-bar>
<ion-list class="dark">
<ion-item nav-clear menu-close href="" class="item item-icon-left" >
<i class="icon ion-ios7-ionic-outline ion-ios-home-outline"></i><span style="color:#666">Home</span>
</ion-item>
<ion-item nav-clear menu-close href="#/tab/home" class="item item-icon-left" >
<i class="icon ion-ios7-help ion-ios-home-outline"></i><span style="color:#666">Home</span>
</ion-item>
<ion-item nav-clear menu-close href="" class="item item-icon-left" >
<i class="icon ion-ios7-help ion-ios-paw-outline"></i><span style="color:#666">Dogs</span>
</ion-item>
<ion-item nav-clear menu-close href="" class="item item-icon-left" >
<i class="icon ion-ios7-help ion-ios-cog-outline"></i><span style="color:#666">Profile Settings</span>
</ion-item>
<ion-item nav-clear menu-close href="" class="item item-icon-left" >
<i class="icon ion-ios7-help ion-ios-checkmark-outline"></i><span style="color:#666">History Orders</span>
</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
</ion-view>
We would like the subheader to move left and right like the menu button, but it is not doing that right now. How can I solve this issue?
You are defining the subheader outside of the element for the side menu, which is why it is not acting the way you would like it to. You can solve this by moving the following code:
<ion-header-bar class="bar bar-subheader bar-positive">
<h1 class="title">Subheader</h1>
</ion-header-bar>
To the<ion-side-menu side="left>:
<ion-side-menu side="left">
<ion-header-bar class="bar-stable bar-dark">
<h1 class="title">Category</h1>
</ion-header-bar>
<ion-header-bar class="bar bar-subheader bar-positive">
<h1 class="title">Subheader</h1>
</ion-header-bar>
I have an ionic side menu. I want to add background-image. Side-Menu codes are the following.
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar-dark">
<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-buttons side="right">
<button class="button button-icon button-clear ion-log-out" ng-click="logout()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" style="background-color:red;">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Dashboard
</ion-item>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Statistics
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
How to add background image to ionic side menu?
You can define your custom CSS as follows:
.my-container {
background-image: url("http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg");
background-repeat: repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 100%;
position: absolute;
}
.transp .item-content {
background-color: transparent !important;
color: #fff;
}
and apply those classes to proper HTML items:
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content class="my-container">
<ion-list>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Dashboard
</ion-item>
<ion-item class="transp" menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>Statistics
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
Here is a codepen: http://codepen.io/beaver71/pen/WrqgNm
Well I don't know exactly if this would be the right way but you can try this in your <ion-content> </ion-content>
<ion-content style="background: url('img/a.jpg'); background-size: cover;">
<ion-list>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Dashboard
</ion-item>
<ion-item menu-close href="#/app/dashboard">
<i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
Statistics
</ion-item>
</ion-list>
</ion-content>
It might help your case.