Menu Hover Effect
Αντιγραφή τον παρακάτω κώδικα:
<style>
//@import url(http://foulscode.blogspot.gr);
@mixin va ($pos: relative, $top: 50%) {
position: $pos;
top: $top;
transform: translateY(-50%);
}
html {
height: 100%;
}
body {
position: relative;
height: 100%;
background-color: #dc143c;
font: normal 125%/1.5 "Avenir Next", "Source Sans Pro";
color: rgba(#fff,1);
text-shadow: 0 1px 1px rgba(#000,.2);
}
.nav {
text-align: center;
/* background-color: gold; */
@include va;
}
.nav ul {
display: inline-block;
transform: translate3d(0, 0, 0);
}
.nav li {
/* float: left; */
display: inline-block;
}
.nav a {
position: relative;
display: block;
padding: 0 40px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #fff;
}
.nav a:after {
position: absolute;
// This makes the 'border-width' 0, by moving its left and right side
// to the middle. This way the animation
// starts from the center (anchor-point) and expands outwards.
left: 50%;
right: 50%;
// Or offset the anchor-point from which the animation expands.
// As long as it adds up to 100%.
// left: 70%;
// right: 30%;
// It is also possible to reverse this effect, e.g.,
// set the values here to 40px and on :hover to 50%.
height: 3px;
bottom: 10px;
content: "";
// background-color: lightsalmon;
background-color: darken(#dc143c,15%);
transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform: translate3d(0, 0, 0);
}
.nav a:hover:after {
left: 40px;
right: 42px;
}
</style>
<div class="nav">
<ul>
<li><a href="#URL">Home</a></li>
<li><a href="#URL">One</a></li>
<li><a href="#URL">Two</a></li>
<li><a href="#URL">Three</a></li>
</ul>
</div>
DEMO
Αντικαταστήστε τα URL και τον τίτλο και είστε έτοιμοι!
Κατηγορίες:
Σχόλια