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


Posted in Javascript onAugust 16, 2017

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

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

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

目录

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多级导航菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
IE中createElement需要注意的一个问题
Jul 13 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
在vue中使用console.log无效的解决
Aug 09 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
You might like
PHP聊天室技术
2006/10/09 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[01:11:28]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第一场 1月8日
2021/03/11 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python字符串格式化方式解析
2019/10/19 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
10个顶级Python实用库推荐
2021/03/04 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
经理职责范文
2013/11/08 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2014年政教处工作总结
2014/12/20 职场文书
亲情作文之母爱
2019/09/25 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
KVM基础命令详解
2022/04/30 Servers