Tabbar – CodingNepal

Navigation Bar with Indicator in HTML CSS & JavaScript

CodingNepal — Thu, 09 Jun 2022 21:11:20 +0000

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.

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.



    
    
        
        
        
        Navigation Bar with Indicator

        
        
                
        
        
                        
    
    
        
            
                
                    
                        
                        Home
                    
                
                
                    
                        
                        Content
                    
                
                
                    
                        
                        Analytics
                    
                
                
                    
                        
                        Comments
                    
                
                
                    
                        
                        Profile

/* 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

Navigation Menu with Indicator | HTML CSS & JavaScript

CodingNepal — Mon, 13 Dec 2021 21:11:19 +0000

Hello friend, I hope you are doing awesome. Today here I have shown how to create a Navigation Menu with Indicator Bar using HTML CSS and JavaScript. As you know there are lots of Responsive Navigation Menu bar that I have created.

We have seen the various type of navbar hover animation on there. Today we are going to create clickable navigation links with beautifully animated indicators.

A navigation menu bar is the collection of several navigation links which helps the user to redirect to the different section of the webpages and an indicator is the design that indicates uses to know in what nav links or page they are. The Navigation menu bar can be aligned horizontally or vertically that depending on website UI/UX designs and concepts.

The navigation menu bar that we are going to build is specially designed for mobile devices. As you can see on the given image of our navigation menu bar with a beautiful indicator. This type of navigation bar is typically seen on the mobile devices at the bottom aligned.

Let’s have a look at the given image of our navbar menu with an indicator. There is a total of five nav links on that navigation bar with an indicator. In the first navigation bar, our first nav link is inactive condition. At the second navbar, the third nav link is in-active condition. Actually, when we click on any nav link, that indicator moves to that clicked nav links icon, and also ion changes into a solid color.

Rather than theoretically, I would like to show you the virtual demo of this Navigation Menu with Indicator. Also plus point for you is, you will know what HTML CSS and JavaScript codes I used and how they work perfectly.

Video Tutorial of Navigation Bar with Indicator

You will get all the HTML CSS and JavaScript source code that I have used to create this Animated Navigation Menu with Indicator. Before jumping to the source code, you need to know some basic points of this video tutorial.

As you have seen on the given video tutorial of this Animated Navbar Menu with Indicator. At first, we have seen the first we have seen five nav links icons and one indicator. The first nav link is in-active condition. Because that icon is different from the other four nav links and also indicator is at the bottom of the icon.

When I click on the other icon the indicator is slides to that clicked icon and the icon is changed into a different color. Actually, there are 10 icons, five are solid shapes and 5 are regular shapes. To create that curved shape on the indicator I used before and after CSS property and box-shadow. The UI design is made by HTML and CSS only. To change the icon from regular to solid and to slide the indicator I used some JavaScript.

I have provided all the HTML CSS and JavaScript code of this animated navigation menu bar with a beautiful indicator.

Navigation Menu with Indicator [Source Code]

To get the following HTML and CSS 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.




  
    
      Navigation Menu with Indicator | CodingLab

*{
  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: #7d2ae8;
}
.navbar{
  position: relative;
  height: 120px;
  width: 500px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.navbar ul{
  position: relative;
  display: flex;
}
.navbar ul li{
  position: relative;
  list-style-type: none;
}
.navbar ul li a{
  position: relative;
  height: 120px;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.navbar ul li a i{
  position: absolute;
  font-size: 38px;
  color: #7d2ae8;
}
ul li a i.activeIcon{
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s ease;
  transition-delay: 0.2s;
}
.navbar ul li.active a i{
  opacity: 1;
  pointer-events: auto;
}
.navbar ul .indicator{
  position: absolute;
  bottom: -19px;
  left: 34px;
  height: 36px;
  width: 25px;
  background: #7d2ae8;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
ul .indicator::before{
  content: "";
  position: absolute;
  left: -15px;
  bottom: 50%;
  height: 22px;
  width: 20px;
  background: #fff;
  border-bottom-right-radius: 20px;
  box-shadow: 0 10px 0 #7d2ae8;
}
ul .indicator::after{
  content: "";
  position: absolute;
  right: -15px;
  bottom: 50%;
  height: 22px;
  width: 20px;
  background: #fff;
  border-bottom-left-radius: 20px;
  box-shadow: 0 10px 0 #7d2ae8;
}

Tabbar – CodingNepal

Navigation Bar with Indicator in HTML CSS & JavaScript

Navigation Menu Bar with Indicator | Video Tutorial

You Might Like This:

Navigation Menu with Indicator [Source Code]

Navigation Menu with Indicator | HTML CSS & JavaScript

Video Tutorial of Navigation Bar with Indicator

You Might Like This:

Navigation Menu with Indicator [Source Code]