CODEWITHSUNDEEP
angularjsangular-material
Bassel Ahmed
Bassel Ahmed

Reputation: 43

md-menu behaviour in Angular Material

I Would like to have multiple md-menus and make each one open closing the other not having to close the already opened one first? how to change the default behaviour?

Here is a fiddle to illustrate: https://jsfiddle.net/w1pf0et5/

<body ng-app="BlankApp" ng-cloak>

<md-menu md-offset="10 60" >
            <!-- Trigger element is a md-button with an icon -->
            <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
            open first
            </md-button>
            <md-menu-content width="6" id="messages">

                <md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
                    Test 1
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                    Test 2
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                   Test 3
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                   Test 4
                </md-button></md-menu-item>

            </md-menu-content>
        </md-menu>

        <md-menu md-offset="10 60" >
            <!-- Trigger element is a md-button with an icon -->
            <md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
            open second
            </md-button>
            <md-menu-content width="6" id="messages">

                <md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
                    Test 1
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                    Test 2
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                   Test 3
                </md-button></md-menu-item>

                <md-menu-item><md-button ng-click="doSomething()">
                   Test 4
                </md-button></md-menu-item>

            </md-menu-content>
        </md-menu>

        <script>
            angular.module('BlankApp', ['ngMaterial']);

        </script>

Upvotes: 3

Views: 6982

Answers (1)

nextt1
nextt1

Reputation: 3988

You have to use md-menu-bar with md-toolbar to get the desired result and you must use button in place of md-button for opening menu(Trigger Element). Check the following pen for example.

http://codepen.io/next1/pen/vGXOaY

Upvotes: 1

Related Questions