-
Notifications
You must be signed in to change notification settings - Fork 0
/
menukoushik.html
24 lines (19 loc) · 1.13 KB
/
menukoushik.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
<!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>
<link rel="stylesheet" type="text/css" href="menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- The navigation menu will get the value of the "active" variable as a class.
The $event.preventDefault() stops the page from jumping when a link is clicked. -->
<nav class="{{active}}" ng-click="$event.preventDefault()">
<!-- When a link in the menu is clicked, we set the active variable -->
<a href="#" class="home" ng-click="active='home'">Home</a>
<a href="#" class="projects" ng-click="active='projects'">Projects</a>
<a href="#" class="services" ng-click="active='services'">Services</a>
<a href="#" class="contact" ng-click="active='contact'">Contact</a>
</nav>
<!-- ng-show will show an element if the value in the quotes is truthful,
while ng-hide does the opposite. Because the active variable is not set
initially, this will cause the first paragraph to be visible. -->
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>