Active Tab Animation using HTML, CSS and JS

  • img
    Sangeeth S
  • April 27,2021

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.

Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates