MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
DevAdam avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Menü ( 3 Stil )


Sponsor Reklam

Çevrimdışı DevAdam
 Tarih: 02-03-2017, Saat:20:37
(Son Düzenleme: 02-03-2017, Saat:20:38, Düzenleyen: DevAdam.)
#1
Yapımcı Yapımcı : Austin Rightnowar

Dahili url link - Internal link Demo :
Kod:
http://devadam.tk/menu.html

Görsel Pek Anlam İfade Etmez Demo'ya Bakınız
resim

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 {
 
 width90%;
 
 margin0 auto;
}

.
link {
 
 displayinline-block;
 
 vertical-aligntop;
 
 width100px;
 
 height34px;
 
 line-height36px;
 
 text-transformuppercase;
 
 text-decorationnone;
 
 color#fff;
 
 letter-spacing0.1em;
 
 text-aligncenter;
 
 font-size0.8rem;
 
 margin10px;
 
 positionrelative;
}
.
link span {
 
 positionabsolute;
 
 height100%;
 
 width100%;
 
 top0;
 
 left0;
 
 text-aligncenter;
}

.
wipe, .opacity {
 
 border2px solid #fff;
 
 border-radius4px;
 
 overflowhidden;
}

.
opacity {
 
 -webkit-transitionbackground-color 0.3s linearcolor 0.3s linear;
 
 transitionbackground-color 0.3s linearcolor 0.3s linear;
 
 backgroundrgba(2552552550);
}
.
opacity:hover {
 
 color#124a58;
 
 backgroundrgba(2552552550.9);
}

.
wipe {
 
 -webkit-transitioncolor 0.3s ease-out;
 
 transitioncolor 0.3s ease-out;
}
.
wipe::after {
 
 width100%;
 
 height100%;
 
 displayblock;
 
 background-color#fff;
 
 content" ";
 
 positionabsolute;
 
 top0;
 
 -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.2150.610.3551);
 
 transition: -webkit-transform 0.2s cubic-bezier(0.2150.610.3551);
 
 transitiontransform 0.2s cubic-bezier(0.2150.610.3551);
 
 transitiontransform 0.2s cubic-bezier(0.2150.610.3551), -webkit-transform 0.2s cubic-bezier(0.2150.610.3551);
 
 -webkit-transformtranslateY(34px);
 
         transformtranslateY(34px);
 
 z-index: -1;
}
.
wipe:hover {
 
 color#124a58;
}
.
wipe:hover::after {
 
 -webkit-transformtranslateY(0px);
 
         transformtranslateY(0px);
}

.
underline {
 
 border2px solid transparent;
}
.
underline::after {
 
 width0%;
 
 height2px;
 
 displayblock;
 
 background-color#fff;
 
 content" ";
 
 positionabsolute;
 
 top34px;
 
 left50%;
 
 -webkit-transitionleft 0.2s cubic-bezier(0.2150.610.3551), width 0.2s cubic-bezier(0.2150.610.3551);
 
 transitionleft 0.2s cubic-bezier(0.2150.610.3551), width 0.2s cubic-bezier(0.2150.610.3551);
}
.
underline:hover::after {
 
 width100%;
 
 height2px;
 
 displayblock;
 
 background-color#fff;
 
 content" ";
 
 positionabsolute;
 
 top34px;
 
 left0;


JS
PHP Kod:
var $slideLink = $("#slide-link"),
 
   slideLinkText $slideLink.find("span")[0];

$slideLink.on("mouseenter"linkOver);

function 
linkOver() {
 
 TweenLite.to(slideLinkText0.3, {y: -25easeCubic.easeInonComplete: function() {
 
   TweenLite.fromTo(slideLinkText0.3, {y25}, {y0easeCubic.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 !
Cevapla
Bunu Beğenenler: EmreKRMN , S.G , Dream41 , Edward
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  [1.6 - 1.8] Headerde Kayan Menü Hakkında Yardım reddick 3 2,979 07-01-2017, Saat:00:53
Son Yorum: kinqplus
  [1.8] Siteleriniz için vB stil giriş paneli R34LiTy 8 3,108 24-08-2016, Saat:09:09
Son Yorum: R34LiTy
  Kullanıcı Menü 1.0 DevAdam 2 1,958 24-05-2016, Saat:19:04
Son Yorum: Anka06



Konuyu Okuyanlar: 1 Ziyaretçi