Glowing Navigation Menu

This component demonstrates a stylish glowing navigation menu using pure HTML and CSS, featuring:

Neon glow hover animation
Text stroke + reveal effect
CSS variables for dynamic colors
Smooth transitions with modern UI feel
Fully responsive and lightweight

Code

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <title>Glowing Navigation Menu | CodewithLord</title>
7  <link rel="stylesheet" href="./style.css">
8</head>
9
10<body>
11
12  <ul>
13    <li style="--clr:#00ade1">
14      <a href="#" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a>
15    </li>
16    <li style="--clr:#ff6492">
17      <a href="#" data-text="&nbsp;About">&nbsp;About&nbsp;</a>
18    </li>
19    <li style="--clr:#ffdd1c">
20      <a href="#" data-text="&nbsp;Services">&nbsp;Services&nbsp;</a>
21    </li>
22    <li style="--clr:#00dc82">
23      <a href="#" data-text="&nbsp;Blog">&nbsp;Blog&nbsp;</a>
24    </li>
25    <li style="--clr:#dc00d4">
26      <a href="#" data-text="&nbsp;Contact">&nbsp;Contact&nbsp;</a>
27    </li>
28  </ul>
29
30</body>
31
32</html>

Explanation of the Code

HTML & CSS

Simple semantic structure using <ul> and <li>for navigation.

Google Font Mochiy Pop One gives a playful, bold appearance.

Centered layout using Flexbox for perfect alignment.

Glowing Text Effect

Text is initially transparent with a white stroke using -webkit-text-stroke.

The glowing color is revealed using the ::before pseudo-element.

width: 0 → 100% animation creates a smooth text-reveal effect.

CSS Variables

Each menu item defines its own color using --clr.

Allows easy customization without modifying CSS rules.

Hover Animation

Border-right simulates a typing cursor effect.

drop-shadow() adds neon glow on hover.

Smooth transition: 1s for premium UI feel.

Responsive Behavior

Font scales naturally on different screen sizes.

CSS code

1@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap');
2
3* {
4  box-sizing: border-box;
5  padding: 0;
6  margin: 0;
7  font-family: 'Mochiy Pop One', sans-serif;
8}
9
10body {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  min-height: 100vh;
15  background: #252839;
16}
17
18ul {
19  position: relative;
20  display: flex;
21  flex-direction: column;
22  gap: 30px;
23}
24
25ul li {
26  position: relative;
27  list-style: none;
28}
29
30ul li a {
31  font-size: 4em;
32  text-decoration: none;
33  letter-spacing: 2px;
34  line-height: 1em;
35  text-transform: uppercase;
36  color: transparent;
37  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
38}
39
40ul li a::before {
41  content: attr(data-text);
42  position: absolute;
43  color: var(--clr);
44  width: 0;
45  overflow: hidden;
46  transition: 1s;
47  border-right: 8px solid var(--clr);
48  -webkit-text-stroke: 1px var(--clr);
49}
50
51ul li a:hover::before {
52  width: 100%;
53  filter: drop-shadow(0 0 25px var(--clr))
54}
55

No JavaScript required — lightweight and performant.

Glowing Navigation Menu with CSS Hover Effects