pillinetwork hesabınızla giriş yapın.

jQuery ile Renkli Menü

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
#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şturma

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" type="text/css" href="stil.css">

		<script src="jquery-1.3.2.js" type="text/javascript"></script>

		<script src="jquery.color.js" type="text/javascript"></script>

		<script src="menu.js" type="text/javascript"></script>

		<title>Renkli Menü</title>

	</head>

	<body>

		<div id="menu">

			<ul>

				<li><a id = "1" href="#" >mavi</a></li>

				<li><a id = "2" href="#">yeşil</a></li>

				<li><a id = "3" href="#">kırmızı</a></li>

				<li><a id = "4" href="#">sarı</a></li>

				<li><a id = "5" href="#">mor</a></li>

			</ul>

		</div>

	</body>


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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(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 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.

/* Etiketler: , , , , */
/* ceyranci yazdı. 21 Mayıs 2009 15:27. 8 yorum var */

Yorumlar

Stil dosyası düzeltilerek çok güzel bir tasarım haline getirilebilir.
Bilgileriniz ve paylaşımlarınız için teşekkürler...

/* ufukgursoy | 21 Mayıs 2009 16:40 */

Güzel gerçekten hoş. Ama Safari'de çalışmadı :)

/* s4l1h | 21 Mayıs 2009 23:11 */

gerçekten renklerin yavaş yavaş gelmesi ve gitmesi güzel olmuş. Ama maalesef chrome'da da çalışmadı.

/* bugünkü gazete manşetleri (gazetelerin ilk sayfası değil, websitelerindeki görsel manşetler) */
/* biradamiste | 22 Mayıs 2009 21:55 */

Ben sadece Firefox ve IE de denemiştim zaten. :D

/* ftoptas */
/* ceyranci | 23 Mayıs 2009 14:19 */

Sanırım eklentiden kaynaklanan bir sorun :)

/* s4l1h | 30 Mayıs 2009 12:43 */

Chrome'da çalışmaması kötü olmuş gerçekten.
Ama çok iyi işler çıkartılabilir.Teşekkür ederiz.

/* saitergun | 07 Haziran 2009 05:25 */

Bence de jquery color eklentisinden olması lazım. Eklentinin yeni sürümlerinde sorun çözülür herhalde.

/* ftoptas */
/* ceyranci | 12 Haziran 2009 14:22 */

güzel paylaşım. birde chrome da çalışsaydı

/* mally328 | 31 Ağustos 2009 14:28 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork