将介绍如何用AngularJS构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，AngularJS能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。
本文将介绍如何实现多限级导航菜单。
目录
1.静态多级菜单实现
2.动态多级菜单实现
1. 静态多级菜单实现
要实现多级菜单，我们要分两步走，第一步就是把静态菜单的功能实现，通过纯静态的HTML代码完成。第二步，通过Angluarjs进行动态实现，最后把数据和程序分离，通过Ajax加载多级菜单数据。
我们先从静态多级菜单开始动手，一个六级导航菜单是什么样子呢？
如上图所示，我们定义一些功能需求。
1级菜单是导航条上的文字。
当1级菜单导航事件被触发，显示2级菜单导航，在1级菜单的正下方显示。
当2级菜单导航事件被触发，显示3级菜单导航，在2级菜单的右方显示。
当3级菜单导航事件被触发，显示4级菜单导航，在3级菜单的右方显示。
以此类推，不考虑下级菜单显示出界问题。
继续上文中的项目环境，增加一个新HTML文件: page3.html
~ vi D:\workspace\javascript\angular-navbar\page3.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>多级导航菜单</title> <meta content="多级导航菜单"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0"> <meta content="!" /> <link href="https://www.jb51.net/bower_components/bootstrap/dist/css/bootstrap.min.css" > <link href="https://www.jb51.net/css/main.css" > </head> <body ng-app="page2"> <div> <div ng-controller="NavbarCtrl"> <nav role="navigation"> <div> <a href="#" >多级菜单导航</a> </div> <div> <ul> <li><a href="#" >Link</a></li> <li><a href="#" >Link</a></li> <li> <a href="#" data-toggle="dropdown">Multi Level <b></b></a> <ul> <li><a href="#" >Level 1</a></li> <li> <a tabindex="-1" href="#" >More options</a> <ul> <li><a tabindex="-1" href="#" >Level 2</a> </li> <li> <a href="#" >More..</a> <ul> <li><a href="#" >Level 3</a> </li> <li><a href="#" >Level 3</a> </li> <li> <a href="#" >More..</a> <ul> <li><a href="#" >Level 4</a> </li> <li><a href="#" >Level 4</a> </li> <li> <a href="#" >More..</a> <ul> <li><a href="#" >Level 5</a> </li> <li><a href="#" >Level 5</a> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#" >Level 2</a> </li> <li><a href="#" >Level 2</a> </li> </ul> </li> <li><a href="#" >Level 1</a></li> </ul> </li> </ul> </div> </nav> </div> </div> <script src="https://www.jb51.net/bower_components/jquery/dist/jquery.min.js"></script> <script src="https://www.jb51.net/bower_components/angular/angular.min.js"></script> <script src="https://www.jb51.net/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/bower_components/angular-route/angular-route.min.js"></script> <script src="https://www.jb51.net/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="https://www.jb51.net/js/app.js"></script> </body> </html>
新建一个css文件：main.css
~ vi D:\workspace\javascript\angular-navbar\css\main.css .dropdown:hover .menu-top { display: block; } .dropdown-submenu{ position:relative; } .dropdown-submenu > .dropdown-menu{ top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu{ display:block; } .dropdown-submenu > a:after{ display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover > a:after{ border-left-color:#ffffff; } .dropdown-submenu .pull-left{ float:none; } .dropdown-submenu.pull-left > .dropdown-menu{ left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; }