Ionic side menu from top - angularjs

Question

i'm starting on ionic, and in this project I need the menu to show from top, but behind the top bar.
Of course I looked into the ionic doc's side menu.
Also saw this but I don't think it's the best solution.
Can you help me with that?

Answer 1

You can have a look at below link just as you want.
http://jsfiddle.net/brayancastrop/fgcruwxg/1/
(function () {
angular.module('sampleApp', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
})
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html"
}
}
})
.state('app.event', {
url: "/events/:id",
views: {
'menuContent': {
templateUrl: "templates/event.html"
}
}
})
.state('app.conference', {
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/conference.html"
}
}
})
.state('app.conference.information', {
url: "/events/:id/conferences/:conferenceId/information",
views: {
'conferenceInformation': {
templateUrl: "templates/conference/information.html"
}
}
})
.state('app.conference.presentation', {
url: "/events/:id/conferences/:conferenceId/presentation",
views: {
'conferencePresentation': {
templateUrl: "templates/conference/presentation.html"
}
}
})
.state('app.conference.questions', {
url: "/events/:id/conferences/:conferenceId/questions",
views: {
'conferenceQuestions': {
templateUrl: "templates/conference/questions.html"
}
}
})
.state('app.conference.notes', {
url: "/events/:id/conferences/:conferenceId/notes",
views: {
'conferenceNotes': {
templateUrl: "templates/conference/notes.html"
}
}
});
$urlRouterProvider.otherwise('/events');
});
})();