Html Code
- <div id="main" ng-app>
- <div class="menu">Menu bar with Angularjs</div>
- <nav class="{{active}}" ng-click="$event.preventDefault()">
- <a href="#" class="home" ng-click="active='home'">Home</a>
- <a href="#" class="Event" ng-click="active='Event'">Event</a>
- <a href="#" class="Admission" ng-click="active='Admission'">Admission</a>
- <a href="#" class="About" ng-click="active='About'">About</a>
- <a href="#" class="contact" ng-click="active='contact'">Contact</a>
- </nav>
- <p ng-hide="active">Please Select a menu item</p>
- <p ng-show="active">You Select :
- <b>{{active}}</b>
- </p>
- </div>
Css Code
- {
- 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;
- }
-
- section, footer, header, aside, nav {
- display: block;
- }
-
- nav {
- display: inline-block;
- margin: 60px auto 45px;
- background-color: #47A3FF;
- 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.Event .Event,
- nav.Admission .Admission,
- nav.About .About,
- 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;
- }
-
- .menu {
- font-size: 50px;
- font-variant: small-caps;
- color: #FFAD85;
- }
Output of This Code
If Not Select Then:
Is I select Any item Then:
And This Is a responsive menu like:
Thank You