Navigation Bar with vue – Basic Practical guide

What we are going to be creating

Navigation Bar with vue – Vue Examples practical guide

Creating a navigation bar is very basic but the techniques you will learn in this tutorial will help create several other vue components, example of which can be a toggle button, tabs component etc.

10 Best Vue Examples example photo

Basic Navigation Bar with vue practical guide

So you want to master vue.js? okay you in the right place, in this post we are sharing 10 best vue practicals to begin with. Note: The practicals listed on this page require atleast basic knowledge of vue. If you just starting up with vue, I strongly recommend you Bookmark this page, go take the beginner vue lesson first before returning to this page later.

1. Navigation Menu

Our very first exercise is creating a Basic Navigation Menu.

To kick things off we’re going to build a simple navigation bar. There are a few basic components almost every Vue.js app need to have. They are:

<div id="main">

    <!-- The navigation menu will get the value of the "active" variable as a class. -->

    <!-- To stops the page from jumping when a link is clicked 
        we use the "prevent" modifier (short for preventDefault). -->

    <nav v-bind:class="active" v-on:click.prevent>

        <!-- When a link in the menu is clicked, we call the makeActive method, 
        defined in the JavaScript Vue instance. It will change the value of "active". -->

        <a href="#" class="home" v-on:click="makeActive('home')">Home</a>
        <a href="#" class="projects" v-on:click="makeActive('projects')">Projects</a>
        <a href="#" class="services" v-on:click="makeActive('services')">Services</a>
        <a href="#" class="contact" v-on:click="makeActive('contact')">Contact</a>
    </nav>

    <!-- The mustache expression will be replaced with the value of "active".
         It will automatically update to reflect any changes. -->

    <p>You chose <b>{{active}}</b></p>
</div>

The above code should produce the following output:

sleettech.com

Okay now lets make it look pretty, so we are going to add some css code to it, create a new file and paste this css code block

*{
    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:red;
    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.projects .projects,
nav.services .services,
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;
}

Goodjob! Now your code should look like this

Navigation Bar with vue image two

Looking good huh! take a break and enjoy some cool song playlist here – Okay you are not impressed yet, basic stuffs, lets bring in vue and begin to wire things up

now add this Javascript code, like I said earlier, you should be familiar with basic vue stuffs, at the very least you should be able to install vue to your projects.

// Creating a new Vue instance and pass in an options object.
var demo = new Vue({

    // A DOM element to mount our view model.
    el: '#main',

    // This is the model.
    // Define properties and give them initial values.
    data: {
        active: 'home'
    },

    // Functions we will be using.
    methods: {
        makeActive: function(item){
            // When a model is changed, the view will be automatically updated.
            this.active = item;
        }
    }
});
10 Best Vue Examples cover photo

To find other interesting vue tutorials and practical guide here on sleettech.com please click here Best Best vue.js tutorials || Latest Practical Vue Js Tutorials

Coding can be stressful, you should release your brain with latest cool song from www.9jawaves.com

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button