编程 Javascript

AngularJS+Bootstrap3多级导航菜单的实现代码

Posted in Javascript onAugust 16, 2017

将介绍如何用AngularJS构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，AngularJS能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

本文将介绍如何实现多限级导航菜单。

1.静态多级菜单实现

2.动态多级菜单实现

1. 静态多级菜单实现

要实现多级菜单，我们要分两步走，第一步就是把静态菜单的功能实现，通过纯静态的HTML代码完成。第二步，通过Angluarjs进行动态实现，最后把数据和程序分离，通过Ajax加载多级菜单数据。

我们先从静态多级菜单开始动手，一个六级导航菜单是什么样子呢？

AngularJS+Bootstrap3多级导航菜单的实现代码

如上图所示，我们定义一些功能需求。

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 name="description" content="多级导航菜单">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page2">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
    <a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >多级菜单导航</a>
   </div>
   <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
     <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
     <li class="dropdown">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
      <ul class="dropdown-menu menu-top">
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
       <li class="dropdown-submenu"> <a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More options</a>
        <ul class="dropdown-menu">
         <li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
         <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
          <ul class="dropdown-menu">
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
           </li>
           <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
           </li>
           <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
            <ul class="dropdown-menu">
             <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
             </li>
             <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
             </li>
             <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
              <ul class="dropdown-menu">
               <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
               </li>
               <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
               </li>
              </ul>
             </li>
            </ul>
           </li>
          </ul>
         </li>
         <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
         <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
         </li>
        </ul>
       </li>
       <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
      </ul>
     </li>
    </ul>
   </div>
  </nav>
 </div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/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;
}

刷新一下网页，我们能就看到上面的截图的效果，代码参考：http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/

通过HTML和CSS就实现了多级菜单的静态展示效果，如果导航菜单不是经常变化，那么用静态的方式，把代码写死就可以了。但有一些场景，菜单是需要动态生成，比如通过权限控制访问链接，每个用户的权限不一样，那么能看到的菜单选项也就不一样，这个时候就需要做成动态的，用程序去控制菜单的加载和展示。

2. 动态多级菜单实现

有了静态多级导航菜单的HTML代码结构，改写成动态的，其实也不太复杂。

我们需要做2件事：

把导航菜单的数据结构化存储，比如存放到文件 nav.json。

用Angularjs的API加载nav.json数据，进行展示。

我们先定义一下导航菜单的数据格式，以JSON格式定义，每个菜单项都有3个属性字段

label: 导航菜单项显示的名字。

link: 导航菜单项的跳转链接，可以不定义。

children: 导航菜单项的子菜单，循环对象存储。

{
 "label": "levelA",
 "link": "#",
 "children": [
  {
   "label": "levelB",
   "link": "#",
   "children": []
  }
 ]
}

下面我们用真实的数据定义导航菜单，以我的金融系统为例。

AngularJS+Bootstrap3多级导航菜单的实现代码

新建JSON数据文件：nav.json。

~ vi D:\workspace\javascript\angular-navbar\js\nav.json
[
 {
  "label": "债券",
  "children": [
   {
    "label": "可转债",
    "children": [
     {"label": "可转债溢价率分析","link":"#"},
     {"label": "可转债NS定价","link":"#"},
     {"label": "可转债归因分析","link":"#"},
     {"label": "可转债套利实时监控","link":"#"}
    ]
   },
   {
    "label": "信用债",
    "children": [
     {"label": "交易所债券监控","link":"#"}
    ]
   },
   {
    "label": "利率债","link":"#",
    "children": []
   },
   {
    "label": "国债期货",
    "children": [
     {"label": "国债期货表现分析","link":"#"},
     {"label": "国债期货实时套利监控","link":"#"},
     {"label": "IRR历史时间序列查询","link":"#"},
     {"label": "IRR实时监控","link":"#"}
    ]
   }
  ]
 },
 {
  "label": "股票",
  "children": [
   {
    "label": "基本面分析",
    "children": [
     {"label": "上市公司基本面数据查看","link":"#"}
    ]
   },
   {
    "label": "量化选股策略",
    "children": []
   }
  ]
 },
 {
  "label": "宏观",
  "children": [
   {
    "label": "宏观数据",
    "children": [
     {"label": "宏观数据概览","link":"#"}
    ]
   },
   {
    "label": "宏观经济预测",
    "children": []
   },
   {
    "label": "宏观经济和大类资产表现",
    "children": []
   }
  ]
 }
]

我们看到这个导航菜单的数据，有3级，“债券?>可转债?>可转债归因分析”，那么接下我们就直接实现对三级菜单的编程。创建HTML文件page4.html。

~ vi D:\workspace\javascript\angular-navbar\page4.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title>多级动态导航菜单</title>
 <meta name="description" content="多级动态导航菜单">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="fragment" content="!" />
 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
 <link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page4">
<div class="container">
 <div class="row" ng-controller="NavbarCtrl">
  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
    <a class="navbar-brand" href="/" rel="external nofollow" >量化投资平台</a>
   </div>
   <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
     <li ng-repeat="a1 in navbar" class="dropdown">
      <a href="?{{ a1.label }}" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">{{ a1.label }} <b class="caret"></b></a>
      <ul class="dropdown-menu menu-top">
       <li ng-repeat="a2 in a1.children" class="dropdown-submenu">
        <a tabindex="-1" href="?{{ a2.label }}" rel="external nofollow" >{{ a2.label }}</a>
        <ul ng-show="a2.children.length>0" class="dropdown-menu">
         <li ng-repeat="a3 in a2.children">
          <a href="?{{ a3.label }}" rel="external nofollow" ng-click="go(a3.link)">{{ a3.label }}</a>
         </li>
        </ul>
       </li>
      </ul>
     </li>
    </ul>
   </div>
  </nav>
 </div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

在Angularjs的控制器文件app.js文件中，增加page4的定义。

var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']);
page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) {
 $routeProvider
  .when('/', {controller: 'DemoCtrl'})
  .otherwise({redirectTo: '/'});
 $locationProvider.html5Mode(true);
}]);
page4.controller('NavbarCtrl', function ($scope,$http,$location) {
 $http.get("/js/nav.json").success(function(json){
  $scope.navbar = json;
 });
});
page4.controller('DemoCtrl', function () {
 // nothing
});

查看一下显示效果，与上面的截图类似。

AngularJS+Bootstrap3多级导航菜单的实现代码

文章到这里就结束了，已经实现了我的功能需求。但这个话题还有很多可以优化的地方，比如实现无限级的导航菜单，菜单的展示样式替换，展示区间的控制，鼠标动作事件，封装成Angularjs的插件开源项目等。有兴趣的同学，可以我的程序的基础上继续努力，做出优秀的开源项目来。

代码已上传到github：https://github.com/bsspirit/angular-navbar，同学可以根据需要自行下载，也可以直接通过命令下载代码。

git clone https://github.com/bsspirit/angular-navbar.git
cd angular-navbar
bower install
anywhere

总结

以上所述是小编给大家介绍的AngularJS+Bootstrap3多级导航菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

AngularJS+Bootstrap3多级导航菜单的实现代码

- Author -

灰暗角落里的琴

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

浅谈javascript中createElement事件

Dec 05 Javascript

javascript 动态创建表格

Jan 08 Javascript

Javascript 动态改变imput type属性

Nov 01 Javascript

用原生js做单页应用

Jan 17 Javascript

Vue请求JSON Server服务器数据的实现方法

Nov 02 Javascript

详解angular2 控制视图的封装模式

Dec 27 Javascript

JavaScript实现单英文金山打字通

Jul 24 Javascript

Node.js HTTP服务器中的文件、图片上传的方法

Sep 23 Javascript

vue 解决异步数据更新问题

Oct 29 Javascript

vue开发简单上传图片功能

Jun 30 Javascript

js实现炫酷光感效果

Sep 05 Javascript

JavaScript十大取整方法实例教程

Dec 03 Javascript

微信小程序开发animation心跳动画效果

Aug 16 #Javascript

全选复选框JavaScript编写小结（附代码）

Aug 16 #Javascript

微信小程序自定义模态对话框实例详解

Aug 16 #Javascript

浅析webpack 如何优雅的使用tree-shaking（摇树优化）

Aug 16 #Javascript

JavaScript实现三级联动菜单效果

Aug 16 #Javascript

ionic3 懒加载

Aug 16 #Javascript

JavaScript仿微信（电话）联系人列表滑动字母索引实例讲解（推荐）

Aug 16 #Javascript