angular-mega-menu
This is angular mega menu, base on angular-ui/bootstrap dropdown directive and geedmo/yamm3.
Angular mega menu is extend from dropdown directive, so you use it just like using dropdown directive.
How to Use
- Include JavaScript and CSS.
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bower_components/yamm3/yamm/yamm.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="src/js/angular-mega-menu.js"></script>- Configure angular module
angular.module('test', ['mega-menu']);- Use bootstrap-ui dropdown directive
- Use dropdown directive.
- Set
toggle-eventattribute, default value is'click', you can set value'mouseover'.
...
<li class="dropdown" uib-dropdown auto-close="outsideClick">
<a class="dropdown-toggle" uib-dropdown-toggle toggle-event="mouseover" href="#">Classic<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#"> Action </a></li>
<li><a tabindex="-1" href="#"> Another action </a></li>
<li><a tabindex="-1" href="#"> Something else here </a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"> Separated link </a></li>
</ul>
</li>
...Example
Please visit http://get-set.cn/angular-mega-menu/
How to extend angular directive
You can refer Experiment: Decorating Directives or My Note