 |
| Navigation Bar Hover Effects CSS | CodingTuting |
Navigations are the first impression of the website. It contains the links to all pages of our website. I've posted and shared the source code about the Responsive and colorful Navbar before. If you haven't check that post, please see here.
Navigations are one of the main parts of the website, that's why HTML5 has given the <nav> tag, which is use to create navigation for website. We can create navbar by using HTML CSS, Bootstrap etc. All these navigations have simple and basic look.
Sometimes we want our navigation more attractive. For this, we use our own CSS. Today we'll do something like this. Today we'll make a Simple Navigation Bar using HTML5 <nav> tag. And we'll make it more attractive by giving a beautiful hover effect using CSS.
We'll give a beautiful touchup to our website by creating this Hover Effect Navbar. We'll use only HTML and CSS, and those creators who haven't knowledge of JavaScript, they will like it more.
See the Preview of CSS Hover Effect Navigation
Now Focus on Source Code
Before look at the source code, let's understand How I did this? Don't be hurry for source code.
I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.
- I creted the Navigation first using <nav> tag with class menu. And placed some links with icons in <a> tag.
- I gave the class active to the one link to show the active page.
- I gave a colored border-bottom to the each <a> tag.
- Then I gave padding:22px to each <a> tag which is equal to the base line of the Navigation.
- I defined the keyframe CSS3 animations for different different browser. This animation reduce the padding of <a> tag from 22px to 6px. And vice-versa one more animation.
- At last, I call this CSS3 Keyframe animation on hover the <a> tag.
Changing the padding of <a> tag from 22px to 6px (on hover), and 6px to 22px (default) is giving the animation effect to the navigation.
Above is the summary for understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.
HoverNavbar.html
<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>
<head>
<title>Hover Nabvar</title>
<link rel="stylesheet" href="StyleHoverNavbar.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<nav class="menu">
<a href="#" class="active" title="Home"><i class="fas fa-home"></i> Home </a>
<a href="#" title="About"><i class="far fa-address-card"></i> About </a>
<a href="#" title="Gallery"><i class="fas fa-photo-video"></i> Gallery </a>
<a href="#" title="Contact"><i class="fas fa-mobile-alt"></i> Contact </a>
<a href="#" title="FAQ"><i class="fas fa-question"></i> FAQ </a>
</nav>
</body>
</html>
StyleHoverNavbar.css
/*Code by CodingTuting.Com Jignesh Panchal*/
@-webkit-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-moz-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-o-keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@keyframes up-underline {
0% { padding: 22px 0px; }
100% { padding: 6px 0px; }
}
@-webkit-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@-moz-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@-o-keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
@keyframes down-underline {
0% { padding: 6px 0px; }
100% { padding: 22px 0px; }
}
body{
margin:0;
}
.menu{
text-align: center;
line-height: 3.5;
border-bottom: 4px solid #E91E63;
}
.menu a{
padding: 22px 0px;
margin-right: 40px;
font-family: arial;
font-size: 18px;
text-decoration: none;
color: #282929;
border-bottom: 3px solid #e91e63;
-webkit-animation: down-underline .4s;
-moz-animation: down-underline .4s;
-o-animation: down-underline .4s;
animation: down-underline .4s;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
}
.menu a:hover{
color:#e91e63;
padding: 6px 0px;
-webkit-animation: up-underline .4s;
-moz-animation: up-underline .4s;
-o-animation: up-underline .4s;
animation: up-underline .4s;
}
.menu a.active{
padding: 6px 0;
}
We hope you got - How To Make Navigation Hover CSS. You can use this idea of animation to anywhere as you like. And you can also make more animations like this.
If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.
Sharing is Caring
Thanks for Reading
EmoticonEmoticon