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 相关文章推荐
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
node thread.sleep实现示例
Jun 20 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
Vue 同步异步存值取值实现案例
Aug 05 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
微信小程序如何自定义table组件
2019/06/29 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python collections模块的使用方法
2020/10/09 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
期末自我鉴定
2014/02/02 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
校园运动会广播稿
2014/10/06 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
事业单位年度考核评语
2014/12/31 职场文书
同意离婚答辩状
2015/05/22 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书