Glowing Navigation Menu
Project Overview
A modern, visually stunning navigation menu with glowing effects. This project showcases advanced CSS techniques including gradients, animations, and hover effects to create an interactive and engaging navigation experience.
Key Features:
- Glowing hover effects
- Smooth color transitions
- Responsive design
- CSS animations
- Modern UI/UX
- Multi-color support
📄 index.html - Navigation Structure
How HTML Works:
The HTML creates an unordered list of navigation items. Each list item has inline CSS variables (--clr) that define unique colors for each menu item. This allows the CSS to apply different glowing colors to each item.
<ul>
<li style="--clr:#00ade1">
<a href="#" data-text=" Home"> Home </a>
</li>
<li style="--clr:#ff6492">
<a href="#" data-text=" About"> About </a>
</li>
<li style="--clr:#ffdd1c">
<a href="#" data-text=" Services"> Services </a>
</li>
<li style="--clr:#00dc82">
<a href="#" data-text=" Blog"> Blog </a>
</li>
<li style="--clr:#dc00d4">
<a href="#" data-text=" Contact"> Contact </a>
</li>
</ul>
🎨 style.css - Glowing Effects
How CSS Works:
CSS uses CSS variables (--clr) defined in HTML to create dynamic colors. The ::before pseudo-element creates the glowing effect using box-shadow. Transitions smooth all changes, and transforms scale the item on hover.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 40px;
flex-wrap: wrap;
}
li {
list-style: none;
}
li a {
position: relative;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: var(--clr);
font-weight: 700;
font-size: 18px;
transition: 0.5s;
}
li a::before {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
color: #fff;
background: var(--clr);
overflow: hidden;
transition: 0.5s;
z-index: -1;
box-shadow: 0 0 20px var(--clr);
}
li a:hover::before {
width: 100%;
box-shadow: 0 0 30px var(--clr);
}
li:hover a {
transform: scale(1.1);
}
How Everything Works Together
1. HTML Structure: Creates a semantic list with navigation items. CSS variables (--clr) store unique colors for each item.
2. CSS Styling: Uses pseudo-elements to create the glowing background effect. Transitions animate all changes smoothly. Box-shadow creates the glow effect.
3. Interaction Flow: User hovers over a menu item → CSS detects :hover state → Background expands using ::before → Text color changes → Glow effect appears → Item scales up.
4. CSS Variables: Each menu item has its own color variable, allowing different colors without writing separate CSS for each item.