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

~ vi D:\workspace\Javascript\angular-navbar\page3.html



 
 
 
 
 
 
 
 



 

  
 

~ 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;
}

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

~ 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": []
   }
  ]
 }
]

~ vi D:\workspace\Javascript\angular-navbar\page4.html



 
 
 
 
 
 
 
 



 

  
 

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
});

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