Her zaman olduğu gibi önce HTML kısmını yazıyoruz. index.html

<div id="menu">
<ul>
<li><a href="#">Google</a>
<li><a href="#">Yahoo</a>
<li><a href="#">Youtube</a>
</ul>
</div>

Şimdi de biraz stil düzenlemesi yapmak için CSS dosyasını oluşturuyoruz. stil.css

#menu ul{list-style:none;}
#menu ul li a {
width:150px;
height:35px;
font-size:24px;
font-family:Trebuchet MS;
text-decoration:none;
border:2px solid #DF7401;
display:block; text-align:left;
vertical-align:middle;
margin-bottom:10px;
color:#1C7DC5;
background-image:url(bg.png);
background-repeat:no-repeat;
background-color:#fff;
}
#menu ul li a:hover{
color:#DF7401;
}

Son olarak jQuery kodlarını yazıyoruz. main.js

$(document).ready(function(){
var menu = $('#menu ul li a');
var bgPosX = [110,150];
var bgPosY = [10,10]
var textInd = [5,15];

menu.css({textIndent:textInd[0],backgroundPosition:bgPosX[0]+' '+bgPosY[0]});

menu.mouseover(function(){
$(this).animate({textIndent:textInd[1]+'px',backgroundPosition:bgPosX[1]+' '+bgPosY[1]},'fast');
});
menu.mouseleave(function(){
$(this).animate({textIndent:(textInd[0]-4)+'px',backgroundPosition:(bgPosX[0]-10)+' '+bgPosY[0]},'fast').animate({textIndent:textInd[0],backgroundPosition:bgPosX[0]+' '+bgPosY[0]},'fast')
});
})

Burada önce menu isminde bir değişken tanımlayıp değer olarak ‘#menu ul li a’ ayarlıyoruz. bgPosX arkaplan resminin yatay pozisyonunun ilk ve son değerlerini içeriyor. bgPosY ise arkaplan resminin dikey ilk ve son pozisyonlarını içeriyor. textInd ise linke yazdığımız metnin textIndent değerlerini içeriyor.

Başlangıç değerlerini atadıktan ilk css değerlerini atıyoruz. Sonra da mouseover ve mouseleave fonksiyonlarına olayları yazıyoruz. mouseleave olayında iki tane animate yazmamızın sebebi görselliği arttırmak için iki defa hareket oluşturmamız.

HTML dosyasında js dosyalarını çekmeyi de unutmayalım

<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="main.js" ></script>

<ul id="dropdown">
    <li><a href="#">anasayfa</a></li>
    <li>
        <a href="#">servisler</a>
        <ul>
            <li><a href="#">html</a></li>
            <li><a href="#">css</a></li>
            <li><a href="#">javascript</a></li>
        </ul>
    </li>
    <li><a href="#">iletişim</a></li>
</ul>

Şimdi de menünün doğru düzgün bir menü gibi görünmesi için biraz CSS yazalım:

ul {
margin:0;
padding:0;
list-style:none;
}
#dropdown {
margin:50px 0;
width:243px;
height:40px;
}
#dropdown li ul {display:none;}
#dropdown li {float:left;}
#dropdown li a{
width:80px;
height:40px;
display:block;
background-color:#aaa;
color:#000;
text-decoration:none;
font-size:18px;
text-align:center;
}
#dropdown li a:hover{
background-color:#ccc;
}
#dropdown li ul li {
float:none;
}
#dropdown li ul li a{
background-color:#f55;
}

Mennüyü renklendirdik şekillendirdik. Burada dikkat etmemiz gereken nokta #dropdown li ul { display:none} bölümü olacaktır. Çünkü bu kısım dropdown menünün ilk etapta  kapalı olmasını sağlayacaktır.

Son olarak da jQuery kısmını yazıyoruz.

$(document).ready(function(){
    $('#dropdown li a.menu').mouseover(function(){
        $('.gizli').slideDown('normal');
        $(this).parent().hover(function() {}, function(){
            $('.gizli').slideUp('normal');
        });
    });
});

Burada ikinci satırda menünün açılacağı linkin üzerine gelince slideDown() ile menüyü açıyoruz. Üçüncü satırda ise menünün dışına çıktığımızda yani parent elementinin hover olayı gerçekleştiğinde ise slideUp() ile menüyü kapatıyoruz. Bu örneğin demosunu şuradan görebilir, kaynak dosyalarını da buradan indirebilirsiniz.

