How to make active tab in navigation menu using HTML CSS & JavaScript?

Front End Technology Javascript Web Development

With the help of HTML, CSS, and JavaScript, it is possible to create a navigation menu with a curved active tab. This can be done by using the ::before and ::after pseudo-elements to create the desired shape, and then using JavaScript to add the active class to the element.

HTML

The HTML for this navigation menu is very simple. There is a ul element with a class of "nav" and within that, there are six li elements, each with a class of "nav-item".

<ul class="nav">
   <li class="nav-item"><a href="#">Home</a></li>
   <li class="nav-item"><a href="#">About</a></li>
   <li class="nav-item"><a href="#">Services</a></li>
   <li class="nav-item"><a href="#">Portfolio</a></li>
   <li class="nav-item"><a href="#">Contact</a></li>
</ul>

CSS

The CSS for this navigation menu is fairly straightforward. The ::before and ::after pseudo-elements are used to create the two halves of the active tab. These are then positioned absolutely so that they sit on top of the other tabs.

The .nav-item class is used to style the rest of the navigation menu. The a elements are given a display of block so that they fill the entire space of the li elements.

.nav {
   position: relative;
   list-style: none;
   padding: 0;
   margin: 0;
}
.nav::before, .nav::after {
   content: "";
   position: absolute;
   top: 0;
   width: 50%;
   height: 100%;
   background: #fff;
   z-index: 1;
}
.nav::before {
   left: 0;
   border-radius: 0 0 0 50%;
}
.nav::after {
   right: 0;
   border-radius: 0 0 50% 0;
}
.nav-item {
   position: relative;
   float: left;
   width: 16.66667%; 
}
.nav-item a {
   display: block;
   padding: 10px 20px;
   border: 1px solid #ccc;
   text-decoration: none;
   color: #333;
   position: relative;
   z-index: 2; 
}

JavaScript

The JavaScript for this navigation menu is very simple. It just needs to add the active class to the element when it is clicked. This can be done with the help of the classList property.

var navItems = document.querySelectorAll(".nav-item");
for (var i = 0; i < navItems.length; i++) {
   navItems[i].addEventListener("click", function() {
      this.classList.add("active");
   });
}

Example

Below is the full working program to create active tab in navigation menu. We use above discussed HTML, CSS and JavaScript to achieve this goal.


<!DOCTYPE HTML>
<html>
<head>
   <style>HTML
   .nav {
      position: relative;
      list-style: none;
      padding: 0;
      margin: 0;
   }
   .nav::before{
      content: "";
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background: #fff;
      z-index: 1; 
   }
   .active{
      background: rgb(177, 177, 177);
   }
   .nav::after {
      content: "";
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background: rgb(0, 0, 0);
      z-index: 1; 
   }
   .nav::before {
      left: 0;
      border-radius: 0 0 0 50%;
   }
   .nav::after {
      right: 0;
      border-radius: 0 0 50% 0;
   }
   .nav-item {
      position: relative;
      float: left;
      width: 16.66667%;
   }
   .nav-item a {
      display: block;
      padding: 10px 20px;
      border: 1px solid #ccc;
      text-decoration: none;
      color: #333;
      position: relative;
      z-index: 2;
   }
   </style>
</head>
<body>
   <ul class="nav">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Services</a></li>
      <li class="nav-item"><a href="#">Portfolio</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
   </ul>
   <script>
      var navItems = document.querySelectorAll(".nav-item");
      for (var i = 0; i < navItems.length; i++) {
         navItems[i].addEventListener("click", function() {
            this.classList.add("active");
         });
      }
   </script>
</body>
</html>

In conclusion, it is possible to create a navigation menu with a curved active tab using HTML, CSS, and JavaScript. This can be done by using the ::before and ::after pseudo-elements to create the desired shape, and then using JavaScript to add the active class to the element.

Imran Alam

Updated on: 04-Aug-2022

12K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started