Create a menu like in AngularJs Material website

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

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

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.

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.

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

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