jQuery bilinen en popüler Javascript kütüphanelerinden biridir. Javascripti daha zevkli bir hale getirdiğini rahatça söyleyebiliriz. jQuery öğrenmek isteyenler için burada ufak tefek örnekler yapacağız. Javascript kodlarını <script> taglarının arasına yazıyoruz.

<script type="text/javascript">
    //javascript kodları buraya
</script>

Önce jquery kütüphanesini şuradan indirip sayfamızda şu şekilde çağırıyoruz.

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

Ardından jquery kodlarını da $(document).ready fonksiyonu içine yazıyoruz.

$(document).ready(function(){
	//jquery
})

Önce seçiciler hakkında biraz temel bilgi sahibi olalım:

$(‘a’) ifadesi sayfa üzerindeki tüm linkleri yani <a> taglarını belirtir.
$(‘a.test’) ifadesi sınıfı test olan linkleri belirtir yani <a class=”test”> tagı
$(‘div’) ifadesi tüm divleri belirtir
$(‘#sayfa’) id değeri saya olan divi belirtir yani <div id=”sayfa”>
$(‘#sayfa a.test’) ifadesi de sayfa divinin içinde olan ve sınıfı test olan linki belirtir yani <div id=”sayfa”><a href=”#”>Test</a></div> ifadesindeki linki belirtir.

Html kodlarımız şu şekilde olsun:

<a href="#">Link 1</a>
<p>Linke tıklayınca bu yazı kaybolacak.</p

jquery scriptimiz de şöyle olsun:

$(document).ready(function(){
    $('a').click(function(){
        $('p.test').hide();
    })
});

$(‘a’).click() olayının içindeki fonksiyon, tıklandığında oluşacak olan olaydır. Biz burada <p> tagı olan bölümü hide() fonksiyonuyla gizliyoruz.

hide() yerine toggle() yazdığımızda ise linke tıkladıkça yazı gidip gelecek.
Eğer yazının bir animasyon şeklinde bu fonksiyonun içine ‘slow’, ‘normal’ veya ‘fast’ parametrelerini ekleriz.

$(‘p.test’).toggle(‘fast’)

Şeklinde yazarız.

Animasyonun aşağıdan yukarı olması için

$(‘p.test’).slideDown(); //veya
$(‘p.test’).slideUp(); //veya
$(‘p.test’).slideToggle()İ //kullanırız.

Animasyonun transparan bir şekilde başlayıp görünmesi için de

$(‘p.test’).fadeIn(); // ve
$(‘p.test’).fadeOut(); //kullanabiliriz.

Bu işlemleri linkin click() olayına yazmıştık. Eğer linkin üzerine fareyi getirdiğimizde bu olayların olmasını istiyorsak mouseover() fonksiyonunu kullanabilirz.

$('a').mouseover(function(){
    $('p.test').hide();
})

Fare üzerinden gittiğinde ise mouseout() fonksiyonu oluşur.

$(‘a’).mouseover(function(){
    $('p.test').html('fare linkin üzerinde');
}).mouseout(function(){
    $('p').html('fare linkin üzerinde değil.')
})

Burada kullandığımız html() fonksiyonu ile seçicinin içeriğini belirtiriz.
Mesela

$(‘a’).html(‘<a href=”#”>bu bir linktir</a>’)

Komutunu yazdığımızda sayfadaki tüm linklerin ‘<a href=”#”>bu bir linktir</a>’ olacaktır.

Bir de animate() fonksiyonunu kullanalım. animate() fonksiyonu içerisinde belirtilen parametrelere göre seçicide belirtilen süre içerisinde animasyon oluşturur. Eğer parametremiz ‘width’ ve değeri 200 ise seçicinin genişliğini bir süre zarfı içerisinde 200 yapar.

$(‘p’).animate({width:’200’},’slow’)

Animate fonksiyonu içerisine birden fazla parametre girebiliriz.

$(‘p’).animate({width:’200’,height:’150’},’slow’)

Kullanacağımız diğer bir fonksiyon ise css() fonksiyonun belirtilen seçicinin css’ini verdiğimiz parametreler olarak değiştirir. Şöyle kullanabiliriz:

$(‘a.kirmizi’).css({‘padding’:5,’backgroundColor’:’#f00’})

Bu komut ile kirmizi sınıfına sahip olan tüm linklerin padding değeri 5px olup arka plan rengi kırmızı olacaktır.

Bu uygulamayı yapmak için temel HTML/CSS ve Javascript bilginizin olması sizin için daha olur.
Kullanacağımız tooltipleri 2 şekilde yapacağız.

1. İçerik bir div olacak. İçerisine resim link gibi elemanlar eklenebilecek.
2. Tooltip’in içeriği linkin veya alt değeri olacak. Yani sadece metin olabilir.

Birinci Uygulama

Tooltip bir div bölmesi olacak ve bu bölmenin z-index değeri farklı olduğundan diğer elemanların üzerinde gibi duracak. Fakat bunun için position değerinin absolute olması lazım.
Önce HTML kısmını yapalım.

<span class="tooltip">
<a class="t1" href="#">link1</a>
<a class="t2" href="#">link2</a>
<a class="t3" href="#">link3</a>
<a class="t4" href="#">link4</a>
</span>
<div id="tooltip" class="a-t1">1</div>
<div id="tooltip" class="a-t2">2</div>
<div id="tooltip" class="a-t3">3</div>
<div id="tooltip" class="a-t4">4</div>

span içine aldığımız linklerin üzerine geldiğimizde kendisine bağlı div bölmesi görünecek. Her link ile div arasındaki bağlantıyı şöyle yaptık: Her linke ait div’in sınıfı “a-[linkin sınıf ismi]” şeklinde olacak. Yani sınıfı “t1” olan linke bağlı div’in sınıfı “a-t1” olacak.
Bölmeler için herhangi bir şey yazmadığımız için şuan tüm bölmeler görünüyor. Şimdi de css kodlarını yazalım:

#tooltip{
z-index:100;
position:absolute;
padding:5px;
-moz-border-radius:4px;
font-weight:bold;
display:none;
border:1px solid #76601D;
color:#635529;
background-color:#F7FB91;
}

Burdaki “-moz-border-radius” değeri köşelerin yuvarlanması için kullanılıyor. Fakat internet explorer’da çalışmıyor.
Bunları da yazdıktan sonra jQuery kısmına geçelim(jQuery’yi şuradan indirebilirsiniz.):

<script type="text/javascript">
$(document).ready(function(){
$("span.tooltip a").mouseover(function(e){
e = e || window.event;
xx = e.pageX-10;
yy = e.pageY+30;
$("div.a-"+$(this).attr("class")).css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseleave(function(){
$("div.a-"+$(this).attr("class")).fadeOut("fast");
});
});
</script>

2.satır: $(document).ready() fonskiyonunun içine yazdığımız jQuery kodları sayfa yüklendiği anda çalışır.
3.satır: <span class=”tooltip”> bölümünün içindeki herhangi bir linkin üzerine fareyi getirdiğimizde yani mouseover() olduğunda gerçekleşecek fonksiyon
4.satır: farenin koordinatlarını öğrenmek için “e” değerini tanımladır.
5.satır: xx değeri farenin x koordinatı
6.satır: yy değeri farenin y koordinatı. -10 ve +30 ile toplayarak linkin sol alt kısmında görünmesini sağlıyoruz.
7.satır: $(this).attr(“class”) fonksiyonun döndürdüğü değer üzerinde bulunduğumuz linkin sınıfıdır. “div.a-”+[link sınıfı]” şeklinde oluşturduğumuz div’lerin “top” ve “left” değerinin farenin koordinalatı olarak ayarlıyoruz. fadeIn() fonksiyonuyla gizli olan pencereyi geri getiriyoruz. Animasyon hızı olarak “slow“, “normal” veya “fast” değerlerini kullanabilirz.
8: Fareyi linkin üzerinde çektiğimiz zaman yani mouseout() olduğunda açılan pencerenin kapanması için gereken fonksiyonu yazıyoruz. mouseover() fonksiyonunun döndürdüğü değer jQuery olduğu için mouseover().mouseout() şeklinde kullanabiliyoruz. Ardarda istediğimiz kadar fonksiyon tanımlayabiliriz. Tabi döndürdükleri değer jQuery olmak şartıyla.
9: Pencereyi gizlemek için fadeOut() fonksiyonunu kullanıyoruz.

Şimdi yaptığımız uygulamayı görebiliriz.

css dosyasında bazı değişiklikler yaparak tooltip’in farklı renklerde görünmesini sağlayabiliriz.

Farklı renkler için css kodlarını şu şekilde değiştirebiliriz:

kırmızı:

border:1px solid #C40505;
color:#C40505;
background-color:#F5C4C4;

yeşil:

border:1px solid #0D5708;
color:#0D5708;
background-color:#C8FBC4;

veya transparan bir arkaplan yapabiliriz. Bunun için background-color değerine herhangi birşey yazmayıp şu kodu ekleriz:

background-image:url("trasparan.png")

İkinci Uygulama

Bir önceki kısımda her link için bir div oluşturmuştuk. Bu bölümde bunları oluşturmayacağız. jQuery ile bir div oluşturup bu div’in içeriğini de linkin alt değeri yapacağız. Eğer tooltip olarak sadece düz bir metin görüntülememiz gerekiyorsa bu yöntem daha uygun olur.

Bunun için css kodlarında herhangi bir değişiklik yapmamıza gerek yok. Fakat Html kısmını şu şekilde yapmamız lazım. tooltipi olacak linkin class’ını “tip” yapıyoruz ve bir “alt” değeri atıyoruz. Örnekle görelim:

<a class="tip" alt="herhangi bir metin" href="#">link1</a>

jQuery kısmını da şöyle yapıyoruz:

$(document).ready(function(){
$("body").append('<div id="tooltip"></div>');
$("a.tip").mouseover(function(e){
e = e || window.event;
xx = e.pageX-10;
yy = e.pageY+30;
$("#tooltip").html($(this).attr("alt"));
$("#tooltip").css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseout(function(){
$("#tooltip").fadeOut("fast");
});
});

2. satır: tooltipi göstereceğimiz div’i oluşturuyoruz. Bunu nereye oluşturduğumuz önemli değil. Çünkü koordinatları farenin koordinatları şeklinde değiştireceğiz.

3.satır: fare class’ı tip olan bir linkin üzerine geldiğinde oluşacak olaylar

7.satır: oluşturduğumuz div’in içeriğini linkin alt değeri yapıyoruz.

Geri kalan kısımlar aynı. Bu javascript kodlarını ayrı bir dosyaya koyup diğer projelerinizde de kullanabilirsiniz. Ama css kodlarını da dahil etmemiz lazım. Eğer bu kısmı da jQuery ile yapmak istersek  7. satırdan sonra şu kodları ekleyebiliriz:

$("#tooltip").css({
"z-index":1001,
"position":"absolute",
"padding":"5px",
"-moz-border-radius":"5px",
"border":"1px solid #0D5708",
"background-color":"#C8FBC4",
"color":"#0D5708",
"font-weight":"bold"
});

Bu kısmı da ekledikten sonra herhangi bir css dosyasına ihtiyacımız kalmadı. Sadece jQuery kodlarını kullanarak bir tooltip eklentisi yapmış olduk. jQuery kodlarının son hali şöyle oldu:

$(document).ready(function(){
$("body").append('<div id="tooltip"></div>');
$("a.tip").mouseover(function(e){
e = e || window.event;
xx = e.pageX;
yy = e.pageY+30;
$("#tooltip").html($(this).attr("alt"));
$("#tooltip").css({
"z-index":1001,
"position":"absolute",
"padding":"5px",
"-moz-border-radius":"5px",
"border":"1px solid #0D5708",
"background-color":"#C8FBC4",
"color":"#0D5708",
"font-weight":"bold"
});
$("#tooltip").css({"left":xx,"top":yy}).fadeIn("fast");
}).mouseout(function(){
$("#tooltip").fadeOut("fast");
});
});

Örnek uygulamayı şuradan ve şuradan görebilirsiniz.
Kaynak kodları da şuradan indirebilirsiniz.
Sadece bu kodlardan oluşan bir .js dosyasını sayfadan çağırarak basit bir tooltip yaptık. Zaman oldukça yeni yazılar da yayınlayacağım. Kolay gelsin.