# md-menu

> Angular 2 Material menu

Latest version **0.0.1-alpha.1** (published 2016-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install md-menu
pnpm add md-menu
yarn add md-menu
bun add md-menu
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.1 |
| Published | 2016-08-31 |
| First published | 2016-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | dharmeshpipariya |
| Keywords | angular, material, material design, components, menu |

## Links

- npm: https://www.npmjs.com/package/md-menu
- Repository: https://github.com/Promact/material2
- Homepage: https://github.com/Promact/material2#readme
- Issues: https://github.com/angular/material2/issues
- npm.io page: https://npm.io/package/md-menu

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.1-alpha.1 (latest) — 2016-08-31

## README

# md-menu

Native Angular2 Material Menu directive

## Installation
`npm install --save md-menu`

## API

Example:
 
HTML sample code
 ```html
//simple menu
<div md-menu>
  <button class="btn btn-primary" md-menu-open>Default Menu <span class="caret"></span></button>
  //add directional class to open menu from specific direction i.e. class="md-menu-content right top"
  <ul class="md-menu-content">
    <li><a class="md-menu-item">Badman</a></li>
    <li><a class="md-menu-item">Sadman</a></li>
    <li><a class="md-menu-item">Lieman</a></li>
  </ul>
</div>

//Multi level menu
<div md-menu>
  <button class="btn btn-primary" md-menu-open>Default Menu <span class="caret"></span></button>
  <ul class="md-menu-content">
    <li><a class="md-menu-item">Badman</a></li>
    <li><a class="md-menu-item">Sadman</a></li>
    <li><a class="md-menu-item">Lieman</a></li>
    <li md-menu>
      // add 'md-menu-not-closable' attribute directive to open next level menu.
      <a class="md-menu-item" md-menu-not-closable md-menu-open>2nd Level Menu <span class="caret"></span></a>
      <ul class="md-menu-content">
        <li><a class="md-menu-item">Badman</a></li>
        <li><a class="md-menu-item">Sadman</a></li>
        <li><a class="md-menu-item">Lieman</a></li>
      </ul>
    </li>
  </ul>
</div>
 ```

TS sample code
 ```ts
//app-module.ts

import {MdMenuModule} from 'md-menu/menu';

@NgModule({
  imports: [
    MdMenuModule,
  ],
  declarations: [
    ...
  ]  
})

//component.ts
...

@Component({
    selector: "..."
})

export class ... {
    
    ...
    
}
 ```

Add Css in your code
```css
[md-menu] { position: relative; display: inline-block; }
[md-menu] .md-menu-content { position: absolute; top: 0; left: 0; display: inline-block; background: #fff; list-style: none; min-width: 100px; padding: 8px 0; margin: 0; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -moz-transition: all .4s linear; -o-transition: all .4s linear; -webkit-transition: all .4s linear; transition: all .4s linear; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12); z-index: 1; border-radius: 2px; }
[md-menu] .md-menu-content.right { left: auto; right: 0; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; }
[md-menu] .md-menu-content.top { top: auto; bottom: 0; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
[md-menu] .md-menu-content.top.right { -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; }
[md-menu].open > .md-menu-content { -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
[md-menu] li { position: relative; display: block; }
[md-menu] .md-menu-item { position: relative; display: block; padding: 0 16px; line-height: 36px; color: rgba(0,0,0,.87); cursor: pointer; text-decoration: none; white-space: nowrap; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; }
[md-menu] .md-menu-item:hover { background-color: rgba(158,158,158,0.2); }
```

### Directives

  - `md-menu` - Main directive.
  - `md-menu-open` - On click to open menu using this directive.
  - `md-menu-not-closable` - Prevent on click to close the menu using this directive.

---
_Source: https://npm.io/package/md-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._