Bootstrap3多级导航菜单|江阴雨辰互联

2023年7月9日发(作者：)

Bootstrap3多级导航菜单Bootstrap3多级导航菜单，将介绍如何⽤angularjs构建⼀个强⼤的web前端系统。angularjs是由Google团队开发的⼀款⾮常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖⽽出，从架构设计上就⾼⼈⼀等，双向数据绑定，依赖注⼊，指令，MVC，模板。创新地把后台技术融⼊前端开发，扫去jQuery⼀度的光芒。⽤angularjs就像写后台代码，更规范，更结构化，更可控。关于作者张丹(Conan), 程序员Java,R,PHP,Javascriptweibo：@Conan_Zblog:

email: bsspirit@前⾔在上⼀篇⽂章中，我们看到直接⽤Bootstrap3的默认导航菜单只⽀持到⼆级的菜单，如果想做成多级导航菜单，那⼜要⾃⼰动⼿了。本⽂将介绍如何实现多限级导航菜单。⽬录1. 静态多级菜单实现2. 动态多级菜单实现1. 静态多级菜单实现要实现多级菜单，我们要分两步⾛，第⼀步就是把静态菜单的功能实现，通过纯静态的HTML代码完成。第⼆步，通过Angluarjs进⾏动态实现，最后把数据和程序分离，通过Ajax加载多级菜单数据。我们先从静态多级菜单开始动⼿，⼀个六级导航菜单是什么样⼦呢？如上图所⽰，我们定义⼀些功能需求。1级菜单是导航条上的⽂字。当1级菜单导航事件被触发，显⽰2级菜单导航，在1级菜单的正下⽅显⽰。当2级菜单导航事件被触发，显⽰3级菜单导航，在2级菜单的右⽅显⽰。当3级菜单导航事件被触发，显⽰4级菜单导航，在3级菜单的右⽅显⽰。以此类推，不考虑下级菜单显⽰出界问题。继续上⽂中的项⽬环境，增加⼀个新HTML⽂件: ~ vi D: 多级导航菜单

新建⼀个css⽂件：~ vi D:wn: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;}.-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;}通过HTML和CSS就实现了多级菜单的静态展⽰效果，如果导航菜单不是经常变化，那么⽤静态的⽅式，把代码写死就可以了。但有⼀些场景，菜单是需要动态⽣成，⽐如通过权限控制访问链接，每个⽤户的权限不⼀样，那么能看到的菜单选项也就不⼀样，这个时候就需要做成动态的，⽤程序去控制菜单的加载和展⽰。2. 动态多级菜单实现有了静态多级导航菜单的HTML代码结构，改写成动态的，其实也不太复杂。我们需要做2件事：把导航菜单的数据结构化存储，⽐如存放到⽂件。⽤Angularjs的API加载数据，进⾏展⽰。我们先定义⼀下导航菜单的数据格式，以JSON格式定义，每个菜单项都有3个属性字段label: 导航菜单项显⽰的名字。link: 导航菜单项的跳转链接，可以不定义。children: 导航菜单项的⼦菜单，循环对象存储。{ "label": "levelA", "link": "#", "children": [ { "label": "levelB", "link": "#", "children": [] } ]}下⾯我们⽤真实的数据定义导航菜单，以我的⾦融系统为例。新建JSON数据⽂件：。~ vi D:[ { "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⽂件。~ vi D: 多级动态导航菜单

在Angularjs的控制器⽂件⽂件中，增加page4的定义。var page4 = ('page4', ['rap', 'ngRoute']);(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) { $routeProvider .when('/', {controller: 'DemoCtrl'}) .otherwise({redirectTo: '/'}); $5Mode(true);}]);ller('NavbarCtrl', function ($scope,$http,$location) { $("/js/").success(function(json){ $ = json; });});ller('DemoCtrl', function () { // nothing});查看⼀下显⽰效果，与上⾯的截图类似。⽂章到这⾥就结束了，已经实现了我的功能需求。但这个话题还有很多可以优化的地⽅，⽐如实现⽆限级的导航菜单，菜单的展⽰样式替换，展⽰区间的控制，⿏标动作事件，封装成Angularjs的插件开源项⽬等。有兴趣的同学，可以我的程序的基础上继续努⼒，做出优秀的开源项⽬来。git clone /bsspirit/ angular-navbarbower installanywherePosted:Bootstrap3多级导航菜单，将介绍如何⽤angularjs构建⼀个强⼤的web前端系统。angularjs是由Google团队开发的⼀款⾮常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖⽽出，从架构设计上就⾼⼈⼀等，双向数据绑定，依赖注⼊，指令，MVC，模板。创新地把后台技术融⼊前端开发，扫去jQuery⼀度的光芒。⽤angularjs就像写后台代码，更规范，更结构化，更可控。关于作者张丹(Conan), 程序员Java,R,PHP,Javascriptweibo：@Conan_Zblog:

email: bsspirit@前⾔在上⼀篇⽂章中，我们看到直接⽤Bootstrap3的默认导航菜单只⽀持到⼆级的菜单，如果想做成多级导航菜单，那⼜要⾃⼰动⼿了。本⽂将介绍如何实现多限级导航菜单。⽬录1. 静态多级菜单实现2. 动态多级菜单实现Jun 26, 2014Tags:Comments:1. 静态多级菜单实现要实现多级菜单，我们要分两步⾛，第⼀步就是把静态菜单的功能实现，通过纯静态的HTML代码完成。第⼆步，通过Angluarjs进⾏动态实现，最后把数据和程序分离，通过Ajax加载多级菜单数据。我们先从静态多级菜单开始动⼿，⼀个六级导航菜单是什么样⼦呢？如上图所⽰，我们定义⼀些功能需求。1级菜单是导航条上的⽂字。当1级菜单导航事件被触发，显⽰2级菜单导航，在1级菜单的正下⽅显⽰。当2级菜单导航事件被触发，显⽰3级菜单导航，在2级菜单的右⽅显⽰。当3级菜单导航事件被触发，显⽰4级菜单导航，在3级菜单的右⽅显⽰。以此类推，不考虑下级菜单显⽰出界问题。继续上⽂中的项⽬环境，增加⼀个新HTML⽂件: ~ vi D: 多级导航菜单