How to Impress Your User with an Animated Tab Bar in HTML, CSS, and JavaScript

Faraz

By Faraz - Last Updated:

Learn how to create an impressive Animated Tab Bar in HTML, CSS, and JavaScript with this step-by-step guide.

Join us on Telegram
amazing aminated tab bar made using html, css and javascript.jpg
Read AlsoCreate a Stunning Bank Dashboard Concept using HTML & CSS (Source Code).jpgCreate a Stunning Bank Dashboard using HTML & CSS (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Want to make your website more attractive? A smooth and interactive animated tab bar can impress users and improve navigation. An Animated Tab Bar is a visually engaging and interactive element in a user interface that allows users to switch between different content sections.

In this tutorial, we will show you how to create a beautiful animated tab bar using HTML, CSS, and JavaScript. This will give your website a modern and dynamic look. Whether you're a beginner or an experienced developer, this guide will help you step by step.

Let's start making an amazing animated tab bar using HTML, CSS, and JavaScript step by step.

Watch the full tutorial on my YouTube Channel: Watch Here.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our tab bar. Let's break it down step by step:

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
  • Defines the document type as HTML5.
  • Sets the language of the webpage to English (lang="en").

2. Head Section

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Tab Bar</title>
    <link rel="stylesheet" href="styles.css">
</head>
  • <meta charset="UTF-8">: Supports special characters and symbols.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with Internet Explorer.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the webpage responsive for mobile devices.
  • <title>: Sets the title of the webpage as "Animated Tab Bar".
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) for styling.

3. Body Section - Creating the Tab Bar

<body>
    <div class="container">
        <div class="menu">
  • <div class="container">: A wrapper to center and style the tab bar.
  • <div class="menu">: The actual navigation bar holding the menu items.

4. Menu Items (Tabs) with Icons

Each menu item consists of an animated Lordicon icon and a label.

Home Tab (Active by Default)

<div class="menu-item home-btn item-is-active">
    <lord-icon src="https://cdn.lordicon.com/etqbfrgp.json" trigger="hover">
    </lord-icon>
    <span class="txt">Home</span>
</div>
  • <div class="menu-item home-btn item-is-active">
    • Creates a tab button for "Home".
    • item-is-active class highlights it as the default active tab.
  • <lord-icon>
    • Loads an animated icon from Lordicon CDN.
    • src="https://cdn.lordicon.com/etqbfrgp.json" loads the "Home" icon.
    • trigger="hover" makes the icon animate on hover.
  • <span class="txt">Home</span>: Displays "Home" text.

Other Tabs (Camera, Setting, Profile)

The same structure is used for other menu items with different icons:

<div class="menu-item camera-btn">
    <lord-icon src="https://cdn.lordicon.com/mxddzdmt.json" trigger="hover"></lord-icon>
    <span class="txt">Camera</span>
</div>

<div class="menu-item setting-btn">
    <lord-icon src="https://cdn.lordicon.com/oncyjozz.json" trigger="hover"></lord-icon>
    <span class="txt">Setting</span>
</div>

<div class="menu-item profile-btn">
    <lord-icon src="https://cdn.lordicon.com/dqxvvqzi.json" trigger="hover"></lord-icon>
    <span class="txt">Profile</span>
</div>
  • Each tab has a different icon and label (Camera, Setting, Profile).
  • Icons animate when hovered due to the trigger="hover" attribute.

5. Loading External Scripts

<script src="https://cdn.lordicon.com/xdjxvujz.js"></script>
<script src="script.js"></script>
</body>
</html>
  • Lordicon Script (xdjxvujz.js): Enables animated icons.
  • Custom JavaScript (script.js): Adds tab-switching functionality (e.g., changing active tab).

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Read AlsoDesign Weather App Interface using HTML and CSS.jpgDesign Weather App Interface using HTML and CSS (Source Code)

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create an animated effect on the tab bar. Let's break it down section by section:

1. Styling the body (Full-Screen Centering)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
  • display: flex; → Uses Flexbox to center content.
  • justify-content: center; → Centers content horizontally.
  • align-items: center; → Centers content vertically.
  • height: 100vh; width: 100vw; → Makes the body cover 100% of the viewport.
  • overflow: hidden; → Prevents scrolling.

2. Styling the Tab Bar Container

.container {
    background-color: #fff;
    padding: 12px 5px;
    border-radius: 15px;
}
  • background-color: #fff; → Sets a white background.
  • padding: 12px 5px; → Adds space inside the container.
  • border-radius: 15px; → Gives the container rounded corners.

3. Styling the Menu (Flexbox Layout)

.menu {
    display: flex;
}
  • display: flex; → Aligns menu items in a horizontal row.

4. Styling the Menu Items (Tabs)

.menu-item {
    padding: 10px 20px;
    background-color: #e0efff;
    margin-right: 15px;
    border-radius: 50px;
    white-space: nowrap;
    height: 30px;
    width: 30px;
    cursor: pointer;
    transition: 0.3s ease;
}
  • padding: 10px 20px; → Adds space inside each button.
  • background-color: #e0efff; → Sets a light blue background.
  • margin-right: 15px; → Adds spacing between menu items.
  • border-radius: 50px; → Makes buttons oval/rounded.
  • white-space: nowrap; → Prevents text from wrapping.
  • height: 30px; width: 30px; → Sets default size for inactive buttons.
  • cursor: pointer; → Changes cursor to a pointer on hover.
  • transition: 0.3s ease; → Smooth animation effect.

5. Styling the Text Inside Menu Items

