Fastest Navigation Menu Using AngularJS

Hello Friends. Today I will show you how to create the ‘Fastest Navigation Menu using angularJS’. First of all, we will build a navigation menu that highlights the selected entry. The example uses only Angular’s directives, and is the simplest app possible using the framework.

In this tutorial, we will use Angular’s directives to set and read the active variable. When it changes, it causes the HTML that uses it to be updated automatically. So here is the step by step tutorial.

STEP 1:

To start with, create a html file with the below code.

[php]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Learn AngularJS – Navigation Menu</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" />
<!– The main CSS file –>
<link href="style.css" rel="stylesheet" />
<!–[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]–>
</head>
<!– The ng-app directive tells angular that the code below should be evaluated –>
<body ng-app>
<!– 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. –>Please click a menu item
You chose <b>{{active}}</b>
<a href="https://www.mehulprajapati.com" style="color:red";>BY Meul Tech </a>
<!– Include AngularJS from Google’s CDN –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.0.7%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/php]

STEP 2:

And then create the CSS file.

[php]
/*————————-
Simple reset
————————–*/

*{
margin:0;
padding:0;
}

/*————————-
General Styles
————————–*/

body{
font:15px/1.3 ‘Open Sans’, sans-serif;
color: #5e5b64;
text-align:center;
}

a, a:visited {
outline:none;
color:#389dc1;
}

a:hover{
text-decoration:none;
}

section, footer, header, aside, nav{
display: block;
}

/*————————-
The menu
————————–*/

nav{
display:inline-block;
margin:60px auto 45px;
background-color:#5597b4;
box-shadow:0 1px 1px #ccc;
border-radius:2px;
}

nav a{
display:inline-block;
padding: 18px 30px;
color:#fff !important;
font-weight:bold;
font-size:16px;
text-decoration:none !important;
line-height:1;
text-transform: uppercase;
background-color:transparent;

-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}

nav a:first-child{
border-radius:2px 0 0 2px;
}

nav a:last-child{
border-radius:0 2px 2px 0;
}

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}

p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}

p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
[/php]

Finally, our navigation bar is ready. Most of all, the navigation menu is really fast and responsive. Hope you have liked this tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

Tags: AngularJS, Navigation, Navigation Bar, Navigation Menu