var app = angular.module('plunker', []);
app.directive('mmenu', function() {
return {
restrict : 'A',
link : function(scope, element, attrs) {
$(element).mmenu({});
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/css/jquery.mmenu.all.min.css">
<link rel="stylesheet" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.4/js/jquery.mmenu.min.all.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- Bootstrap Navbar + Main Content -->
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#menu"><b><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></b></a>
<a class="navbar-brand" href="#">EXAMPLE</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Side Menu Example</h1>
<p>
<a class="btn btn-lg btn-primary" href="http://mmenu.frebsite.nl/" target="_blank" role="button">mmenu homepage</a>
</p>
</div>
</div>
</div>
<!-- Side Menu -->
<nav id="menu" mmenu>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About us</a>
<ul>
<li><a href="/about/history">History</a></li>
<li><a href="/about/team">The team</a></li>
<li><a href="/about/address">Our address</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
/* Put your css in here */