Hey there, Attractive navigation is one of the most important features of a website. In this blog we’ll learn how to create a navigation menu with awesome hover effects using only HTML & CSS.
Navigation helps a visitor quickly and easily find the info they’re looking for, such as a blog post or product page. It can also allow them to find important info that they didn’t know they needed, like a service page, pricing plan, signup section, or contact info etc.
Essentially, In this video we created a list of menu items and a beautiful background animation when you hover on a particular menu item. We used pseudo element ( ::before ) to create this hover effects.
Video Tutorial of Navigation Menu With Awesome Hover Effects Using Only HTML & CSS
Source Codes
First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>navbar</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar__list">
<li class="navbar__item">
<a href="#" class="navbar__link">
<i class="fas fa-home navbar__icon"></i>
Home
</a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link">
<i class="fas fa-user navbar__icon"></i>
About
</a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link">
<i class="fas fa-taxi navbar__icon"></i>
Services
</a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link">
<i class="fas fa-envelope navbar__icon"></i>
Contact
</a>
</li>
</ul>
</nav>
</body>
</html>Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url(./bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.navbar__list {
list-style: none;
font-size: 20px;
}
.navbar__item {
margin-bottom: 10px;
position: relative;
}
.navbar__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 3px;
background-color: #ff3366;
transform: scaleY(0);
transform-origin: center;
transition: transform 0.2s, width 0.4s cubic-bezier(1,0,0,1) 0.2s, background-color 0.1s;
}
.navbar__item:hover::before {
transform: scaleY(1);
width: 100%;
}
.navbar__link {
text-decoration: none;
color: #eb2f64;
text-transform: uppercase;
padding: 15px 30px;
display: block;
position: relative;
z-index: 10;
transition-delay: 0.4s;
}
.navbar__link:hover {
color: #fff;
}
.navbar__icon {
margin-right: 30px;
}
