Различные боковые меню на разных страницах

Я хочу сделать приложение с различным боковым меню в зависимости от выбранной страницы.Различные боковые меню на разных страницах

Я имею в виду,

, когда на странице дома, я хочу на стороне левого меню с домом меню.
, если на странице покупки, я хочу, чтобы левое меню с меню магазинов.

Может ли кто-нибудь дать мне указания относительно того, как я могу это сделать?

источник

2015-10-22 Afrgun

этот путь очень полезно => http://codepen.io/calendee/pen/bBcDm?editors=101 – Afrgun

Добро пожаловать на Stack Overflow. Я отредактировал сообщение, чтобы исправить несколько ошибок на английском языке. И я использовал пули для ваших двух случаев. Это делается с помощью тире и пробела в начале строки. –

Я сделал небольшую демонстрацию согласно вашим требованиям. Надеюсь, это вам поможет.

Plunker demo

Вам нужно создать два боковых меню в вашем index.html файле (справа и слева).

<ion-side-menu side="right"> 
    <!-- Your left side menu content goes here --> 
</ion-side-menu> 
<ion-side-menu side="right"> 
    <!-- Your right side menu content goes here --> 
</ion-side-menu>

index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" /> 
    <title>Ionic Framework Example</title> 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" /> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    <script src="app.js"></script> 
</head> 

<body> 
    <ion-side-menus> 
     <ion-pane ion-side-menu-content> 
      <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
       <ion-nav-back-button class="button-clear"> 
        <i class="ion-arrow-left-c"></i> Back 
       </ion-nav-back-button> 
      </ion-nav-bar> 
      <ion-nav-view animation="slide-left-right"></ion-nav-view> 
     </ion-pane> 
     <ion-side-menu side="left"> 
      <ion-content id="menu" has-header="true" ng-controller="mainCtrl"> 
       <ion-list style="background-color: black !important;border-bottom:white;"> 
        <ion-item style="border-style:none !important;"> 
         &nbsp;Status 
        </ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Profile</ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Address</ion-item> 
       </ion-list> 
      </ion-content> 
     </ion-side-menu> 
     <ion-side-menu side="right"> 
      <ion-content id="menu" has-header="true" ng-controller="mainCtrl"> 
       <ion-list style="background-color: black !important;border-bottom:white;"> 
        <ion-item style="border-style:none !important;"> 
         &nbsp;Status 
        </ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;Edit profile</ion-item> 
        <ion-item nav-clear menu-close class="cb-lateral"> 
         &nbsp;change address</ion-item> 
       </ion-list> 
      </ion-content> 
     </ion-side-menu> 
    </ion-side-menus> 
</body> 

</html>

home.html

<ion-view title="User"> 
    <div class="bar bar-header bar-light"> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenuLeft()"></button> 
     <div style="width:100%"> 
     </div> 
     </div> 
    <ion-content padding="true"> 
    </ion-content> 
</ion-view>

settings.html

<ion-view title="User"> 
    <div class="bar bar-header bar-light"> 
     <div style="width:100%"> 
     </div> 
     <button class="button button-icon button-clear ion-navicon" ng-click="openMenuRight()"></button> 
    </div> 
    <ion-content padding="true"> 
    </ion-content> 
</ion-view>

контроллер

app.controller('mainCtrl', function($scope, $state, $ionicSideMenuDelegate) { 

    $scope.openMenuLeft = function() { 
     $ionicSideMenuDelegate.toggleLeft(); 
    }; 
    $scope.openMenuRight = function() { 
     $ionicSideMenuDelegate.toggleRight(); 
    }; 

});

источник

2015-10-22 08:09:23 Muhsin

Благодарим вас за ответ. , но ранее я сделал меню справа и влево, но есть несколько страниц, которые нуждаются в другом меню слева. , и я уже включил ссылку, которая действительно помогла мне. :) – Afrgun

Спасибо за демо. Но если вы проведите пальцем влево или проведите пальцем вправо, тогда появится меню. Это не сработает. :(как мы можем отключить определенный эффект справа или слева – Mayur

@Mayur Отвечено обновлено – Muhsin

Различные боковые меню на разных страницах

ответ

Смежные вопросы