PROGRAMS

Navigation Menu Creation Example using AngularJS

You may have come across a list of categories on each website or application, it is called Menu, which is a broader picture of information that an application would have i.e. any project whose requirements are divided into a number of tasks will be combined under one tree called MENU. The best example we can say as, any shopping site will have a submenu called Electronics, Clothing, Home appliances etc under “Department”. Click on the link to learn login functionality in AngularJS. If you are looking for a combined login and registration application, click on the link.

In this article, we will see how can we navigate from one submenu to other using AngularJS.

We will build a simple shopping site application with below menu titles. On clicking on any menu item it displays which menu item is chosen.

  1. Home
  2. Electronics
  3. Appliances
  4. Clothing

We will have application folder structure with 3 files: index.html, app.js and style page style.css

The below code explains index.html.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/
                  angular-material-icons.min.js"></script> 
    <script src="app.js"></script>
  </head>
  <body>
   <!-- Adding the ng-app declaration to initialize AngularJS -->
    <div id="main" ng-app="navApp">
        <!-- 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 -->
            <h2>Shopping Site</h2>
            <a href="#" class="home" ng-click="active='home'">
             <ng-md-icon icon="home" style="fill:white"></ng-md-icon>
            </a>
            <a href="#" class="electronics" ng-click="active='electronics'">
              Electronics</a>
            <a href="#" class="appliances" ng-click="active='appliances'">
              Appliances</a>
            <a href="#" class="clothing" ng-click="active='clothing'">
              Clothing</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>
  </body>
</html>

As you can see above, we have used nav directive for navigation menu and 4 hyperlinks called Home, Electronics, Appliances and Clothing and 2 paragraphs for showing which menu is chosen.

The below code shows a javascript file app.js. This file is used as a controller for application module creation and having other logics if required.

var navApp = angular.module('navApp',['ngMdIcons']);

Since we do not have any logic to be included in this app, we have just created an app module to include ngMdIcons.

We have stylesheet file for styling this application. Please take a look at it below.

/* Styles go here */*{
    margin:0;
    padding:0;
}

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;
}

a img{
  display:inline-block;
}

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 h2{
  color:#fff ;
}

nav a{
    display:inline-block;
    padding: 18px 30px;
    color:#fff ;
    font-weight:bold;
    font-size:16px;
    text-decoration:none ;
    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.electronics .electronics,
nav.appliances .appliances,
nav.clothing .clothing{
    color:yellow ;
}

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;
}

 

Let us run this application and look at the result. The below image gives a picture of initial phase when you run your application, it looks like below.

Since the user has not clicked on any menu item, the description shows to select something.

When the user selects/clicks a menu, the description will be changed to “you chose ….”. Also, observe the change in menu text color.

Conclusion:

Navigation creation in AngularJS is very easy and anyone can create it within less time. You can also try using a fancy stylesheet to increase the look and feel.

Preeti Dhavali

Leave a Comment
Share
Published by
Preeti Dhavali

Recent Posts

Everything You Need To Know About Create React App

The configuration of resources can be a time-consuming and difficult operation while creating a React…

3 weeks ago

Causes of CyberCrime and Preventive Measures

          Rapid technological growth and developments have provided vast areas of…

1 month ago

How Data Lineage will Improve Business Practices

How often have you thought about changing the way that you store and use data?…

1 month ago

10 Dominating Programming Language for Mobile App In 2022

Programming Languages are a set of rules that aid in transforming a concept into a…

1 month ago

What is Serverless Edge Computing? Features | Benefits

Serverless edge computing is a new technology with a lot of promise, but it can…

1 month ago

Are Your Accounts Protected Against Cyberattacks?

Do any of your passwords include personal names, date of birth, or pet names? If…

2 months ago