Navigation Bar with Indicator in HTML CSS & JavaScript

1

Navigation Bar with Indicator in HTML CSS & JavaScript

Hello friend, hope you are doing great. Today you will learn to create an Animated Navigation with Indicator in HTML CSS and JavaScript. As you know there are lots of  Navigation Menu Bar I have created. Today’s navigation menu will be more fascinating with beautiful design and animation.

The navigation menu is the combination of various navigation link that helps visiter to find or jump on the webpage as they want. There are many navigation menu bars that can be found on the internet with various animations and features. And, they can fit any size screen like PC, laptop, tablet and mobile screen.

Have a quick look at the given of our project [Animated Navigation Menu Bar with Indicator], at the navbar we can see four nav icons and one indicator that shows us where the website visitor is at that time. As you can seen on the first navbar the home section is in active status because, it has a circle indicator with text and color, other four nav icons are in disabled form.

You can watch the virtual demo of this project [Navigation Menu Bar with Indicator], Also by watching the given video tutorial you will get idea, how all HTML CSS and JavaScript code works behind this navbar menu.

Navigation Menu Bar with Indicator | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this project [Navigation Menu Bar with Indicator], before jumping into the source code file, I would like to explain some basic points the video tutorial.

As you have seen on the video tutorial of our project [Navigation Menu Bar with Indicator], at first on the screen we have seen, there is on navigation menu bar with four nav icons. The first nav icon is in active status because it has bright color, circle indicator and text. When I clicked on the second nav icons, it’s color changed into bright color and it’s text appear and also the circle indicator comes towards to it and ofcourse the previous active nav icon disabled. As like this, it happen any nav icon where I clikcd.

Have you recognized that the indicator has curve shape, which makes navbar more fascinating. To make this navbar and indicator I have used HTML and CSS, to move indicator and change color I have used some JavaScript code.

Now I believe, you can make this project [Navigation Menu Bar with Indicator], easily by using HTML CSS and JavaScript. If your are feeling difficulty to build this navbar, I have provided all the source code below.

You Might Like This:

Navigation Menu with Indicator [Source Code]

To get the following HTML CSS and JavaSCript code for an Animated Navigation Menu Bar with Beautiful Indicator. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <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>Navigation Bar with Indicator</title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                
        <!-- Boxicons CSS -->
        <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
                        
    </head>
    <body>
        <nav class="nav">
            <ul class="nav-content">
                <li class="nav-list">
                    <a href="#" class="link-item active">
                        <i class='bx bxs-home link-icon'></i>
                        <span class="link-text">Home</span>
                    </a>
                </li>
                <li class="nav-list">
                    <a href="#" class="link-item">
                        <i class='bx bxs-caret-right-square link-icon'></i>
                        <span class="link-text">Content</span>
                    </a>
                </li>
                <li class="nav-list">
                    <a href="#" class="link-item">
                        <i class='bx bxs-bar-chart-square link-icon'></i>
                        <span class="link-text">Analytics</span>
                    </a>
                </li>
                <li class="nav-list">
                    <a href="#" class="link-item">
                        <i class='bx bxs-message-rounded link-icon'></i>
                        <span class="link-text">Comments</span>
                    </a>
                </li>
                <li class="nav-list">
                    <a href="#" class="link-item">
                        <i class='bx bxs-user link-icon'></i>
                        <span class="link-text">Profile</span>
                    </a>
                </li>

                <span class="indicator"></span>
            </ul>
        </nav>
        

        <!-- JavaScript -->
        <script src="js/script.js"></script>
    </body>
</html>
/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4070F4;
}
nav{
    border-radius: 12px;
    background: #FFF;
    padding: 0 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.nav-content{
    display: flex;
    height: 120px;
    align-items: center;
    list-style: none;
    position: relative;
}
.link-item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 120px;
    width: 95px;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active{
    transform: translateY(-10px);
}
.link-icon{
    font-size: 38px;
    color: #999;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-icon{
    color: #4070F4;
}
.link-text{
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    color: #4070F4;
    opacity: 0;
    transform: translateY(32px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.link-item.active .link-text{
    opacity: 1;
}
.indicator{
    position: absolute;
    top: -14px;
    left: 48px;
    height: 36px;
    width: 36px;
    background-color: #FFF;
    border: 6px solid #4070F4;
    border-radius: 50%;
    transform: translateX(-50%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.indicator::before,
.indicator::after{
    content: '';
    position: absolute;
    bottom: -8px;
    height: 24px;
    width: 19px;
}
.indicator::before{
    left: -22px;
    background-color: #FFF;
    border-top-right-radius: 25px;
    box-shadow: 1px -13px #4070F4;
}
.indicator::after{
    right: -22px;
    background-color: #FFF;
    border-top-left-radius: 25px;
    box-shadow: -1px -13px #4070F4;
}
 const linkItems = document.querySelectorAll(".link-item");

linkItems.forEach((linkItem, index) => {
    linkItem.addEventListener("click", () => {
        document.querySelector(".active").classList.remove("active");
        linkItem.classList.add("active");

        const indicator = document.querySelector(".indicator");

        indicator.style.left = `${index * 95 + 48}px`;
    })
})

If you face any difficulties while creating your Navigation Bar or your code is not working as expected, you can download the source code files for this Navbar Menu for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

Previous articleResponsive Card Slider in HTML CSS & JavaScript
Next articleBuild A Simple Alarm Clock in HTML CSS & JavaScript

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here