Horje
How To Make Active Navbar In HTML CSS And JavaScript ?

An active navbar refers to a navigation bar on a website where the current or active page is visually highlighted or distinguished from the other menu items. In this article, we are going to learn how to make an Active Navbar in HTML, CSS, and JavaScript.

Prerequisites:

Approach

  • Use HTML to give structure using an unordered list (<ul>) and list items (<li>) for each navigation element, assigning unique IDs or classes.
  • Design the navigation bar using CSS and give it a special look when a menu item is selected.
  • In JavaScript, Select all navigation items with the class ‘.nav-item’ using const navItems = document.querySelectorAll('.nav-item');.
  • Iterate through each navigation item using navItems.forEach(item => {...}).
  • Add a click event listener to each navigation item to respond when a user clicks on it.

Example: In this example, we have implemented the above approach.

Javascript

//script.js
document.addEventListener('DOMContentLoaded',
    function () {
        const navItems = document
            .querySelectorAll('.nav-item');
 
        navItems.forEach(item => {
            item.addEventListener('click',
                function () {
                    navItems.forEach(navItem => navItem
                        .classList.remove('active'));
                    this.classList.add('active');
                });
        });
    });

HTML

<!-- Index.html -->
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Active Navbar</title>
</head>
 
<body>
 
    <nav>
        <ul>
            <li class="nav-item" id="home">
              <a href="#">Home</a>
              </li>
            <li class="nav-item" id="about">
              <a href="#">About</a>
              </li>
            <li class="nav-item" id="services">
              <a href="#">Services</a>
              </li>
            <li class="nav-item" id="contact">
              <a href="#">Contact</a>
              </li>
        </ul>
    </nav>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231226123149/gfg-image.jpg">
 
    <script src="script.js"></script>
</body>
 
</html>

CSS

/* styles.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
 
img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
 
nav {
  background-color: #333;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
 
.nav-item {
  float: left;
}
 
.nav-item a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.nav-item.active {
  background-color: #4CAF50;
}

Output:

gfg-navbar


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript Animations JavaScript Animations
How to Check Whether an Array Contains a String in TypeScript ? How to Check Whether an Array Contains a String in TypeScript ?
JavaScript Program to Find the Area of Trapezium JavaScript Program to Find the Area of Trapezium
How do I Remove an Array Item in TypeScript? How do I Remove an Array Item in TypeScript?
How to Convert a String to enum in TypeScript? How to Convert a String to enum in TypeScript?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje