Skip to content

Instantly share code, notes, and snippets.

@wamburu wamburu/menu.html
Created Jan 17, 2017

Embed
What would you like to do?
Side Menu example ionic 1
<ion-view class="ionic" ng-controller="AccountCtrl" scroll="true">
<ion-side-menus ng-controller="NavCtrl">
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar bar-header bar-positive">
<button class="button icon ion-navicon" ng-click="showMenu()"></button>
<a href="#/about/home" class="button icon ion-more pull-right"></a>
<!-- <ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a href="#/about/home">
<button class="button button-icon button-clear ion-information">
</button>
</a>
</ion-nav-buttons> -->
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-light">
<ion-tab title="Home" icon="ion-arrow-graph-up-left" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<!-- <ion-tab title="Dev" icon="ion-ios7-information" href="#/tab/dev">
<ion-nav-view name="dev-tab"></ion-nav-view>
</ion-tab> -->
<!-- <ion-tab title="Account" icon="ion-person" href="#/tab/account">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab> -->
<ion-tab title="Notices" icon="ion-clipboard" href="#/tab/not">
<ion-nav-view name="not-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Panel</h1>
</ion-header-bar>
<ion-content has-header="true" class="ionic" scroll="true">
<div class="list ionic">
<a class="item item-avatar" href="#/tab/account">
<img ng-src="{{currentUser.avatar}}">
<h2>Hi @<b>{{currentUser.username}}</b></h2>
<p>Welcome Back</p>
</a>
<ul class="ionic">
<div class="item item-divider">
Home
</div>
<li>
<a class="item item-icon-right" menu-close nav-clear href="#/tab/home" >
<i class="icon ion-mic-b"></i>
<h2 class="menu-text">What's Happening</h2> </a>
</li>
<li>
<a class="item item-icon-right" menu-close href="#/articles">
<i class="icon ion-radio-waves"></i>
<h2 class="menu-text">News</h2>
</a>
</li>
<li>
<a class="item item-icon-right" menu-close href="#/notices">
<i class="icon ion-clipboard"></i>
<h2 class="menu-text">Notices</h2>
</a>
</li>
<div class="item item-divider">
Academics
</div>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/elibrary">
<i class="icon ion-laptop"></i>
<h2 class="menu-text">Elibrary</h2> </a>
</li>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/academics/reminders">
<i class="icon ion-clock"></i>
<h2 class="menu-text">Reminders</h2> </a>
</li>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/academics">
<i class="icon ion-more"></i>
<h2 class="menu-text">More...</h2> </a>
</li>
<div class="item item-divider">
E-Learning Portal
</div>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/tour">
<i class="icon">
<span class="icon badge badge-assertive">Coming Soon</span>
</i>
</a>
</li>
<div class="item item-divider">
School
</div>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/tour">
<i class="icon ion-map"></i>
<h2 class="menu-text">Take A Tour</h2> </a>
</li>
<li>
<a class="item item-icon-right" nav-clear menu-close href="#/eservices">
<i class="icon ion-help-buoy"></i>
<h2 class="menu-text">E-Services</h2> </a>
</li>
<div class="item item-divider">
Account
</div>
<li>
<a class="item item-icon-right" menu-close href="#/tab/account">
<i class="icon ion-person"></i>
<h2 class="menu-text">My Profile</h2> </a>
</li>
<li>
<a class="item item-icon-right" menu-close ng-click="logout()">
<i class="icon ion-log-out"></i>
<h2 class="menu-text">Logout</h2> </a>
</li>
<li>
<a class="item item-icon-right" menu-close href="#/about/feedback">
<i class="icon ion-email"></i>
<h2 class="menu-text">FeedBack</h2> </a>
</li>
<div class="item item-divider">
</div>
</ul>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.