.txt {
    font-family: Segoe UI;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transition: 0.3s ease;
}
  • font-family: Segoe UI; → Uses a modern, readable font.
  • font-size: 15px; → Sets the text size.
  • font-weight: 700; → Makes text bold.
  • opacity: 0; → Hides the text by default.
  • transition: 0.3s ease; → Animates the opacity change smoothly.

6. Expanding the Active Menu Item

.item-is-active {
    width: 100px;
}
  • width: 100px; → Expands the active tab to show text.

7. Making the Text Visible in the Active Tab

.item-is-active .txt {
    opacity: 1;
}
  • opacity: 1; → Makes the text fully visible.

8. Setting Background Colors for Different Tabs

Each tab has a different background color for easy identification.

Home Button

.home-btn {
    background: #cffcff;
    color: #b91400;
}
  • Background → Light blue-green.
  • Text Color → Dark red.

Camera Button

.camera-btn {
    background-color: #f1ddff;
    color: #c25e00;
}
  • Background → Light purple.
  • Text Color → Dark orange.

Setting Button

.setting-btn {
    background: #f1ddff;
    color: #5c007a;
}
  • Background → Light purple.
  • Text Color → Dark purple.

Profile Button

.profile-btn {
    background: #f1ddff;
    color: #c6a700;
}
  • Background → Light purple.
  • Text Color → Dark yellow.

This will give our tab bar an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.container{
    background-color: #fff;
    padding: 12px 5px;
    border-radius: 15px;
}

.menu{
    display: flex;
}

.menu-item{
    padding: 10px 20px;
    background-color: #e0efff;
    margin-right: 15px;
    border-radius: 50px;
    white-space: nowrap;
    height: 30px;
    width: 30px;
    cursor: pointer;
    transition: 0.3s ease;
}

.txt {
    font-family: Segoe UI;
    font-size: 15px;
    font-weight: 700;
    opacity: 0;
    transition: 0.3s ease;
}

.item-is-active{
    width: 100px;
}

.item-is-active .txt{
    opacity: 1;
}

.home-btn{
    background: #cffcff;
    color: #b91400;
}

.camera-btn{
    background-color: #f1ddff;
    color: #c25e00;
}

.setting-btn{
    background: #f1ddff;
    color: #5c007a;
}

.profile-btn{
    background: #f1ddff;
    color: #c6a700;
}

Step 3 (JavaScript Code):

Finally, we need to create a background color function in JavaScript. Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension. Let's break it down section by section:

1. Selecting All Menu Items

let menu = document.querySelectorAll(".menu-item");
  • document.querySelectorAll(".menu-item") selects all elements with the class .menu-item.
  • menu is now a NodeList containing all tab items.

2. Setting the Initial Background Color

let firstactive = document.querySelector(".item-is-active");
let activecolor = getComputedStyle(firstactive).color;
document.body.style.backgroundColor = activecolor;
  • document.querySelector(".item-is-active") selects the initial active tab.
  • getComputedStyle(firstactive).color gets the text color of the active tab.
  • document.body.style.backgroundColor = activecolor sets the background color of the page to match the active tab.

3. Adding Click Event Listeners to Each Menu Item

menu.forEach((item) => {
    item.addEventListener("click", function() {
  • Loops through each .menu-item and attaches a click event listener.
  • function() runs whenever a menu item is clicked.

4. Changing the Border Color of the Selected Item

let accentColor = getComputedStyle(this).color;
this.children[0].style.borderColor = accentColor;
  • getComputedStyle(this).color gets the text color of the clicked tab.
  • this.children[0].style.borderColor = accentColor sets the border color of the icon (first child of .menu-item).

5. Changing the Background Color on Selection

if(!this.classList.contains("item-is-active")){
    document.body.style.background = accentColor;
}
  • this.classList.contains("item-is-active") checks if the clicked tab is already active.
  • If not, document.body.style.background = accentColor changes the background color to match the tab.

6. Removing Active State from Other Tabs & Setting the New Active Tab

menu.forEach((item) => {
    item.classList.remove("item-is-active");
    this.classList.add("item-is-active");
});
  • First, it removes the .item-is-active class from all menu items.
  • Then, this.classList.add("item-is-active") adds the active class to the clicked tab.
let menu = document.querySelectorAll(".menu-item");

let firstactive = document.querySelector(".item-is-active");
let activecolor = getComputedStyle(firstactive).color;
document.body.style.backgroundColor = activecolor;

menu.forEach((item) => {
    item.addEventListener("click", function() {

        let accentColor = getComputedStyle(this).color;
        this.children[0].style.borderColor = accentColor;
        if(!this.classList.contains("item-is-active")){
            document.body.style.background = accentColor;
        }

        menu.forEach((item) => {
            item.classList.remove("item-is-active");
            this.classList.add("item-is-active");
        });
    });
});

Final Output:

amazing aminated tab bar made using html, css and javascript.gif
Read Alsoresponsive 3d cards with html, css & javascript code snippets included.jpgResponsive 3D Cards with HTML, CSS & JavaScript: Code Snippets Included

Conclusion:

In conclusion, an animated tab bar can greatly enhance the user experience of a website or application. By adding animation to the tab bar, we can create a more engaging and interactive user interface. In this tutorial, we explored the HTML, CSS, and JavaScript needed to create an animated tab bar. We discussed the basic HTML structure for a tab bar, the CSS styling needed to create a visually appealing design, and the JavaScript functionality needed to add animation. By following the steps outlined in this tutorial, you can easily create your animated tab bar and impress your users.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html, css, javascript, animated tab bar, user impression, web development, user experience, ui design, animation
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