Bilindiği gibi jQuery en popüler javascript çatılarından biridir.Şimdi jQuery ile 4 adımda renkli menümüzü oluşturacağız.1.Adım: Gerekli dosya ve eklentileri indirmeŞuradan jquery-1.3.2.min.js dosyasını indiriyoruz.Renklerle işlem yapacağımız için jQuery color eklentisini şuradan indiriyoruz.2. Adım: Stilleri oluşturma#menu{width:500px;height:70px;background-color:#fff;border-top:1px solid #000;border-bottom:1px solid #000;margin:0 auto;}#menu ul{list-style:none;margin:0;padding:0;}#menu ul li{float:left;}#menu ul li a{width:100px;display:block;text-align:center;font-size:20px;line-height:70px;text-decoration:none;color:#000;}
Yazdığımız bu stil dosyasını stil.css isminde kaydediyoruz. Burada menünün boyutları, konumu vs. ayarlamaları yapıyoruz. Bu kısımda isteğinize göre düzenlemeler yapabilirsiniz.
3.Adım: HTML dosyasını oluşturmaRenkli Menü




Bu dosyayı stil.css dosyasının bulunduğu dizine kaydediyoruz. Burada dikkat etmemiz gereken kısım linklerin id değerleridir. Her linkin id’si farklı olmalıdır. Aynı id değerli linkler aynı renkte olur.
4.Adım: jQuery$(document).ready(function(){renkler = [“#fff”,”#77f”,”#5f5″,”#f55″,”#FBF806″,”#D463F5″];$(“#menu a”).mouseover(function(){buton = “#”+this.id;$(buton).animate({“backgroundColor”:renkler[this.id]},”slow”);}).mouseleave(function(){$(buton).animate({“backgroundColor”:renkler[0]},”slow”);});});
Bu javascript dosyasını html dosyamızın bulunduğu dizine http://arsiv.pilli.com/menu.js isminde kaydediyoruz.$(document).ready() fonksiyonu içine yazdığımız fonksiyonlar DOM yüklendikten sonra hemen çalışır. Dolayısıyla yazacağımız tüm fonksiyonlar bunun içinde olmalıdır.Önce renkler isminde bir dizi oluşturuyoruz. Dizinin ilk elemanı menü linklerinin normal rengi olsun. Diğer elemanları ise her bir linkin değişeceği renk olsun.$(“#menu a”).mouseover() fonksiyonuyla fare ile linkin üzerine geldiğimizde oluşacak olayları belirliyoruz. Sonra buton isminde bir değişken oluşturuyoruz. Bu değişkenin değeri ise “#”+this.id olsun. Hatırlarsanız her linkin id değerini farklı yapmıştık. id’si 3 olan linki ele alırsak buton = #3 olur. Yani id’si 3 olan elemanı seçmiş oluruz $(buton).animate() fonksiyonuyla da oluşacak değişikliği belirtiyoruz. animate() fonksiyonu için iki parametre kullandık. Birinci parametre yani {“backgroundColor”: renkler[this.id]} satırı ile değişecek özelliği belirttik. Linkin arkaplan rengi, renkler dizisinin ilgili elemanıdır. İkinci parametre ise “slow”dur. Bu da animasyonun değişim hızını belirtir. “slow”,”normal”,”fast” veya herhangi bir sayı(milisaniye cinsinden) yazılıabilir. animate() fonksiyonu sonucunda 500ms içinde linkin rengi beyazdan belirttiğimiz renge dönüştü. Fareyi üzerinden çektiğimizde tekrar eski rengini alması için mouseleave() fonksiyonunu kullanacağız. Bu fonksiyonun ilk parametresine de renkler dizisinin ilk elemanını atadık. Yani fareyi linkin üzerinden çektiğimiz zaman arkaplan rengi tekrar eski halini alacak.
jQuery’de yazdığımız fonksiyonları zincirleme kullanabiliriz. Çünkü her bir fonksiyonun döndürdüğü değer bir jQuery nesnesidir ve her nesneye yeni fonksiyonlar atanabilir. mouseover() fonksiyonunun arkasına mouseleave() fonksiyonunu ekleyerek bunu örneklemiş olduk.
Bu örneğin çalışan haline şuradan kaynak dosyalarına da şuradan ulaşabilirsiniz.