Let’s create a Glowing Navigation Menu Hover using HTML and CSS. This project will add a sleek glow effect to menu items when users hover over them, giving your website a modern and stylish look.
We’ll use:
- HTML to structure the navigation menu.
- CSS to style it with glowing hover effects, smooth transitions, and a clean layout.
Whether you’re designing a portfolio, a landing page, or a full website, this Glowing Navigation Menu Hover is a great way to enhance your UI and make your navigation more interactive. Let’s get started and add some glow to your menu! ✨
HTML :
This HTML creates a vertical navigation menu where each list item sets a custom color using –clr, and each link uses data-text to duplicate the text for the hover animation. The visible text has spaces for padding, while the CSS uses the data-text value to reveal a glowing colored version on hover, matching the color defined for each menu item.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glowing Navigation Menu | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<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>
</body>
</html>
CSS :
This CSS imports a Google font, centers a vertical list on a dark background, and styles each link as large outlined text. On hover, a colored version of the text (from data-text) animates in from left to right with a glowing effect using width transition, a border-right cursor line, and drop shadow.
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Mochiy Pop One', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #252839;
}
ul {
position: relative;
display: flex;
flex-direction: column;
gap: 30px;
}
ul li {
position: relative;
list-style: none;
}
ul li a {
font-size: 4em;
text-decoration: none;
letter-spacing: 2px;
line-height: 1em;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
ul li a::before {
content: attr(data-text);
position: absolute;
color: var(--clr);
width: 0;
overflow: hidden;
transition: 1s;
border-right: 8px solid var(--clr);
-webkit-text-stroke: 1px var(--clr);
}
ul li a:hover::before {
width: 100%;
filter: drop-shadow(0 0 25px var(--clr))
}
In conclusion, creating a Glowing Navigation Menu Hover using HTML and CSS is a simple yet powerful way to make your website look modern and interactive. With smooth transitions and glowing effects, you can enhance the user experience and draw attention to your navigation links ✨
Facing any problems in your project ? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!
