Active Tab Animation using HTML, CSS and JS

27th September 2021

3

Page Index

    Share

    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.

    About the Author

    Related Blogs

    View All Blogs

    Want #swag?

    Join our monthly raffle!

    Every month, One Lucky Duck gets free swag shipped to their doorstep, wherever in the world you are! All you have to do is join our Discord channel today and tweet about the amazing things we do. #nullcast #luckyduck

    We will announce the winners on Twitter and through our discord channel.

    Duck