Create a menu like in AngularJs Material website

Question

I want to create a menu that looks like the one in AngularJs Material website (https://material.angularjs.org)

Answer 1

You could have a look at the accordion from angularui. http://angular-ui.github.io/bootstrap/

Answer 2

You can create your own side menu with their directives menuToggle and menuItem, and their menu service, which are found in their source files. I have used this menu in many projects, so I know it works. All you have to do is implement it the same way. I have wrote a blog post that goes through this found here:

How to create an Angular Material Side Menu

Answer 3

You don't NEED any of this, if you want an identical UX and appearance, I guess there is no reason not to import the service and all. But, if all you want is the collapsability you could solve this with the ng-class directive without importing much; depending how you have your scope setup you might need a different variable for each collapsable zone, something like this:

<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div>
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable">
    Stuff that gets hidden
    <div>More stuff to hide</div>
</div>

In your controller $scope declarations

$scope.collapsedA = true //if you want it to start collapsed

and then in your css something like

.collapsable{
    transition: all .2s ease-in-out;
    min-height: 20px;
    overflow: hidden;
}
.collapsable.collapsed{
    height: 0;
    min-height: 0;
}

Answer 4

Just check out the answer here: https://stackoverflow.com/a/38258961/1904479,

The http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html has a good implementation of the accordion or the expandable list views.

Answer 5

There are at least a few pre-built directives for this now... a couple of examples:

• angular-material-sidenav
• angular-material-sidemenu

Answer 6

You will need to wait for mdListItem to support an expand/collapse control. This is tentatively scheduled for 0.9.0.

See https://github.com/angular/material/issues/985