Hey there! Vishnu Rajoria here from CSLAB Computer Institute in Sikar. As a coding instructor and full stack developer, I love sharing cool web development tricks. Today, let’s dive into creating an eye-catching, interactive navigation menu.

This project is perfect for beginners looking to level up their skills. We’ll use HTML for structure, CSS for styling, and a dash of JavaScript for interactivity.

Here’s what makes this nav menu special:

  • Sleek, modern design with stylish icons
  • Smooth animation when switching between menu items
  • A cool “light” effect that moves to highlight the active item

Let’s break down the key components:

  1. HTML Structure:
  • We’re using unordered list (<ul>) for our menu items
  • Each item is a list element (<li>) with an icon from Boxicons
  1. CSS Magic:
  • Custom properties (CSS variables) for easy color management
  • Flexbox for layout
  • Pseudo-elements for the glowing effect
  • Transitions for smooth animations
  1. JavaScript Interactivity:
  • Event listeners on each menu item
  • Functions to move the highlight and set the active state

See the Pen Untitled by CSLAB Software Development and Computer Training (@CSLAB) on CodePen.

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="style.css">
    <!-- Link to Boxicons CSS for icons -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <!-- Navigation menu -->
    <nav class="nav">
        <ul class="nav__links">
            <!-- Home link -->
            <li class="nav__link active">
                <a href="#"><i class='bx bx-home-alt-2'></i></a>
            </li>
            <!-- Heart link -->
            <li class="nav__link">
                <a href="#"><i class='bx bx-heart'></i></a>
            </li>
            <!-- Plus link -->
            <li class="nav__link">
                <a href="#"><i class='bx bx-plus-circle'></i></a>
            </li>
            <!-- User link -->
            <li class="nav__link">
                <a href="#"><i class='bx bx-user'></i></a>
            </li>
            <!-- Bell link -->
            <li class="nav__link">
                <a href="#"><i class='bx bx-bell'></i></a>
            </li>
            <!-- Light indicator for active link -->
            <div class="nav__light"></div>
        </ul>
    </nav>
    <!-- Link to external JavaScript file -->
    <script src="script.js"></script>
</body>
</html>

CSS CODE

/* ------------ VARIABLES ------------ */
:root {
  /* COLORS */
  --tab-color: #191919;
  --white-color: #fff;
  --home-icon-color: #00f7ff;
  --heart-icon-color: #ff0000;
  --plus-icon-color: #adff2f;
  --user-icon-color: #ee82ee;
  --bell-icon-color: #ffff00;
}

