CSS ve JQuery ile hareketli navigasyon menü

28 Şub 2010 tarihinde eklendi. Blog | 4 yorum

CSS ve JQuery ile hareketli navigasyon menü

Apple’ın kurumsal kimliği dahilindeki grafik tasarım stili her zaman hoşuma gitmiştir. Bu stili web sitelerinde kullanmak isteyen tasarımcılar için tympanus.net, CSS ve Jquery ile hazırlanmış çok güzel bir navigasyon menü dersi yayınlamış. Menü ilk bakışta gerçekten de Apple stiline çok benziyor. Ancak butonların üstüne gelindiğinde kayarak ortaya çıkan ikonlar, menüyü Apple stilinden bir adım öteye taşıyıp kendine özgü göz alıcı bir fark yaratıyor. Fare imlecini butonun üstünden çektiğimizde ikonlar tekrar kayarak kayboluyor. Diğer yandan ikonların butonların üstünden gelip, altına gitmesi bir anlamda “oyun kartı karıştırma” efektini andırıyor.

Menüde kullanılan ikonlar Dyricons.com‘da lisanslı olarak bulunduğundan burada paylaşmak istemedim. Ancak yine aynı sitede bulunan ücretsiz ikon setlerinden faydalanabilir ya da kendi arşivinizden istediğiniz ikonu kullanabilirsiniz.


Şimdi gelelim menünün hazırlanışına…

HTML
Html yapısı sırasız olarak dizilmiş liste elementlerinden ve bunların içine link ve ikonlar için yerleştirilmiş span elementlerinden oluşuyor.
CSS
CSS Stili sırasız olup aşağıdaki gibidir.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<span style="color: #252525;">.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(../images/bgMenu.png) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(../icons/ipod.png);
left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
background-image:url(../icons/video_camera.png);
left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
background-image:url(../icons/television.png);
left:293px;
}
ul.menu li span.monitor{
background-image:url(../icons/monitor.png);
left:423px;
}
ul.menu li span.toolbox{
background-image:url(../icons/toolbox.png);
left:553px;
}
ul.menu li span.telephone{
background-image:url(../icons/telephone.png);
left:683px;
}
ul.menu li span.print{
background-image:url(../icons/print.png);
left:813px;
}
</span>

JAVASCRIPT
İlk önce ikonların kaybolma efekti oluşturuluyor, daha sonra üstüne gelince ortaya çıkması için li elementleri tanımlanıyor.

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
26
27
28
29
30
<span style="color: #252525;">$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu &gt; li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({
'top':'40px'
},300).css({
'zIndex':'10'
});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({
'top':'-17px'
},800).css({
'zIndex':'-1'
});
}
);
});
</span>

Hepsi bu kadar!

Menü Ön İzleme

Menüyü İndir

Jquery 1.3.2.js’i ve html sayfasına eklenmesi gereken diğer satırları menüyü indirerek görebilirsiniz.

Benzer Yazılar:

  • http://www.yuisblog.com.tr İsmail Tapçan

    Menü harıkaymıs
    indirdik sağolun tesekkur ederz
    Ellerinize sağlık

  • samet agac

    lınk kırık arkadasım :(

  • Ozd

    Linki düzelttim. “Menüyü indir” linkini tıklayınca açılan sayfadan Download butonu ile indirebilirsiniz.

  • http://www.vrfklimalar.com/ vrf klima

    Harika çok beğendim teşekkür ederim