顶部的离子侧菜单

Question

我从离子开始，在这个项目中，我需要从顶部显示菜单，但在顶部栏后面。

当然，我调查了ionic doc's side menu。 另见this，但我认为这不是最好的解决方案。 你能帮帮我吗？

Answer 1

您可以根据需要查看以下链接。

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');
});

}）（）;