Glow menu
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 - 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;
}
Developer | Jimmy Van Der Sleen |
Username | sjimster |
Uploaded | January 15, 2023 |
Rating | 4.5 |
Size | 2,460 Kb |
Views | 4,048 |
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!
Name | Size |
Checkbox menu, pure CSS | 2,816 Kb |
SCSS BEM Tabs system | 3,252 Kb |
Toggle Hamburger Menu | 2,892 Kb |
SVG Handwriting test | 3,148 Kb |
List 3d scroll | 3,552 Kb |
Css 3D Cube try-out | 2,404 Kb |
SoundCloud API user | 4,556 Kb |
Fancy input fields | 3,537 Kb |
Simple image slider | 3,446 Kb |
3D picture carousel css | 3,065 Kb |
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!
Name | Username | Size |
Sticky div | Kaslab | 2,225 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Whyutils | LeYvan | 3,752 Kb |
Easing | GreenSock | 2,043 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!