Navigation Menu using vuejs – responsive menu using vuejs

Navigation Menu using vuejs – responsive menu using vuejs

In this post we will show you how to create responsive Navigation Menu using vuejs . we will show you hear to create menu using vuejs for home page, contact, Aboutus and services. hear we will active class for create current active menu as home page for Navigation Menu using vuejs.

To kick things off we’re reaching to build an easy navigation bar. There square measure some basic elements virtually each Vue.js app have to be compelled to have. They are:

• The model, or in alternative words our app’s information. In Vue.js this can be merely a JavaScript object containing variables and their initial values.
• An hypertext mark-up language templet, the right word that is read. Here we have a tendency to selected what to show, add event listeners, and handle totally different usages for the model.
• ViewModel – a Vue instance that binds the model and think about along, sanctioning them to speak with one another.

Navigation Menu using vuejs HTML ::

<div id="mainNavigation">
  <nav v-bind:class="active" v-on:click.prevent>
    <a href="#" class="home_page" v-on:click="makeActive('home')">Home</a>
    <a href="#" class="projects_page" v-on:click="makeActive('Aboutus')">Aboutus</a>
    <a href="#" class="services_page" v-on:click="makeActive('services')">Services</a>
    <a href="#" class="contact_page" v-on:click="makeActive('contact')">Contact</a>
  </nav>
  
  <p>You chose <b>{{ active }}</b></p>
</div>

Navigation Menu using vuejs JS ::

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

Navigation Menu using vuejs CSS ::

nav,
p b {
    border-radius: 2px
}

nav a,
p b {
    text-transform: uppercase
}

* {
    margin: 0;
    padding: 0
}

body {
    font: 14px/1.3 'Open Sans', sans-serif;
    color: #5e6b56;
    text-align: center
}

nav a,
p {
    font-weight: 700
}

a,
a:visited {
    outline: 0;
    color: #389dc1
}

a:hover {
    text-decoration: none
}

aside,
footer,
header,
nav,
section {
    display: block
}

nav,
nav a,
p b {
    display: inline-block
}

nav {
    margin: 60px auto 44px;
    background-color: #5587b4;
    box-shadow: 0 1px 1px #ccb
}

nav a {
    padding: 17px 30px;
    color: #fff!important;
    font-size: 16px;
    text-decoration: none!important;
    line-height: 1;
    background-color: transparent;
    -webkit-transition: background-color .25s;
    -moz-transition: background-color .25s;
    transition: background-color .25s
}

nav a:first-child {
    border-radius: 2px 0 0 2px
}

nav a:last-child {
    border-radius: 0 2px 2px 0
}

nav.contact_page .contact_page,
nav.home_page .home_page,
nav.projects_page .projects_page,
nav.services_page .services_page {
    background-color: #e35885
}

p {
    font-size: 22px;
    color: #7d9988
}

p b {
    color: #fff;
    padding: 6px 11px;
    background-color: #c4d7e0;
    font-size: 15px
}

.resource {
    margin: 20px 0
}