Animated Navigation Bar – 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;
}

Navigation Bar With Page Scroll To Every Section | Free Source Code

CodingNepal — Tue, 02 Mar 2021 21:09:54 +0000

Q: How To Scroll to a particular div position when clicking on a link from another page?

A: After watching the following article and video tutorial, you will definitely be able to make the page scroll to every section while clicking on the navigation link.

Hello Friends, today in this blog you will learn to create Navigation Bar with Scroll To Top Button and Scroll To Every Section using only HTML & CSS. As you guys know I have created several video tutorials related to Navigation Bar and Website Design, but I had not created a separate video about how navigation links scroll their every section on click.

Simply we can understand Navigation bar is the horizontal section on the website that contains various hyperlinks and logos. Hyperlinks help users to a quick move to the particular section or webpages which is related to that nav links.

As we can see the sample of the navigation menu on the webpage. The horizontal section that we can see at the top of the image is our navigation bar. On the left side, there is one logo and on the right side, there are some hyperlinks. On the top side, there is one button. Basically, when we clicked on those navigation links, a related section with that particular links appears smoothly and when we clicked on that arrow up button our main home page appears.

To see the real example and animation of this programming and every code behind creating this scrolling navbar, I have provided a full video tutorial below.

Page Scroll To Every Section Scroll To every Section | Video Tutorial

As you have seen in the given video tutorial. I have kept all hyperlinks in a specific anchor tag. In the section elements, I have given them different IDs and connected their id with hyperlinks (navigation links) simply by doing this our every section starts to appear while clicking on the navigation links.

Also in the scroll to top button, I have given our first section id name (Home), and it starts to scroll to the top while clicking. To make scroll smoother I gave CSS property smooth behavior inside the universal tag(*).

It is a very easy way to make this scrolling while clicking on the link but those friends who are feeling difficulty creating this navigation with scrolling every section can take code from below.

Navigation Bar With Page Scroll To Every Section | Free Source Code

To copy the given codes of this programming scroll to every section while clicking on nav links, first, you need to create two files on is an HTML file and another is a CSS file, after creating these two files then you can copy-paste the given codes in your document.




  
   
   Navigation Bar With Scroll Every Section
 
  
    
     
   

  
    
      CodingLab
      
        Home
        About
        Category
        Contact
        Feedback
      
    
  
  Home Section
  About Section
  Category Section
  Contact Section
  Feedback Section

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
nav{
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 75px;
 background: #2980b9;
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
nav .navbar{
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
 max-width: 90%;
 background: #2980b9;
 margin: auto;
}
nav .navbar .logo a{
  color: #fff;
  font-size: 27px;
  font-weight: 600;
  text-decoration: none;
}
nav .navbar .menu{
  display: flex;
}
.navbar .menu li{
  list-style: none;
  margin: 0 15px;
}
.navbar .menu li a{
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #96c7e8;
  font-size: 70px;
}
#Home{
  background: #fff;
}
#About{
  background: #f2f2f2;
}
#Category{
  background: #e6e6e6;
}
#Latest{
  background: #fff;
}
#Contact{
  background: #f2f2f2;
}
#Feedback{
  background: #e6e6e6;
}
.button a{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  background: #2980b9;
  padding: 7px 12px;;
  font-size: 18px;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.15);
}

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 Website Navbar 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.

Animated Navigation Bar – 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]

Navigation Bar With Page Scroll To Every Section | Free Source Code

Q: How To Scroll to a particular div position when clicking on a link from another page?

Page Scroll To Every Section Scroll To every Section | Video Tutorial

You Might Like This:

Navigation Bar With Page Scroll To Every Section | Free Source Code