I am developing an android application using cordova and ionic framework.I am side menus and tab menus for navigation .How can use a tab menu in page which is loaded using a side menu.Here is app.js file
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
/*--------------------menus in sidebar----------------------------------------------*/
.state('app.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: 'homeCtrl'
}
}
})
.state('app.announcements', {
url: "/announcements",
views: {
'menuContent' :{
templateUrl: "templates/announcements.html",
controller:'announcementCtrl'
}
}
})
.state('app.deals', {
url: "/deals",
views: {
'menuContent' :{
templateUrl: "templates/deals.html",
controller:'dealsCtrl'
}
}
})
.state('app.dining', {
url: "/dining",
views: {
'menuContent' :{
templateUrl: "templates/dining.html",
controller:'diningCtrl'
}
}
})
.state('app.director', {
url: "/director",
views: {
'menuContent' :{
templateUrl: "templates/director.html"
}
}
})
.state('app.contact', {
url: "/contact",
views: {
'menuContent' :{
templateUrl: "templates/contact.html"
}
}
})
.state('app.about_app', {
url: "/about_app",
views: {
'menuContent' :{
templateUrl: "templates/about_app.html"
}
}
})
.state('app.quiz_register', {
url: "/quiz_register",
views: {
'menuContent' :{
templateUrl:'templates/register.html',
controller:'RegisterCtrl'
}
}
})
.state('app.quiz_web', {
url: "/quiz_web",
views: {
'menuContent' :{
templateUrl:'templates/registermodel.html',
controller:'WebCtrl'
}
}
})
/*----------------------------------menus in sidebar--------------------------------------------*/
/*----------------------------------menus in homepage--------------------------------------------*/
.state('app.about_gksf', {
url: "/about_gksf",
views: {
'menuContent' :{
templateUrl: "templates/about_gksf.html"
}
}
})
.state('app.culture', {
url: "/culture",
views: {
'menuContent' :{
templateUrl: "templates/culture.html"
}
}
})
.state('app.sponsors', {
url: "/sponsors",
views: {
'menuContent' :{
templateUrl: "templates/sponsors.html"
}
}
})
.state('app.gallery', {
url: "/gallery",
views: {
'menuContent' :{
templateUrl: "templates/gallery.html",
controller:'galleryCtrl'
}
}
})
/*---------------------------------menus in homepage----------------------------------------*/
/*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/
.state('app.announcementsitem', {
url: "/announcementsitem/:itemId",
views: {
'menuContent' :{
templateUrl: "templates/announcementsitem.html",
controller:'announcementdetailCtrl'
}
}
})
/*---------------------------------ANNOUNCEMENT ITEM----------------------------------------*/
/*---------------------------------DEALS ITEM----------------------------------------*/
.state('app.dealsitem', {
url: "/dealsitem/:dealId",
views: {
'menuContent' :{
templateUrl: "templates/dealsitem.html",
controller:'dealsdetailsCtrl'
}
}
})
/*---------------------------------DEALS ITEM----------------------------------------*/
/*---------------------------------DINING ITEM----------------------------------------*/
.state('app.diningitem', {
url: "/diningitem/:diningId",
views: {
'menuContent' :{
templateUrl: "templates/diningitem.html",
controller:'diningdetailCtrl'
}
}
})
/*---------------------------------DINING ITEM----------------------------------------*/
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'menuContent' :{
templateUrl: "templates/playlist.html",
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
This is what i am trying to do.
1.When i click the side menu QUIZ quiz page is loaded
2.Here i want use the TAB menu
You can use Striped Style Tabs. It fulfills your exact need and with few CSS tweaks you can make it look like the one you posted. See official documentation here (http://ionicframework.com/docs/components/#striped-style-tabs)