ANGULARJS+BOOTSTRAP3 Multi-level navigation menu

The ANGULARJS experiential programming series will explain how to build a powerful Web front-end system with ANGULARJS. Angularjs is a very good web front-end framework developed by the Google team. With so many web frames in the present, Angularjs can stand out from architecture design, bidirectional data binding, dependency injection, instruction, MVC, template. Angular.js Innovation in the background technology into the front-end development, sweep away jquery once light. With Angularjs is like writing back code, more standardized, more structured, more controllable.

About author Dan (Conan), programmer Java,r,php,javascript Weibo: @Conan_Z blog:http://blog.fens.me email:bsspirit@gmail.com

Reprint please indicate the source:
http://blog.fens.me/bootstrap-multilevel-navbar/

Objective

In the previous article angular combined with the BOOTSTRAP3 navigation menu, we see the direct use of BOOTSTRAP3 's default navigation menu only support to level two menu, if you want to make a multi-level navigation menu, then do it yourself.

This article describes how to implement a multiple-level navigation menu.

Dynamic multilevel menu Implementation of directory Static multilevel menu 1. Static Multilevel Menu Implementation

To achieve a multi-level menu, we have two steps to go, the first step is to implement the function of the static menu, through the pure static HTML code to complete. The second step, through the dynamic implementation of ANGLUARJS, the last data and program separation, through Ajax load multilevel menu data.

Let's start with the static multilevel menu, what is a level six navigation menu like?

As shown in the figure above, we define some functional requirements. Level 1 menu is the text on the navigation bar. When the Level 1 menu navigation event is triggered, display level 2 menu navigation, shown directly below the Level 1 menu. When the Level 2 menu navigation event is triggered, display level 3 menu navigation, displayed on the right-hand side of Level 2 menu. When the Level 3 menu navigation event is triggered, display level 4 menu navigation, displayed on the right-hand side of Level 3 menu. And so on, do not consider the downlevel menu to display out of bounds.

To continue the project environment above, add a new HTML file: page3.html

~ VI D:\workspace\javascript\angular-navbar\page3.html <! DOCTYPE html> 

	





	Create a new CSS file: 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;
 }

Refresh the page, we can see the effect of the above screenshot, code reference: http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/

The static display effect of multi-level menus is realized by HTML and CSS. If the navigation menu is not changed frequently, then the code can be written to death in a static manner. But there are some scenarios, the menu needs to be dynamically generated, such as accessing the link through permission control, each user's permissions are different, then the menu options that can be seen are different, this time you need to make dynamic, use the program to Control the loading and display of menus. 2. Dynamic multi-level menu implementation

With the HTML code structure of the static multi-level navigation menu, rewriting it to dynamic is actually not too complicated.

We need to do 2 things: Structure the data in the navigation menu, for example, to the file nav.json. Load nav.json data with Angularjs API for display.

We first define the data format of the navigation menu, defined in JSON format, each menu item has 3 attribute fields label: The name displayed by the navigation menu item. Link: The jump link of the navigation menu item, which can be undefined. Children: Navigation submenu of menu items, loop object storage.

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

Below we use the real data to define the navigation menu, taking my financial system as an example.

Create a new JSON data file: nav.json.

~ vi D:\workspace\javascript\angular-navbar\js\nav.json

[
    {
        "label": "bond",
        "children": [
            {
                "label": "convertible debt",
                "children": [
                    {"label": "Transferable debt premium rate analysis", "link": "#"},
                    {"label": "Convertible debt NS pricing", "link": "#"},
                    {"label": "Transferable debt attribution analysis", "link": "#"},
                    {"label": "Real-time arbitrage monitoring", "link": "#"}
                ]
            },
            {
                "label": "credit debt",
                "children": [
                    {"label": "Exchange Bond Monitor", "link": "#"}
                ]
            },
            {
                "label": "interest rate debt", "link": "#",
                "children": []
            },
            {
                "label": "national debt futures",
                "children": [
                    {"label": "State debt futures performance analysis", "link": "#"},
                    {"label": "Real-time arbitrage monitoring of treasury futures", "link": "#"},
                    {"label": "IRR historical time series query", "link": "#"},
                    {"label": "IRR real-time monitoring", "link":"#"}
                ]
            }
        ]
    },
    {
        "label": "stock",
        "children": [
            {
                "label": "Fundamental Analysis",
                "children": [
                    {"label": "View of Fundamental Data of Listed Companies", "link": "#"}
                ]
            },
            {
                "label": "Quantitative stock picking strategy",
                "children": []
            }
        ]
    },
    {
        "label": "macro",
        "children": [
            {
                "label": "macro data",
                "children": [
                    {"label": "Macro Data Overview", "link": "#"}
                ]
            },
            {
                "label": "macroeconomic forecast",
                "children": []
            },
            {
                "label": "Macroeconomic and large-scale asset performance",
                "children": []
            }
        ]
    }
]

We see the data in this navigation menu, there are 3 levels, "bonds -> convertible bonds -> convertible bond attribution analysis", then we will directly implement the programming of the third level menu. Create an HTML file page4.html.

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Multi-level dynamic navigation menu</title>
    <meta name="description" content="Multi-level dynamic navigation menu">
    <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">
    <link rel="stylesheet" href="/css/main.css">
</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="/">Quantitative Investment Platform</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 }}" 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 }}">{{ a2.label }}</a>
                                <ul ng-show="a2.children.length>0" class="dropdown-menu">
                                    <li ng-repeat="a3 in a2.children">
                                        <a href="?{{ a3.label }}" 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>

In the Angularjs controller file app.js file, add the definition of 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
});

The article is over here and has fulfilled my functional requirements. But there are a lot of things to optimize on this topic, such as implementing infinite navigation menus, menu display style substitution, display interval control, mouse action events, plug-in open source projects encapsulated in Angularjs. Interested students can continue to work on the basis of my program and make excellent open source projects.

The code has been uploaded to github: https://github.com/bsspirit/angular-navbar, students can download it as needed, or download the code directly by command.

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