<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<title></title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
</head>
<body ng-controller="menuController">
<div>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse menu">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action123</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav" role="menu" aria-labelledby="dLabel">
<li ng-repeat="item in items" ng-class="{'dropdown-submenu': item.submenu && item.submenu.length}">
<a href="{{item.link}}">{{item.name}}</a>
<ul ng-if="item.submenu && item.submenu.length" class="dropdown-menu">
<li ng-repeat="subitem in item.submenu"><a href="{{subitem.link}}">{{subitem.name}}</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div> <!-- /.container -->
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">1000ms Delay <b class="caret"></b></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Why Would</a></li>
<li><a tabindex="-1" href="#">A Home Tab</a></li>
<li><a tabindex="-1" href="#">Have Dropdowns?</a></li>
</ul>
</div>
<div class="menu">
<ul class="menu dropdown-menu nav pull-right" role="menu" aria-labelledby="dLabel">
<li ng-repeat="item in items" ><a href="{{item.link}}">{{item.name}}</a>
<ul ng-if="item.submenu && item.submenu.length" class="dropdown-menu">
<li ng-repeat="subitem in item.submenu"><a href="{{subitem.link}}">{{subitem.name}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.9/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("menuController", ['$scope', function ($scope) {
$scope.items = [
{
name: "Menu Item 1",
link: "#main1",
submenu: [
{
name: "Snake",
link: "#sub1"
},
{
name: "Apple",
link: "#sub2"
}
]
},
{
name: "Menu Item 2",
link: "#main2",
submenu: null
},
{
name: "Menu Item 3",
link: "#main3",
submenu: [
{
name: "Sub Item 1",
link: "#sub1"
},
{
name: "Sub Item 2",
link: "#sub2"
}
]
}
];
}]);
</script>
</body>
</html>
// Code goes here
/* Styles go here */