Html Code
  1. <div id="main" ng-app>
  2. <div class="menu">Menu bar with Angularjs</div>
  3. <nav class="{{active}}" ng-click="$event.preventDefault()">
  4. <a href="#" class="home" ng-click="active='home'">Home</a>
  5. <a href="#" class="Event" ng-click="active='Event'">Event</a>
  6. <a href="#" class="Admission" ng-click="active='Admission'">Admission</a>
  7. <a href="#" class="About" ng-click="active='About'">About</a>
  8. <a href="#" class="contact" ng-click="active='contact'">Contact</a>
  9. </nav>
  10. <p ng-hide="active">Please Select a menu item</p>
  11. <p ng-show="active">You Select :
  12. <b>{{active}}</b>
  13. </p>
  14. </div>
Css Code
  1. {
  2. margin:0;
  3. padding:0;
  4. }
  6. body {
  7. font: 15px/1.3 'Open Sans', sans-serif;
  8. color: #5e5b64;
  9. text-align: center;
  10. }
  12. a, a:visited {
  13. outline: none;
  14. color: #389dc1;
  15. }
  17. a:hover {
  18. text-decoration: none;
  19. }
  21. section, footer, header, aside, nav {
  22. display: block;
  23. }
  25. nav {
  26. display: inline-block;
  27. margin: 60px auto 45px;
  28. background-color: #47A3FF;
  29. box-shadow: 0 1px 1px #ccc;
  30. border-radius: 2px;
  31. }
  33. nav a {
  34. display: inline-block;
  35. padding: 18px 30px;
  36. color: #fff !important;
  37. font-weight: bold;
  38. font-size: 16px;
  39. text-decoration: none !important;
  40. line-height: 1;
  41. text-transform: uppercase;
  42. background-color: transparent;
  43. -webkit-transition: background-color 0.25s;
  44. -moz-transition: background-color 0.25s;
  45. transition: background-color 0.25s;
  46. }
  48. nav a:first-child {
  49. border-radius: 2px 0 0 2px;
  50. }
  52. nav a:last-child {
  53. border-radius: 0 2px 2px 0;
  54. }
  56. nav.home .home,
  57. nav.Event .Event,
  58. nav.Admission .Admission,
  59. nav.About .About,
  60. nav.contact .contact {
  61. background-color: #e35885;
  62. }
  64. p {
  65. font-size: 22px;
  66. font-weight: bold;
  67. color: #7d9098;
  68. }
  70. p b {
  71. color: #ffffff;
  72. display: inline-block;
  73. padding: 5px 10px;
  74. background-color: #c4d7e0;
  75. border-radius: 2px;
  76. text-transform: uppercase;
  77. font-size: 18px;
  78. }
  80. .menu {
  81. font-size: 50px;
  82. font-variant: small-caps;
  83. color: #FFAD85;
  84. }
Output of This Code
If Not Select Then:
Is I select Any item Then:
And This Is a responsive menu like:
Thank You