Glow menu

Size
2,460 Kb
Views
4,048

How do I make an glow menu?

Simple glow menu whit nice hover state. What is a glow menu? How do you make a glow menu? This script and codes were developed by Jimmy Van Der Sleen on 15 January 2023, Sunday.

Glow menu Previews

Glow menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glow menu</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
</header> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Glow menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:500,100,400);
body { font-family: 'Roboto'; font-weight: 100; font-size: 36px; background-color: #333;
}
header { width: 100%;
}
nav { width: 535px; margin: 80px auto;
}
nav li { list-style: none; display: inline-block; position: relative; padding: 8px; z-index: 10;
}
nav li a { text-decoration: none; position: relative; padding: 6px 0; -webkit-transition: all 0.8s; transition: all 0.8s; color: lightblue;
}
nav li a:after { content: ''; width: 0%; margin-left: 50%; height: 2px; bottom: 0; left: 0; border-radius: 40%; position: absolute; transition: all 0.5s;
}
nav li a:hover:after { background-color: lightblue; width: 60%; margin-left: 20%; box-shadow: 0px 0px 10px lightblue;
}
nav li a.active:after { background-color: lightblue; width: 60%; margin-left: 20%; box-shadow: 0px 0px 10px lightblue;
}
Glow menu - Script Codes
Glow menu - Script Codes
Home Page Home
Developer Jimmy Van Der Sleen
Username sjimster
Uploaded January 15, 2023
Rating 4.5
Size 2,460 Kb
Views 4,048
Do you need developer help for Glow menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jimmy Van Der Sleen (sjimster) Script Codes
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!