【发布时间】：2016-02-22 00:52:38
【问题描述】：
我正在尝试在我的应用程序上实现一个侧边栏，以便能够在其中存储与菜单相关的选项，但我的问题是，每当我集成 ion-side-bar-menu 时，它总是隐藏我的主菜单内容。
例如，只要我不在我的代码中添加侧边栏指令，一切都会正常运行，即使我使用 ionic-header-bar 指令也是如此。但是，每当我将标题栏包含在侧菜单中时，它之外的所有内容都会消失。除非我将其从 DOM 中删除，否则就好像侧面菜单会推送或重叠所有其他现有内容。
请参阅下面的屏幕截图。我应该会看到侧边菜单右侧的内容：
谢谢！
http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<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">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>
【问题讨论】：
-
检查您的代码，因为您提供的内容缺少打开的 ion-side-menus 声明。
-
是的，从我的编辑器复制代码是一个错误。我什至使用了github.com/driftyco/ionic-starter-sidemenu/blob/master/… 的代码并尝试了它，但我仍然得到这个：i.imgur.com/FPfqhuo.png?1。我有一个幻灯片菜单作为主要内容，它好像侧面菜单与它重叠
-
你能提供一个 plunker 或 codepen 吗？
-
在 OP 上编辑的代码笔和更新代码
标签： javascript html css ionic-framework