<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="ng-bootstrap-submenu.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="ng-bootstrap-submenu.min.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="menuController">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<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">ng-bootstrap-submenu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<bootstrap-submenu ng-repeat="item in menuItems" menu-item="item">
</bootstrap-submenu>
</ul>
</div>
</nav>
</div>
</body>
</html>
// Code goes here
angular.module('myApp', ['bootstrapSubmenu']);
angular.module('myApp')
.controller('menuController', function($scope){
$scope.menuItems = [
{ display: 'Dropdown Item 1', href: '#', children: [
{ display: 'Child 1', href: '#', children: [
{ display: 'Sub 1', href: 'http://www.google.com', children: []},
{ display: 'Sub 2', href: '#', children: [
{ display: 'Grand Child 1', href: 'http://www.google.com', children: []},
{ display: 'Grand Child 2', href: 'http://www.google.com', children: []}
]}
]},
{ display: 'Child 2', href: 'http://www.google.com', children: []}
]},
{ display: 'Dropdown Item 2', href: 'http://www.google.com', children: []},
{ display: 'Dropdown Item 3', href: '#', children: [
{ display: 'Child 3', href: 'http://www.google.com', children: []}
]}
];
});
/*!
* Bootstrap-submenu v2.0.1 (http://vsn4ik.github.io/bootstrap-submenu)
* Copyright 2015 Vasily A. (https://github.com/vsn4ik)
* Licensed under the MIT license
*/
.dropdown-submenu>a:after{content:""}@media (min-width:768px){.dropdown-submenu{position:relative}.dropdown-submenu .dropdown-menu{top:0;left:100%;margin-top:-6px;border-top-left-radius:0}.dropup .dropdown-submenu .dropdown-menu,.navbar-fixed-bottom .dropdown-submenu .dropdown-menu{top:auto;bottom:0;margin-top:0;margin-bottom:-6px;border-top-left-radius:4px;border-bottom-left-radius:0}.dropdown-menu-right .dropdown-submenu .dropdown-menu{left:auto;right:100%;border-top-left-radius:4px;border-top-right-radius:0}.dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu,.navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu{border-radius:4px 4px 0}.dropdown-submenu>a:after{float:right;margin-top:6px;margin-right:-10px;border-left:4px dashed;border-top:4px solid transparent;border-bottom:4px solid transparent}.dropdown-menu-right .dropdown-submenu>a:after{float:left;border-left:none;margin-left:-10px;margin-right:0;border-right:4px dashed;border-top:4px solid transparent;border-bottom:4px solid transparent}}@media (max-width:767px){.dropdown-submenu .dropdown-menu{position:static;margin-top:0;border:0;box-shadow:none}.dropdown-submenu>a:after{margin-left:6px;display:inline-block;vertical-align:middle;border-top:4px dashed;border-left:4px solid transparent;border-right:4px solid transparent}.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li.dropdown-header,.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li.dropdown-header,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li.dropdown-header,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a{padding-left:30px}.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>a,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>a,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:40px}.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:50px}.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.btn-group>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.dropup>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:60px}.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li.dropdown-header,.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>a{padding-left:35px}.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:45px}.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:55px}.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li.dropdown-header,.navbar-nav>.dropdown>.dropdown-menu>.dropdown-submenu>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>.dropdown-menu>li>a{padding-left:65px}}
/*# sourceMappingURL=bootstrap-submenu.min.css.map */
!function(){angular.module("bootstrapSubmenu",[])}(),function(){function n(n,e){e.trigger(),n.getDropdownClass=function(){return n.hasChildren()?n.isSubMenu?"dropdown-submenu":"dropdown":""},n.showCaret=function(){return!n.isSubMenu&&n.hasChildren()},n.hasChildren=function(){return void 0!==n.menuItem.children&&n.menuItem.children.length>0}}angular.module("bootstrapSubmenu").controller("bootstrapSubmenuController",n),n.$inject=["$scope","submenuTrigger"]}(),function(){function n(n){return{restrict:"E",scope:{menuItem:"=menuItem",isSubMenu:"@isSubMenu"},replace:!0,templateUrl:"bootstrapSubmenu.html",controller:"bootstrapSubmenuController",compile:function(e){var t,i=e.contents().remove();return function(e,o){t||(t=n(i)),t(e,function(n){o.append(n)})}}}}angular.module("bootstrapSubmenu").directive("bootstrapSubmenu",n),n.$inject=["$compile"]}(),function(){function n(n){var e=!1;return{trigger:function(){e||n(function(){$("[data-submenu]").submenupicker()},100)}}}angular.module("bootstrapSubmenu").factory("submenuTrigger",n),n.$inject=["$timeout"]}(),angular.module("bootstrapSubmenu").run(["$templateCache",function(n){n.put("bootstrapSubmenu.html",'<li ng-class="getDropdownClass()">\r\n <a ng-if="!hasChildren()" tabindex="0" ng-href="{{menuItem.href}}">{{menuItem.display}}</a>\r\n <a ng-if="hasChildren()" tabindex="0" ng-attr-data-toggle="{{ showCaret() ? \'dropdown\' : undefined }}" ng-attr-data-submenu="{{ showCaret() ? \'\' : undefined }}">\r\n {{menuItem.display}}<span ng-if="showCaret()" class="caret"></span>\r\n </a>\r\n <ul ng-if="hasChildren()" class="dropdown-menu">\r\n <bootstrap-submenu ng-repeat="child in menuItem.children" menu-item="child" is-sub-menu="true">\r\n </bootstrap-submenu>\r\n </ul>\r\n</li>')}]),function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof exports?module.exports=n(require("jquery")):n(jQuery)}(function(n){function e(e){this.$element=n(e),this.$menu=this.$element.closest(".dropdown-menu"),this.$main=this.$menu.parent(),this.$items=this.$menu.children(".dropdown-submenu"),this.init()}function t(e){this.$element=n(e),this.$main=this.$element.parent(),this.$menu=this.$main.children(".dropdown-menu"),this.$subs=this.$main.siblings(".dropdown-submenu"),this.$items=this.$menu.children(".dropdown-submenu"),this.init()}function i(e){this.$element=n(e),this.$main=this.$element.parent(),this.$menu=this.$main.children(".dropdown-menu"),this.$items=this.$menu.children(".dropdown-submenu"),this.init()}return e.prototype={init:function(){this.$element.on("keydown",n.proxy(this,"keydown"))},close:function(){this.$main.removeClass("open"),this.$items.trigger("hide.bs.submenu")},keydown:function(n){27==n.keyCode&&(n.stopPropagation(),this.close(),this.$main.children("a, button").trigger("focus"))}},n.extend(t.prototype,e.prototype,{init:function(){this.$element.on({click:n.proxy(this,"click"),keydown:n.proxy(this,"keydown")}),this.$main.on("hide.bs.submenu",n.proxy(this,"hide"))},click:function(n){n.stopPropagation(),this.toggle()},hide:function(n){n.stopPropagation(),this.close()},open:function(){this.$main.addClass("open"),this.$subs.trigger("hide.bs.submenu")},toggle:function(){this.$main.hasClass("open")?this.close():this.open()},keydown:function(e){32==e.keyCode&&e.preventDefault(),-1!=n.inArray(e.keyCode,[13,32])&&this.toggle()}}),i.prototype={init:function(){this.$menu.off("keydown.bs.dropdown.data-api"),this.$menu.on("keydown",n.proxy(this,"itemKeydown")),this.$menu.find("li > a").each(function(){new e(this)}),this.$menu.find(".dropdown-submenu > a").each(function(){new t(this)}),this.$main.on("hidden.bs.dropdown",n.proxy(this,"hidden"))},hidden:function(){this.$items.trigger("hide.bs.submenu")},itemKeydown:function(e){if(-1!=n.inArray(e.keyCode,[38,40])){e.preventDefault(),e.stopPropagation();var t=this.$menu.find("li:not(.disabled):visible > a"),i=t.index(e.target);if(38==e.keyCode&&0!==i)i--;else{if(40!=e.keyCode||i===t.length-1)return;i++}t.eq(i).trigger("focus")}}},n.fn.submenupicker=function(e){var t=this instanceof n?this:n(e);return t.each(function(){var e=n.data(this,"bs.submenu");e||(e=new i(this),n.data(this,"bs.submenu",e))})}});
(function(){
angular.module('bootstrapSubmenu', []);
})();
(function(){
angular
.module('bootstrapSubmenu')
.controller('bootstrapSubmenuController', bootstrapSubmenuController);
function bootstrapSubmenuController($scope, submenuTrigger){
submenuTrigger.trigger();
$scope.getDropdownClass = function(){
if (!$scope.hasChildren()) return '';
return $scope.isSubMenu ? 'dropdown-submenu': 'dropdown';
};
$scope.showCaret = function(){
return (!$scope.isSubMenu && $scope.hasChildren());
};
$scope.hasChildren = function(){
return ($scope.menuItem.children !== undefined && $scope.menuItem.children.length > 0);
};
}
bootstrapSubmenuController.$inject = ["$scope", "submenuTrigger"];
})();
(function(){
angular
.module('bootstrapSubmenu')
.directive('bootstrapSubmenu', bootstrapSubmenu);
function bootstrapSubmenu($compile) {
return {
restrict: 'E',
scope: {
menuItem: '=menuItem',
isSubMenu: '@isSubMenu'
},
replace: true,
templateUrl: 'bootstrapSubmenu.html',
controller: 'bootstrapSubmenuController',
compile: function (el) {
var contents = el.contents().remove();
var compiled;
return function(scope,el){
if(!compiled)
compiled = $compile(contents);
compiled(scope,function(clone){
el.append(clone);
});
};
}
};
}
bootstrapSubmenu.$inject = ["$compile"];
})();
(function(){
angular
.module('bootstrapSubmenu')
.factory('submenuTrigger', submenuTrigger);
function submenuTrigger($timeout){
var triggered = false;
return {
trigger: function(){
if (triggered) return;
// after angularjs digest, trigger submenupicker
$timeout(function(){
$('[data-submenu]').submenupicker();
}, 100);
}
};
}
submenuTrigger.$inject = ["$timeout"];
})();
angular.module("bootstrapSubmenu").run(["$templateCache", function($templateCache) {$templateCache.put("bootstrapSubmenu.html","<li ng-class=\"getDropdownClass()\">\r\n <a ng-if=\"!hasChildren()\" tabindex=\"0\" ng-href=\"{{menuItem.href}}\">{{menuItem.display}}</a>\r\n <a ng-if=\"hasChildren()\" tabindex=\"0\" ng-attr-data-toggle=\"{{ showCaret() ? \'dropdown\' : undefined }}\" ng-attr-data-submenu=\"{{ showCaret() ? \'\' : undefined }}\">\r\n {{menuItem.display}}<span ng-if=\"showCaret()\" class=\"caret\"></span>\r\n </a>\r\n <ul ng-if=\"hasChildren()\" class=\"dropdown-menu\">\r\n <bootstrap-submenu ng-repeat=\"child in menuItem.children\" menu-item=\"child\" is-sub-menu=\"true\">\r\n </bootstrap-submenu>\r\n </ul>\r\n</li>");}]);
/*!
* Bootstrap-submenu v2.0.1 (http://vsn4ik.github.io/bootstrap-submenu)
* Copyright 2015 Vasily A. (https://github.com/vsn4ik)
* Licensed under the MIT license
*/
/**
* $.inArray: friends with IE8. Use Array.prototype.indexOf in future.
* $.proxy: friends with IE8. Use Function.prototype.bind in future.
*/
'use strict';
(function(factory) {
if (typeof define == 'function' && define.amd) {
// AMD. Register as an anonymous module
define(['jquery'], factory);
}
else if (typeof exports == 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
}
else {
// Browser globals
factory(jQuery);
}
})(function($) {
function Item(element) {
this.$element = $(element);
this.$menu = this.$element.closest('.dropdown-menu');
this.$main = this.$menu.parent();
this.$items = this.$menu.children('.dropdown-submenu');
this.init();
}
Item.prototype = {
init: function() {
this.$element.on('keydown', $.proxy(this, 'keydown'));
},
close: function() {
this.$main.removeClass('open');
this.$items.trigger('hide.bs.submenu');
},
keydown: function(event) {
// 27: Esc
if (event.keyCode == 27) {
event.stopPropagation();
this.close();
this.$main.children('a, button').trigger('focus');
}
}
};
function SubmenuItem(element) {
this.$element = $(element);
this.$main = this.$element.parent();
this.$menu = this.$main.children('.dropdown-menu');
this.$subs = this.$main.siblings('.dropdown-submenu');
this.$items = this.$menu.children('.dropdown-submenu');
this.init();
}
$.extend(SubmenuItem.prototype, Item.prototype, {
init: function() {
this.$element.on({
click: $.proxy(this, 'click'),
keydown: $.proxy(this, 'keydown')
});
this.$main.on('hide.bs.submenu', $.proxy(this, 'hide'));
},
click: function(event) {
event.stopPropagation();
this.toggle();
},
hide: function(event) {
// Stop event bubbling
event.stopPropagation();
this.close();
},
open: function() {
this.$main.addClass('open');
this.$subs.trigger('hide.bs.submenu');
},
toggle: function() {
if (this.$main.hasClass('open')) {
this.close();
}
else {
this.open();
}
},
keydown: function(event) {
// 13: Return, 32: Spacebar
if (event.keyCode == 32) {
// Off vertical scrolling
event.preventDefault();
}
if ($.inArray(event.keyCode, [13, 32]) != -1) {
this.toggle();
}
}
});
function Submenupicker(element) {
this.$element = $(element);
this.$main = this.$element.parent();
this.$menu = this.$main.children('.dropdown-menu');
this.$items = this.$menu.children('.dropdown-submenu');
this.init();
}
Submenupicker.prototype = {
init: function() {
this.$menu.off('keydown.bs.dropdown.data-api');
this.$menu.on('keydown', $.proxy(this, 'itemKeydown'));
this.$menu.find('li > a').each(function() {
new Item(this);
});
this.$menu.find('.dropdown-submenu > a').each(function() {
new SubmenuItem(this);
});
this.$main.on('hidden.bs.dropdown', $.proxy(this, 'hidden'));
},
hidden: function() {
this.$items.trigger('hide.bs.submenu');
},
itemKeydown: function(event) {
// 38: Arrow up, 40: Arrow down
if ($.inArray(event.keyCode, [38, 40]) != -1) {
// Off vertical scrolling
event.preventDefault();
event.stopPropagation();
var $items = this.$menu.find('li:not(.disabled):visible > a');
var index = $items.index(event.target);
if (event.keyCode == 38 && index !== 0) {
index--;
}
else if (event.keyCode == 40 && index !== $items.length - 1) {
index++;
}
else {
return;
}
$items.eq(index).trigger('focus');
}
}
};
// For AMD/Node/CommonJS used elements (optional)
// http://learn.jquery.com/jquery-ui/environments/amd/
return $.fn.submenupicker = function(elements) {
var $elements = this instanceof $ ? this : $(elements);
return $elements.each(function() {
var data = $.data(this, 'bs.submenu');
if (!data) {
data = new Submenupicker(this);
$.data(this, 'bs.submenu', data);
}
});
};
});
/*!
* Bootstrap-submenu v2.0.1 (http://vsn4ik.github.io/bootstrap-submenu)
* Copyright 2015 Vasily A. (https://github.com/vsn4ik)
* Licensed under the MIT license
*/
.dropdown-submenu > a:after {
content: "";
}
@media (min-width: 768px) {
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
border-top-left-radius: 0;
}
.dropup .dropdown-submenu .dropdown-menu,
.navbar-fixed-bottom .dropdown-submenu .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 0;
}
.dropdown-menu-right .dropdown-submenu .dropdown-menu {
left: auto;
right: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 0;
}
.dropup .dropdown-menu-right .dropdown-submenu .dropdown-menu,
.navbar-fixed-bottom .dropdown-menu-right .dropdown-submenu .dropdown-menu {
border-radius: 4px 4px 0;
}
.dropdown-submenu > a:after {
float: right;
margin-top: 6px;
margin-right: -10px;
border-left: 4px dashed;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.dropdown-menu-right .dropdown-submenu > a:after {
float: left;
border-left: none;
margin-left: -10px;
margin-right: 0;
border-right: 4px dashed;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
}
@media (max-width: 767px) {
.dropdown-submenu .dropdown-menu {
position: static;
margin-top: 0;
border: 0;
box-shadow: none;
}
.dropdown-submenu > a:after {
margin-left: 6px;
display: inline-block;
vertical-align: middle;
border-top: 4px dashed;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a {
padding-left: 30px;
}
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 40px;
}
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 50px;
}
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
.dropup > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
.btn-group > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 60px;
}
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li.dropdown-header,
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a {
padding-left: 35px;
}
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 45px;
}
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 55px;
}
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li.dropdown-header,
.navbar-nav > .dropdown > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a {
padding-left: 65px;
}
}
/*# sourceMappingURL=bootstrap-submenu.css.map */
# ng-bootstrap-submenu
AngularJS module wrapping the 'bootstrap submenu' JavaScript library. Useful for creating multiple-tier navigation menus using bootstrap styles.
To use, download the js and css from the dist folder.
* ng-bootstrap-submenu.min.css
* ng-bootstrap-submenu.min.js
Add the bootstrapSubmenu module dependency.
angular.module('myApp', ['bootstrapSubmenu']);
Use the <bootstrapSubmenu> directive (with ng-repeat if you have multiple dropdowns). You must supply a json object
to the 'items' attribute. The supplied object needs to have the following properties:
* href = the link for the item (only necessary for items with no children).
* display = the text displayed for the item.
* children = an array of sub-items (may be empty).