Today we would like to share one component most websites will have in common is some form of navigation, more often than not this navigation will come in the form of a horizontal menu.
Each of these snippet feature an Animated Border Effect as you hover each menu item.
you can see the code for better understanding. Below is the live demo is available, you can click demo button below for this live demo. And also you can download the file by clicking the download button.
Code for animated border effect in html:
<ul class="menu1">
<li class="current"><a href="#" data-hover="Home">Home</a></li>
<li><a href="#" data-hover="About Us">About Us</a></li>
<li><a href="#" data-hover="Blog">Blog</a></li>
<li><a href="#" data-hover="Services">Services</a></li>
<li><a href="#" data-hover="Products">Products</a></li>
<li><a href="#" data-hover="Contact">Contact</a></li>
</ul>
Code for animated border effect in css:
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.menu1 {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
}
.menu1 * {
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu1 li {
display: inline-block;
list-style: outside none none;
margin: 0 1.5em;
overflow: hidden;
}
.menu1 a {
padding: 0.3em 0;
color: rgba(255, 255, 255, 0.5);
position: relative;
display: inline-block;
letter-spacing: 1px;
margin: 0;
text-decoration: none;
}
.menu1 a:before,
.menu1 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu1 a:before {
bottom: 100%;
display: block;
height: 3px;
width: 100%;
content: "";
background-color: #e67e22;
}
.menu1 a:after {
padding: 0.3em 0;
position: absolute;
bottom: 100%;
left: 0;
content: attr(data-hover);
color: white;
white-space: nowrap;
}
.menu1 li:hover a,
.menu1 .current a {
transform: translateY(100%);
}
/* Demo purposes only */
body {
background-color: #212121;
}
0 Comments