Home > DeveloperSection > Blogs > Navigation Menu in Angular JS

Navigation Menu in Angular JS


Angular JS Single Page App  Angular JS 
Ratings:
1 Comment(s)
 7487  View(s)
Rate this:

Navigation Menu in Angular JS

In this blog, I’m explaining how to create a navigation menu using angular js.

Step 1

First create an empty asp.net application and add a web form named ”Default.aspx” to it.

Now add “angular.min.js” file to your project because this file is necessary for working with angular js.

Step 2

Now add “angular.min.js” file to your head section of your page by drag-n-drop from the solution explorer like this:

<head runat="server">

    <title>Navigation Menu</title>

    <script src="angular.min.js"></script>

</head>

Step 3

Next add the ng-app attribute to the body tag:

<body ng-app>

By defining the ng-app attribute in the body tag, it denotes that the angular will active on whole body tag. If you want to enable angular for whole html page, put it in html tag.

Step 4

Now write the following code in the body section of the webpage:

<nav class="{{active}}" ng-click="$event.preventDefault()">

        <a href="#" class="home" ng-click="active='home'">Home</a>

        <a href="#" class="services" ng-click="active='services'">Services</a>

        <a href="#" class="products" ng-click="active='products'">Products</a>

        <a href="#" class="contactUs" ng-click="active='contactUs'">Contact Us</a>

    </nav>

    <p ng-hide="active">Please click on a menu item</p>

    <p ng-show="active">You Choose:<b>{{active}}</b></p>

And also add the following style tag in the head section:

<style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            margin: 0 auto;

            text-align: center;

        }

        nav {

            display: inline-block;

            margin: 60px auto 45px;

            background-color: #17c5ed;

            border-radius: 2px;

            box-shadow: 0px 1px 1px #ccc;

        }

            nav a {

                display: inline-block;

                font-size: 16px;

                padding: 18px 30px;

                text-decoration: none !important;

                line-height: 1;

                text-transform: uppercase;

                font-weight: bold;

                color: black!important;

                background-color: transparent;

                transition: background-color 0.25s;

            }

            nav.home .home,

            nav.products .products,

            nav.services .services,

            nav.contactUs .contactUs {

                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;

            }

    </style>

Output




nice article

By Chintoo Semi on   2 years ago
nice article 

Don't want to miss updates? Please click the below button!

Follow MindStick