-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (66 loc) · 2.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app">
<section>
<div id="wrapper" off-canvas-menu></div>
</section>
<script>
(function() {
angular.module("app", []);
angular.module("app")
.service('LoadMenuService', function ($http) {
return {
get: function () {
return $http.get('menuItems.json');
}
}
})
.directive("offCanvasMenu", offCanvasMenu);
function offCanvasMenu() {
return {
restrict: 'A',
replace: false,
scope: true,
controllerAs: 'menu',
controller: function (LoadMenuService) {
var vm = this;
vm.isMenuOpen = false;
vm.toggleMenu = toggleMenu;
getMenuItems();
function getMenuItems() {
LoadMenuService.get().then(function (response) {
vm.menuItems = response.data;
return vm.menuItems;
});
}
function toggleMenu() {
vm.isMenuOpen = !vm.isMenuOpen;
}
},
link: function ($scope, $element, $attrs) {
},
template: '<div id="menu" ng-class="{visible:menu.isMenuOpen}">' +
'<h2>Menu</h2>' +
'<ul ng-repeat="item in menu.menuItems">' +
'<li>{{item}}</li>' +
'</ul>' +
'<span id="close-menu" ng-click="menu.toggleMenu()">' +
'<i class="fa fa-times" aria-hidden="true"></i>' +
'</span>' +
'</div>' +
'<button ng-click="menu.toggleMenu()">' +
'<i class="fa fa-bars" aria-hidden="true"></i>' +
'</button>'
};
}
})();
</script>
</body>
</html>