Mootools Slider Buton

Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.

İlk olarak javascript kodlarımızdan başlayalım



<script type="text/javascript" src="mootools-1.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$$('.slidebttn').each(function(btn) {
var prev = btn.getPrevious('a').set('tween',{ duration: 500 })
var span = prev.getElement('span')
btn.addEvents({
mouseenter: function(e) {
btn.addClass('a')
prev.tween('width',225)
span.fade('in')
},
mouseleave:function(e) {
btn.removeClass('button_c')
prev.tween('width',70)
span.fade('out')
}
})
})
})
</script>

Html Kodlarımız


<div id="content">
<div class="button_wrap">
<a class="button_aRight" id="button_aLeft"><span style="visibility: hidden; opacity: 0;">Facebook'a giriş yapma</span></a>
<a class="button_bRight slidebttn" id="button_bRight">Facabook</a>
</div>
<div class="button_wrap">
<a class="button_aRight" id="button_aLeft"><span style="visibility: hidden; opacity: 0;">Twitter'a giriş yapma</span></a>
<a class="button_bRight slidebttn" id="button_bRight">Twitter</a>
</div>
</div>

Mootools Slider Buton” üzerine 3 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir