angular + css3 menu options active states

by Andrew Pougher

HTML

<div id="main" ng-app="drew" ng-controller="AdminCtrl">
	<nav class="{{active}}" ng-click="$event.preventDefault()">
		<a href="#" ng-class="{'chosen': active == 'home'}" ng-click="active='home'">Home</a>
		<a href="#" ng-class="{'chosen': active == 'projects'}" ng-click="active='projects'">Projects</a>
		<a href="#" ng-class="{'chosen': active == 'services'}" ng-click="active='services'">Services</a>
		<a href="#" ng-class="{'chosen': active == 'contact'}"ng-click="active='contact'">Contact</a>
	</nav>

    <p ng-hide="active">Please click a menu item</p>
	<p ng-show="active">You chose <b>{{active}}</b></p>
</div>

<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
  </script>

CSS

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

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

.chosen{
	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;
}

JavaScript

// then setup a URL load into location

var andrewsAPP = angular.module('drew', []);
andrewsAPP.controller("AdminCtrl", function ($scope){
    //click method
$scope.getContent = function(){
//alert($scope.active); // ajax.
}
    //watch method
$scope.$watch('active', function(newValue, oldValue) {
$scope.active = (newValue || 'home'); // ajax.
}, true);
    
});