Cool Nav Menu Hover
In this article, we will create a cool navigation menu with hover effects using HTML and CSS. The navigation menu will have a background color and when hovering over each menu item, it will show a sliding line with a specific color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool Nav Menu Hover</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="nav-menu">
<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>
</body>
</html>
CSS
@import "compass/css3";
$menu-background: #343e48;
$blue: #4795c3;
$grey: #686f77;
$yellow: #ecc64b;
$green: #0b9ea6;
$red: #f26667;
@import url(https://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:lighten($blue,30%);
background: radial-gradient(closest-corner,lighten($blue,30%) 60%,rgba(lighten($blue,30%),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: $menu-background;
position:relative;
&:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:.5;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB9JREFUeNpiZmBg6AZiDiBWZ4YyQMCOCcYA4kMAAQYAHyYCCUdxidgAAAAASUVORK5CYII=');
}
box-shadow:0 3px 8px rgba(black,.5);
}
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(black,.4);
color: $grey;
letter-spacing:.2em;
text-decoration: none;
transition: color 200ms;
transform-style: preserve-3d;
&:hover {
color: $menu-background;
}
&:after {
content: attr(data-title);
position: absolute;
display: block;
text-shadow:none;
top: 29%;
left: 18px;
padding: 5px 7px;
color: transparent;
background: $blue;
li:nth-child(2) & { background:$yellow; }
li:nth-child(3) & { background:$green; }
li:nth-child(4) & { background:$red; }
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;
}
&:hover:after {
transform: rotateX(0deg) translateZ(0px);
}
}
In this code, we have created a simple HTML structure with an unordered list (ul) and list items (li). The CSS styling is responsible for creating the navigation menu with hover effects.
The
$menu-background variable holds the background color of the menu, which you can customize. Each list item contains an anchor (<a>) tag representing a menu item, and we use the data-title attribute to store the title of each menu item.:before pseudo-element to display the title of each menu item on hover. The :hover selector is used to define the hover effect for each menu item, changing the background color based on your preferred color scheme.$blue, $grey, $yellow, and $green variables to your desired colors.