CODEWITHSUNDEEP
androidionic-framework
Afrgun
Afrgun

Reputation: 313

Different side menu on different page

I want to make an app with different side menu depending on the page chosen.

I mean,

Can someone give me directives on how I can do that ?

Upvotes: 2

Views: 770

Answers (1)

Muhsin Keloth
Muhsin Keloth

Reputation: 7954

I have made a small demo as per your requirements.Hope this will help you.

Plunker demo

You need to create two side menus in your index.html file(right and left).

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

controller

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

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

});

Upvotes: 1

Related Questions