Yapımcı : Austin Rightnowar
Demo :
Görsel Pek Anlam İfade Etmez Demo'ya Bakınız
V1 İçin
V2 İçin
V3 İçin
CSS
JS
Kullanacağınız Sayfaya Mutlaka Ekleyin
Açıklama : Bana Ait Değildir !
Demo :
Kod:
http://devadam.tk/menu.html
Görsel Pek Anlam İfade Etmez Demo'ya Bakınız
V1 İçin
Kod:
<section class="links">
<a class="link wipe" href="#">Portal</a>
<a class="link wipe" href="#">Forum</a>
<a class="link wipe" href="#">Arama</a>
<a class="link wipe" href="#">Üye Listesi</a>
</section>
V2 İçin
Kod:
<section class="links">
<a class="link underline" href="#">Portal</a>
<a class="link underline" href="#">Forum</a>
<a class="link underline" href="#">Arama</a>
<a class="link underline" href="#">Üye Listesi</a>
</section>
V3 İçin
Kod:
<section class="links">
<a class="link opacity" href="#">Portal</a>
<a class="link opacity" href="#">Forum</a>
<a class="link opacity" href="#">Arama</a>
<a class="link opacity" href="#">Üye Listesi</a>
</section>
CSS
PHP Kod:
@import url(https://fonts.googleapis.com/css?family=Oswald);
.links {
width: 90%;
margin: 0 auto;
}
.link {
display: inline-block;
vertical-align: top;
width: 100px;
height: 34px;
line-height: 36px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
letter-spacing: 0.1em;
text-align: center;
font-size: 0.8rem;
margin: 10px;
position: relative;
}
.link span {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
.wipe, .opacity {
border: 2px solid #fff;
border-radius: 4px;
overflow: hidden;
}
.opacity {
-webkit-transition: background-color 0.3s linear, color 0.3s linear;
transition: background-color 0.3s linear, color 0.3s linear;
background: rgba(255, 255, 255, 0);
}
.opacity:hover {
color: #124a58;
background: rgba(255, 255, 255, 0.9);
}
.wipe {
-webkit-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
}
.wipe::after {
width: 100%;
height: 100%;
display: block;
background-color: #fff;
content: " ";
position: absolute;
top: 0;
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translateY(34px);
transform: translateY(34px);
z-index: -1;
}
.wipe:hover {
color: #124a58;
}
.wipe:hover::after {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.underline {
border: 2px solid transparent;
}
.underline::after {
width: 0%;
height: 2px;
display: block;
background-color: #fff;
content: " ";
position: absolute;
top: 34px;
left: 50%;
-webkit-transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.underline:hover::after {
width: 100%;
height: 2px;
display: block;
background-color: #fff;
content: " ";
position: absolute;
top: 34px;
left: 0;
}
JS
PHP Kod:
var $slideLink = $("#slide-link"),
slideLinkText = $slideLink.find("span")[0];
$slideLink.on("mouseenter", linkOver);
function linkOver() {
TweenLite.to(slideLinkText, 0.3, {y: -25, ease: Cubic.easeIn, onComplete: function() {
TweenLite.fromTo(slideLinkText, 0.3, {y: 25}, {y: 0, ease: Cubic.easeOut})
}});
}
Kullanacağınız Sayfaya Mutlaka Ekleyin
Kod:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js'></script>
Açıklama : Bana Ait Değildir !