Fadein Fadeout Effectleri ile Jquery Menü

(Baş not: Jquery derslerimizi bir eğitim setine dökmek istiyorum sizin de önerileriniz var ise lütfen bize bildiriniz.)

Demo için Tıklayınız.

Download için Tıklayınız.

Daha önce kullanmış ve anlatmış olduğum fadein fadeout olaylarını kullanarak bir menü nasıl yapabiliriz onu inceleyelim.

1. HTML

Html dosyamız çok basit.Sadece Linklerimizi oluşturacağız.

kaynağı göster

yazdır ?

`1`	`<ul id="navMenu">`

`2`	`<li><a href="#"><b style="color: black; background-color: rgb(255, 153, 153);">Zingocan</b></a></li>`

`3`	`<li><a href="#">Test` `2</a></li>`

`4`	`<li><a href="#">Test` `3</a></li>`

`5`	`<li><a href="#">Test` `4</a></li>`

6

`7`	`<li><a href="#">Test` `5</a></li>`

`8`	`<li><a href="#">Test` `6</a></li>`

9 </ul>

2. CSS

CSS biraz karışık bu yüzden yorumlarınız detaylı inceleyeceğim.. Her soru ve sorunuza cevap verebiliriz.

kaynağı göster

yazdır ?

1 body {

`2`	`background:#222;`

3 }

4

`5`	`#navMenu {`

`6`	`margin:0;`

`7`	`padding:0;`

`8`	`list-style:none;`

`9`	`font-family:arial;`

`10`	`text-align:center;`

`11`	`line-height:60px;`

12 }

13

`14`	`#navMenu li {`

`15`	`float:left;`

16

`17`	`/* default background image */`

`18`	`background:url(default.jpg)` `no-repeat` `center` `center;`

19

`20`	`/* width and height of the menu item */`

`21`	`width:120px;`

`22`	`height:70px;`

23

`24`	`/* simulate pixel perfect using border */`

`25`	`border-left:1px` `solid` `#111;`

`26`	`border-right:1px` `solid` `#333;`

`27`	`border-top:1px` `solid` `#555;`

`28`	`border-bottom:1px` `solid` `#333;`

29

`30`	`/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */`

`31`	`position:relative;`

32 }

33

`34`	`#navMenu li a {`

`35`	`/* z-index must be higher than .hover class */`

`36`	`z-index:20;`

37

`38`	`/* display as block and set the height according to the height of the menu to make the whole LI clickable */`

`39`	`display:block;`

`40`	`height:70px;`

`41`	`position:relative;`

`42`	`color:#777;`

43 }

44

`45`	`#navMenu li .hover {`

`46`	`/* mouseover image */`

`47`	`background:url(over.jpg)` `no-repeat` `center` `center;`

48

`49`	`/* must be postion absolute */`

`50`	`position:absolute;`

51

`52`	`/* width, height, left and top to fill the whole LI item */`

`53`	`width:120px;`

`54`	`height:70px;`

55 left:0;

56 top:0;

57

`58`	`/* display under the Anchor tag */`

`59`	`z-index:0;`

60

`61`	`/* hide it by default */`

`62`	`display:none;`

63 }

64

`65`	`#navMenu li.selected {`

`66`	`/* selected image */`

`67`	`background:url(selected.jpg)` `no-repeat` `center` `center;`

68 }

69

70 </ul>

71 <pre>

3. Javascript

Jquery içerisine Fadein ve Fadeout olaylarını koyarak yalnızca bir fare ayarlaması yapacağız.. Kodlarda değişiklik yapabilirsiniz yalnız fazla kurcaladığınızda gerçekten bazı durumları değiştirmenin zor olduğunu göreceksiniz..


kaynağı göster


yazdır?






1
[/css]








2









3
$(document).ready(function () {








4









5
//Append a div with hover class to all the LI








6
$(' navMenu li').append('<div><\/div>');








7









8
$(' navMenu li').hover(








9









10
//Mouseover, <b style="color: black; background-color: rgb(255, 255, 102);">fadeIn</b> the hidden hover class








11
function() {








12









13
$(this).children('div').<b style="color: black; background-color: rgb(255, 255, 102);">fadeIn</b>('1000');








14









15
},








16









17
//Mouseout, <b style="color: black; background-color: rgb(160, 255, 255);">fadeOut</b> the hover class








18
function() {








19









20
$(this).children('div').<b style="color: black; background-color: rgb(160, 255, 255);">fadeOut</b>('1000');








21









22
}).click (function () {








23









24
//Add selected class if user clicked on it








25
$(this).addClass('selected');








26









27
});








28









29
});








30
</div>








31
<pre>

Demo için Tıklayınız.

Download için Tıklayınız.

Sonuç

Lütfen Bir sorun yaşarsanız bunu bana yorum olarak bildiriniz. Eğer yapmaya çalıştığınız bilgisayarda tarayıcınız jquery ve javascripti desteklemiyor yada az destekliyorsa istyediğiniz verimi elde edemezsiniz. Ben henüz IE6 da denemedim fakat tam verim elde edileceğiniz sanmıyorum.. sonuç olarak basit bir kaç kod ile devasa siteler nasıl göz doldurur bunu öğrenmiş olduk.. Yorumlarınız için şimdiden teşekkür ediyorum