離子側菜單隱藏我所有的主要內容

我試圖在我的應用程序上實現一個側欄，所以我能夠存儲菜單相關的選項，但我的問題是，只要我整合離子 - 側欄菜單，它總是隱藏我的主要內容。離子側菜單隱藏我所有的主要內容

例如，每當我不在代碼中添加邊欄指令時，即使使用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>

來源

2015-10-28 user2188838

請檢查您的代碼，因爲您提供的代碼缺少打開的離子菜單聲明。 – jeff

是的，這是從我的編輯器複製代碼的錯誤。我甚至使用了https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html中的代碼，並嘗試了它，我仍然可以獲得：http://i.imgur.com/ FPfqhuo.png？1。我有一個幻燈片菜單作爲主要內容，其旁邊的菜單與它重疊 – user2188838

您能否提供一個運動員或codepen？ –

您必須添加滑動框離子含量容器&添加「有頭」類，以便它可以利用離子導航頭進去。也就是說，這裏是解決方案：

<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-content class="has-header"> 
      <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> 
    </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> 


<script> 
    angular.module('ionicApp', ['ionic', 'ngMaterial']) 
      .controller('MyCtrl', function ($scope) { 
      }); 
</script> 

</body> 
</html>

來源

2016-02-21 16:52:38 Devner

離子側菜單隱藏我所有的主要內容

回答

相關問題