AngularJS


<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>vuejs nav menu-dynamic navigation bar using vuejs</title>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main">
  <nav v-bind:class="active" v-on:click.prevent>
    <a href="#" class="Live24u" v-on:click="makeActive('Live24u')">Live24u</a>
    <a href="#" class="Tutorial" v-on:click="makeActive('Tutorial')">Tutorial</a>
    <a href="#" class="Status" v-on:click="makeActive('Status')">Status</a>
    <a href="#" class="Example" v-on:click="makeActive('Example')">Example</a>
  </nav>
  <p>You chose <b>{{ active }}</b></p>
</div>
<div class="resource">
My Website: <a href="https://pakainfo.com/tutorial/" target="_blank">BIGGEST AND FASTEST Web Tutorials </a>
 </div>
  <script src='https://cdn.jsdelivr.net/vue/latest/vue.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

Example : App.js


var demo = new Vue({
  el: '#main',
  data: {
  	active: 'Live24u'
  },
  methods: {
  	makeActive: function(item){
    	this.active = item;
    }
  }
})

Example : Style.css


/*-------------------------
	The menu - live24u.com
--------------------------*/
body{
	font:16px/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 - live24u.com
--------------------------*/

nav{
	display:inline-block;
	margin:60px auto 45px;
	background-color:#4486F9;
	box-shadow:0 1px 1px #ccc;
	border-radius:2px;
}
/*-------------------------
	The menu - live24u.com/tutorial
--------------------------*/
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;
}

/*-------------------------
	The menu - www.live24u.com/status
--------------------------*/
nav.Live24u .Live24u,
nav.Tutorial .Tutorial,
nav.Status .Status,
nav.Example .Example{
	background-color:#42B983;
}

p{
	font-size:22px;
	font-weight:bold;
	color:#7d9098;
}

p b{
	color:#ffffff;
	display:inline-block;
	padding:5px 10px;
	background-color:#c4d7e0;
	border-radius:3px;
	text-transform:uppercase;
	font-size:18px;
}
.resource {
  margin: 20px 0;
}