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)

Unfortunately there is not documentation or demo to do that.

Any ideas?

Thanks

Answer 1

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 2

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

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

Answer 3

As @Splaktar says, you can wait for the official mdListiItem in milestone 0.9.0.

And you can also checkout the whole angular-material project source code and look into here https://github.com/angular/material#building or README.md to build the docs.

First install or update your local project's npm tools:

# First install all the NPM tools:
npm install
# Or update
npm update

Then run the gulp tasks:

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

Then you should see the codes you need in 'docs.js', 'css/docs.css' and 'index.html' in the output folder 'dist/docs'.

The 'docs.js' in 'dist/docs' is different from the 'docs.js' in the origin 'docs' folder. Many codes are generated and concated together when you build the docs including those you need.

After you build the docs, the fastest way to get the codes you need is to search 'menuToggle' or 'menuLink' directive or 'menu' factory in 'dist/docs/docs.js'.

Hope this can help you.

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

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

Answer 7

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