Nav Menu Hover
How do I make an nav menu hover?
Playful menu, featuring semantic markup, no extra elements and a fun 3d hover.. What is a nav menu hover? How do you make a nav menu hover? This script and codes were developed by Hans Engebretsen on 09 August 2022, Tuesday.
Nav Menu Hover - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav Menu Hover</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Lato:100,400);
html { height: 100%; perspective: 1000px; transform-style: preserver-3d; font-family: lato, sans-serif;
}
body { background-color: #bad7e9; background: radial-gradient(closest-corner, #bad7e9 60%, rgba(186, 215, 233, 0.26)); width: 100%; height: 100%; background-repeat: no-repeat;
}
ul { display: block; text-align: center; margin: 0 auto; padding: 0; width: 100%; min-width: 535px; background-color: #343e48; position: relative; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
ul:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZmBg6AZiDiBWZ4YyQMCOCcYA4kMAAQYAHyYCCUdxidgAAAAASUVORK5CYII=");
}
li { margin: 0 auto; display: inline-block; list-style: none; padding: 0;
}
a { display: block; padding: 25px; text-transform: uppercase; position: relative; z-index: 2; text-shadow: 1px 0px rgba(0, 0, 0, 0.4); color: #686f77; letter-spacing: .2em; text-decoration: none; transition: color 200ms; transform-style: preserve-3d;
}
a:hover { color: #343e48;
}
a:after { content: attr(data-title); position: absolute; display: block; text-shadow: none; top: 29%; left: 18px; padding: 5px 7px; color: transparent; background: #4795c3; transform-origin: 50% 0%; backface-visibility: hidden; transform: translate3d(0px, 105%, 0px) rotateX(-112deg); transform-style: preserve-3d; transition: all 200ms ease; z-index: -1;
}
li:nth-child(2) a:after { background: #ecc64b;
}
li:nth-child(3) a:after { background: #0b9ea6;
}
li:nth-child(4) a:after { background: #f26667;
}
a:hover:after { transform: rotateX(0deg) translateZ(0px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li><a href="#" data-title="home">Home</a></li> <li><a href="#" data-title="About">About</a></li> <li><a href="#" data-title="Portfolio">Portfolio</a></li> <li><a href="#" data-title="Blog">Blog</a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Nav Menu Hover - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Lato:100,400);
html { height: 100%; perspective: 1000px; transform-style: preserver-3d; font-family: lato, sans-serif;
}
body { background-color: #bad7e9; background: radial-gradient(closest-corner, #bad7e9 60%, rgba(186, 215, 233, 0.26)); width: 100%; height: 100%; background-repeat: no-repeat;
}
ul { display: block; text-align: center; margin: 0 auto; padding: 0; width: 100%; min-width: 535px; background-color: #343e48; position: relative; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
ul:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZmBg6AZiDiBWZ4YyQMCOCcYA4kMAAQYAHyYCCUdxidgAAAAASUVORK5CYII=");
}
li { margin: 0 auto; display: inline-block; list-style: none; padding: 0;
}
a { display: block; padding: 25px; text-transform: uppercase; position: relative; z-index: 2; text-shadow: 1px 0px rgba(0, 0, 0, 0.4); color: #686f77; letter-spacing: .2em; text-decoration: none; transition: color 200ms; transform-style: preserve-3d;
}
a:hover { color: #343e48;
}
a:after { content: attr(data-title); position: absolute; display: block; text-shadow: none; top: 29%; left: 18px; padding: 5px 7px; color: transparent; background: #4795c3; transform-origin: 50% 0%; backface-visibility: hidden; transform: translate3d(0px, 105%, 0px) rotateX(-112deg); transform-style: preserve-3d; transition: all 200ms ease; z-index: -1;
}
li:nth-child(2) a:after { background: #ecc64b;
}
li:nth-child(3) a:after { background: #0b9ea6;
}
li:nth-child(4) a:after { background: #f26667;
}
a:hover:after { transform: rotateX(0deg) translateZ(0px);
}
Developer | Hans Engebretsen |
Username | hans |
Uploaded | August 09, 2022 |
Rating | 3.5 |
Size | 4,538 Kb |
Views | 46,552 |
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 |
Visual effects Demo | 4,184 Kb |
Image Hover effect | 3,496 Kb |
Launch Sign up form | 5,586 Kb |
Nice textured background | 2,659 Kb |
Timeline Sign Load Transition | 3,926 Kb |
IMac - Scrolling effect | 5,429 Kb |
Background-filter toggle | 38,215 Kb |
Unfolding Login Form | 39,336 Kb |
Beautiful gradients, Expanding collums | 4,088 Kb |
Typographic Fun | 3,844 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 |
Ghost | Mghayour | 11,738 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Awesome textarea | Ayoungh | 1,977 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Hello People | Danburrows | 2,365 Kb |
About Us | Francescaedits | 1,902 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 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!