The main goal of a website or application is to attract customers and improve the business. A good user interface and animations play an important role to achieving this goal. Almost all websites have a navigation tab on their home page. So it is very important that the navigation tab looks elegant. In this article we will discuss about the animated navigation tab using HTML, CSS and JavaScript. The demo and code of the animated navigation tab is given below.

Demo

HTML

<div class="navbar">
    <div class="nav">
        <a href="#home" class="activeTab" onclick="setActive('home')" id='home'>
            <i class="fa fa-home"></i>
            Home
        </a>
        <a href="#contact" onclick="setActive('contact')" id='contact'>
            <i class="fa fa-phone-square-alt"></i>
            Contact
        </a>
        <a href="#gallery" onclick="setActive('gallery')" id='gallery'>
            <i class="fa fa-image"></i>
            Gallery
        </a>
        <a href="#login" onclick="setActive('login')" id='login'>
            <i class="fa fa-sign-in-alt"></i>
            Login
        </a>
    </div>
    <div class="tab activeTabhome" id='tab'>
    </div>
</div>

Add below CDN in the html file for the font awesome icons.

<script src="https://kit.fontawesome.com/a076d05399.js"></script>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    background-color: #fff;
    width: 40rem;
    position: relative;
    height: 3rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
}

.nav {
    position: absolute;
    display: flex;
    width: fit-content;
    height: 100%;
    z-index: 2;
}

.nav a {
    width: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    color: #8200f4;
}

.nav a:focus {
    outline: none;
}

.nav a i {
    margin-right: 0.5rem;
}

.activeTab {
    color: #fff !important;
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tab {
    position: absolute;
    background: linear-gradient(135deg, crimson 0%, #8200f4 100%);
    width: 10rem;
    height: 100%;
    top: 0;
    z-index: 1;
    border-radius: 8px;
    transition: 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.activeTabhome {
    left: 0rem;
}

.activeTabcontact {
    left: 10rem;
}

.activeTabgallery {
    left: 20rem;
}

.activeTablogin {
    left: 30rem;
}

JS

function setActive(id) {
    document.getElementById('home').classList.remove(`activeTab`);
    document.getElementById('contact').classList.remove(`activeTab`);
    document.getElementById('gallery').classList.remove(`activeTab`);
    document.getElementById('login').classList.remove(`activeTab`);
    document.getElementById(id).classList.add(`activeTab`);
    const tab = document.getElementById('tab')
    tab.classList.remove(`activeTabhome`);
    tab.classList.remove(`activeTabcontact`);
    tab.classList.remove(`activeTabgallery`);
    tab.classList.remove(`activeTablogin`);
    tab.classList.add(`activeTab${id}`);
}

Conclusion

Hope you were able to build animated navigation tabs for your website with the help of above mentioned code.