Javascript 爱奥尼亚侧菜单隐藏了我所有的主要内容_Javascript_Html_Css_Ionic Framework

Javascript 爱奥尼亚侧菜单隐藏了我所有的主要内容

javascript html css ionic-framework

Javascript 爱奥尼亚侧菜单隐藏了我所有的主要内容,javascript,html,css,ionic-framework,Javascript,Html,Css,Ionic Framework,我试图在我的应用程序上实现一个侧栏，这样我就可以在其中存储菜单相关的选项，但我的问题是，每当我集成ion侧栏菜单时，它总是隐藏我的主要内容例如，每当我在代码中不添加侧栏指令时，一切都正常工作，即使我使用的是ionic头栏指令。但每当我将标题栏包装在侧菜单中时，它之外的所有内容都会消失。除非我将其从DOM中删除，否则就好像侧菜单推送或重叠所有其他现有内容一样请参阅下面的屏幕截图。我应该看到侧菜单右侧的内容：谢谢大家! 离子模板左边登录搜寻浏览播放列表蓝色黄色的粉红色您必

我试图在我的应用程序上实现一个侧栏，这样我就可以在其中存储菜单相关的选项，但我的问题是，每当我集成ion侧栏菜单时，它总是隐藏我的主要内容

例如，每当我在代码中不添加侧栏指令时，一切都正常工作，即使我使用的是ionic头栏指令。但每当我将标题栏包装在侧菜单中时，它之外的所有内容都会消失。除非我将其从DOM中删除，否则就好像侧菜单推送或重叠所有其他现有内容一样

请参阅下面的屏幕截图。我应该看到侧菜单右侧的内容：

谢谢大家!


离子模板
左边
登录
搜寻
浏览
播放列表
蓝色
黄色的
粉红色

您必须将幻灯片框添加到ion内容容器中，并将“has header”类添加到其中，以便将ion nav header考虑在内。也就是说，解决方案如下：

<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>


离子模板
蓝色
黄色的
粉红色
左边
登录
搜寻
浏览
播放列表
角度模块（'ionicApp'，['ionic'，'ngMaterial']））
.controller（'MyCtrl'，函数（$scope）{
});

您必须将幻灯片框添加到ion内容容器中，并将“has header”类添加到其中，以便将ion nav header考虑在内。也就是说，解决方案如下：

<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>


离子模板
蓝色
黄色的
粉红色
左边
登录
搜寻
浏览
播放列表
角度模块（'ionicApp'，['ionic'，'ngMaterial']））
.controller（'MyCtrl'，函数（$scope）{
});

检查您的代码，因为您提供的内容缺少打开离子侧菜单声明。是的，从我的编辑器复制代码是一个错误。我甚至使用了来自的代码并尝试了它，但仍然得到了以下结果：。我有一个幻灯片菜单作为主要内容，它好像侧面菜单重叠。你能提供一个plunker或codepen吗？Code pen和在Op上编辑的更新代码检查你的代码，因为你提供的缺少打开ion侧面菜单声明。是的，从我的编辑器复制代码是一个错误。我甚至使用了来自的代码并尝试了它，但仍然得到了以下结果：。我有一个幻灯片菜单作为主要内容，它好像侧面菜单重叠。你能提供一个plunker或codepen吗？Code pen和更新的代码在OP上编辑