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.
- 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" dropdown> <a class="dropdown-toggle" 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> ...Please visit http://get-set.cn/angular-mega-menu/
You can refer Experiment: Decorating Directives or My Note