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

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

Html Kodlarımız

&lt;br /&gt;
&amp;lt;div id=&quot;content&quot;&amp;gt;&lt;br /&gt;
    &amp;lt;div class=&quot;button_wrap&quot;&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_aRight&quot; id=&quot;button_aLeft&quot;&amp;gt;&amp;lt;span style=&quot;visibility: hidden; opacity: 0;&quot;&amp;gt;Facebook'a giriş yapma&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_bRight slidebttn&quot; id=&quot;button_bRight&quot;&amp;gt;Facabook&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
    &amp;lt;div class=&quot;button_wrap&quot;&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_aRight&quot; id=&quot;button_aLeft&quot;&amp;gt;&amp;lt;span style=&quot;visibility: hidden; opacity: 0;&quot;&amp;gt;Twitter'a giriş yapma&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_bRight slidebttn&quot; id=&quot;button_bRight&quot;&amp;gt;Twitter&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;

Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Atilla Akoğlu

Creating web applications since 2004. e-commerce, entrepreneur and enterprise advisor. Always open for new projects, ideas and deals...

Website - Twitter - Facebook - More Posts

Serpito