<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Navbar Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="headerMenuApp">
<div ng-controller="headerMenuListController">
<nav id="headerNavigationMenuContainer" class="navbar navbar-default">
<div class="container-fluid">
<!-- Non-collapsing right-side menu items -->
<div class="navbar-header pull-right">
<ul class="nav pull-left navbar-nav text-nowrap">
<li class="dropdown pull-right">
<a href="#" class="dropdown-toggle navbar-icon" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-question-circle"></i> Help <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Live Chat</a></li>
<li><a href="#">Help Topics</a></li>
</ul>
</li>
</ul>
</div>
<!-- Collapsing left-side menu items -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav text-nowrap">
<leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
</ul>
</div>
</div>
</nav>
</div>
<div>Some TExt</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
(function ($) {
$(function () {
// This first selector (#headerNavigationMenuContainer) must be a static element. Otherwise, new elements won't get event handled by this code.
$("#headerNavigationMenuContainer").on("click", "ul.dropdown-menu [data-toggle=dropdown]", function () {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass("open");
$(this).parent().toggleClass("open");
});
});
})(jQuery);
'use strict';
var app = angular.module("headerMenuApp", []);
app.controller("headerMenuListController", function ($scope, $http) {
$scope.tree = [{"title": "Home","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}, {"title": "Contact","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}, {"title": "Products","url": null,"parentSequenceNo": 1,"target": null,"subMenuItems": [{"title": "Toys","url": null,"parentSequenceNo": 10000,"target": null,"subMenuItems": [{"title": "GI Joe","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Hot Wheels","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Lite Brite","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Play Doh","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}]}, {"title": "Ajax Cleaner","url": "#","parentSequenceNo": 10000,"target": "_blank","subMenuItems": []}, {"title": "Wash Rags","url": "#","parentSequenceNo": 10000,"target": null,"subMenuItems": []}]}, {"title": "Cart","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}];
});
app.directive("tree", function () {
return {
restrict: "E",
replace: true,
scope: { tree: "=" },
templateUrl: "navigationMenuList.html"
};
});
app.directive("leaf", function ($compile) {
return {
restrict: "E",
replace: true,
scope: { leaf: "=" },
templateUrl: "navigationMenuListItem.html",
link: function (scope, element, attrs) {
if (scope.leaf.subMenuItems && scope.leaf.subMenuItems.length > 0) {
element.append("<tree tree='leaf.subMenuItems'></tree>");
element.addClass("dropdown");
if (scope.leaf.parentSequenceNo !== 1) { element.addClass("dropdown-submenu"); }
scope.menuItemUrl = "#";
scope.menuItemDataToggle = "dropdown";
scope.menuItemRole = "button";
scope.menuItemClass = "dropdown-toggle";
$compile(element.contents())(scope);
} else {
scope.menuItemUrl = scope.leaf.url;
}
}
};
});
.marginBottom-0 {
margin-bottom: 0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
border-radius: 0 6px 6px 6px;
}
.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:hover { /*The "hover" must come after "after" for the mouse-over sub-menu icons to work.*/
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
border-radius: 6px 0 6px 6px;
}
<ul class='dropdown-menu navigationmenu-list' role='menu'>
<leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
</ul>
<li class="navigationmenu-listitem">
<a href="{{menuItemUrl}}" data-toggle="{{menuItemDataToggle}}" role="{{menuItemRole}}" class="{{menuItemClass}}" ng-if="leaf.title !== 'divider'">
{{leaf.title}}
<span ng-if="leaf.subMenuItems.length > 0 && leaf.parentSequenceNo == 1" class="caret"></span>
</a>
</li>