/* ------------ BASE ------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #000;
}

li {
  display: inline-block;
}

/* ------------ MENU ------------ */
.nav {
  background-color: var(--tab-color);
  width: 30em;
  height: 8em;
  border-radius: 2em;
  padding: 0 2em;
  box-shadow: 0 1em 1em rgba(0,0,0, .2);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.nav__links {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav__link a {
  color: var(--white-color);
  font-size: 2.5rem;
  opacity: 0.5;
}

/* Light indicator styles */
.nav__light {
  position: absolute;
  top: 0;
  left: 1.3em;
  background-color: var(--white-color);
  width: 4em;
  height: .4em;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  transition: .3s ease;
}

.nav__light::before {
  content: '';
  width: 5em;
  height: 7em;
  position: absolute;
  top: .4em;
  background: linear-gradient(to bottom, rgba(255,255,255, .3) -50%, rgba(255,255,255, 0) 90%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
}

/* Active link styles */
.nav__link.active a {
  opacity: 1;
}

/* Styles for each active icon */
.nav__link.active a .bx-home-alt-2 {
  color: var(--home-icon-color);
  text-shadow: 0 0 15px var(--home-icon-color),
               0 0 30px var(--home-icon-color),
               0 0 45px var(--home-icon-color),
               0 0 60px var(--home-icon-color);
}

.nav__link:nth-child(1).active ~ .nav__light {
  background-color: var(--home-icon-color);
}

.nav__link.active a .bx-heart{
  color: var(--heart-icon-color);
  text-shadow: 0 0 15px var(--heart-icon-color),
               0 0 30px var(--heart-icon-color),
               0 0 45px var(--heart-icon-color),
               0 0 60px var(--heart-icon-color);
}

.nav__link:nth-child(2).active ~ .nav__light{
  background-color: var(--heart-icon-color);
}


.nav__link.active a .bx-plus-circle{
  color: var(--plus-icon-color);
  text-shadow: 0 0 15px var(--plus-icon-color),
               0 0 30px var(--plus-icon-color),
               0 0 45px var(--plus-icon-color),
               0 0 60px var(--plus-icon-color);
}

.nav__link:nth-child(3).active ~ .nav__light{
  background-color: var(--plus-icon-color);
}



.nav__link.active a .bx-user{
  color: var(--user-icon-color);
  text-shadow: 0 0 15px var(--user-icon-color),
               0 0 30px var(--user-icon-color),
               0 0 45px var(--user-icon-color),
               0 0 60px var(--user-icon-color);
}

.nav__link:nth-child(4).active ~ .nav__light{
  background-color: var(--user-icon-color);
}


.nav__link.active a .bx-bell{
  color: var(--bell-icon-color);
  text-shadow: 0 0 15px var(--bell-icon-color),
               0 0 30px var(--bell-icon-color),
               0 0 45px var(--bell-icon-color),
               0 0 60px var(--bell-icon-color);
}

.nav__link:nth-child(5).active ~ .nav__light{
  background-color: var(--bell-icon-color);
};

JAVASCRIPT CODE

// Select all navigation links and the light indicator
const links = document.querySelectorAll('.nav__link');
const light = document.querySelector('.nav__light');

// Function to move the light indicator
function moveLight({offsetLeft, offsetWidth}) {
  light.style.left = `${offsetLeft - offsetWidth/4}px`;
}

// Function to set the active link
function activeLink(linkActive) {
  links.forEach(link => {
    link.classList.remove('active');
    linkActive.classList.add('active');
  })
}

// Add click event listeners to all links
links.forEach((link) => {
  link.addEventListener('click', (event) => {
    moveLight(event.target);
    activeLink(link);
  })
})

The coolest part? The light indicator that moves when you click different icons. It’s achieved with a combination of CSS positioning and JavaScript to calculate the new position.

Remember, the key to becoming a great developer is practice and experimentation. Try tweaking this code – maybe add more icons, change the colors, or modify the animations. The possibilities are endless!

If you’re in Sikar and want to learn more about web development, come visit us at CSLAB Computer Institute. We’re always excited to help new coders grow their skills!

Happy coding, everyone! 🚀💻

Similar Posts

Importance of an Online Portfolio for Landing a Web Developer Job

Importance of an Online Portfolio for Landing a Web Developer Job

ByVishnu Rajoria

An online portfolio is a vital tool for aspiring web developers looking to secure a job in the industry. It serves as a showcase of their skills, creativity, and experience, allowing potential employers to assess their capabilities and suitability for the role. In this blog post, we will discuss the importance of an online portfolio…

Creating a Stylish Login Form with HTML and CSS
|

Creating a Stylish Login Form with HTML and CSS

ByYogesh Rajoria

Hey everyone! Vishnu Rajoria here, your friendly neighborhood coding instructor and Full Stack Developer from CSLAB Computer Institute in Sikar. Today, I want to walk you through creating a sleek, modern login form using HTML and CSS. Let’s dive in! The Basics We’re building a login form that’s not just functional, but also visually appealing….

Creating a Sleek Progress Bar with HTML and CSS
|

Creating a Sleek Progress Bar with HTML and CSS

ByYogesh Rajoria

Hey there, coders! Vishnu Rajoria here from CSLAB Computer Institute in Sikar. As a full-stack developer and coding instructor, I love sharing simple yet impactful web design techniques. Today, let’s dive into creating a stylish progress bar using just HTML and CSS. The Basics We’ll start with a simple HTML structure and then add some…

Assignment Solution : Card Hover Effect
|

Assignment Solution : Card Hover Effect

ByVishnu Rajoria

In today’s web design landscape, micro-interactions and hover effects play a crucial role in creating engaging user experiences. Today, we’ll dive into creating a stunning document preview card with a unique stacked hover effect and an animated search button. This design combines subtle animations, layered elements, and smooth transitions to create a delightful user interaction….

Creating a Stylish Navbar with HTML and CSS
|

Creating a Stylish Navbar with HTML and CSS

ByYogesh Rajoria

Hey there, coding enthusiasts! Vishnu Rajoria here, your friendly neighborhood coding instructor and Full Stack Developer from CSLAB Computer Institute in Sikar. Today, I’m excited to walk you through creating a sleek, modern navbar using HTML and CSS. Let’s dive in! What We’re Building We’re going to create a horizontal navbar with a gradient background…

Creating an Awesome Animated Text Effect with HTML and CSS
|

Creating an Awesome Animated Text Effect with HTML and CSS

ByYogesh Rajoria

Hey there! Vishnu Rajoria here, your friendly neighborhood coding instructor and Full Stack Developer at CSLAB Computer Institute in Sikar. Today, I’m excited to share a cool little project that’ll make your text come alive with a simple yet eye-catching animation. What We’re Building We’re creating a webpage with the word “awesome” that has a…

Leave a Reply

Your email address will not be published. Required fields are marked *