jQuery & CSS Horizontal Scrol Menu Dersi

İki gündür siteye ders ekleyemiyordum bugün 2. dersimizi yapalım.. Biraz hasta olduğum için bu dersin video anlatımı olmayacak.

İnternet arşivinde milyonlarca flash menüye rastlayabilirsiniz fakat , ne içeriğiniz google tarafından indexlenir ne de linkiniz içeriğe dahil edilir.. Bu yüzden Flash’ın pabucunu dama atan jQuery menüler, animasyonlar hatta tamamen jquery kullanılmış scriptler mevcut.Bunlardan jquery horizontal Scrol Menü nasıl yapılır bunu anlatacağım.

[code lang="css"]
div.sc_menu {
/* offsetLeft olarak ayarlıyoruz */
position: relative;
height: 145px;
width: 500px;
/*Scrol Bar ekliyoruz */
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* Javascripti olmayan kullanıcılar için max genişlik */
width: 1500px;
padding: 15px 0 0 15px;
/* varsayılan margini siliyoruz */
margin: 0;
background: url('navigation.png');
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* sonraki satırda görüntülemek için bir başlık istiyoruz */
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
[/code]

width ve overflow özelliklerini katmanı (div) kaplayan bir scrol bar oluşturabilmek için kullandık.Ve diğer derslerimizde kullandığımız position değerindense offset kullanmamız jquery’nin çalışmasını kolaylaştıracaktır.Unutmayın ki, offset daima yerleşimi sabit ( çerçeve içerisindeki) nesnelerde , serbest nesnelerde ise position kullanılır. Ne demek istediğimi şu linke tıklayarak anlayabilirsiniz.

Hover Efekti ve Kenarlıklar

display: none özelliği ile resimlerin altlarına koyduğumuz açıklamalarımızı kapatacaktır.Daha sonra koyacağımız hover efekti ile açıklamaları ilk başta kaybederek, mouse ile hangi resmin üzerine gelirsek o resmin açıklaması altta belirecektir.

“-webkit-border-radius” ve “-moz-border-radius” özellikleri ise resimlerin etrafına yuvarlanmış çerçeveler eklememizi sağlacayaktır.Firefox, Safari ve Chrome Browserlarında bu özelliklik rahatlıkla kullanılabilirken , İnternet explorerda bu özellik işlememektedir.

[code lang="css"]
.sc_menu span {
display: none;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
[/code]

Şuraya tıklarsanız jQuery Kullanmadan oluşturduğumuz son hali görebilirsiniz.

jQuery

İlk olarak video derslerimizde de olduğu gibi jQuery çalıştırabilmek için sayfamızın <head> etiketleri arasına jquery yolunu belirtmemiz gerekiyor

[php]
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
[/php]

Video derslerini izlemeyen arkadaşlar için anlatacak olursam, her jquery kodlarına başlamadan önce jquery kodlarımıza fonksiyon atayabilmek için ilk fonksiyon kodu gereklidir.

[code lang="js"]
$(function(){
// Kodlar buraya yazılacak
});
[/code]

“mousemove” metodu ile mouse ile içeriğin üzerine gelindiğinde bir kayma oluşmasını sağlayacağız.

“ul.width()” koduyla menünün içerisindeki resimleri eski pozisyonuna geri getiremiyoruz, çünkü CSS de bütün resimleri 1. satırda gösterdik ve bunların hespi sırasız haldedir. Hepsi için ayrı bir şema katmadık.Mouse pozisyonu ile değişen resim pozisyonlarını tekrar aynı yere götürebilmek için bir kaç satır daha kod girmemiz gerekiyor.

“lastLi[0]” kodu jQuery kütüphanesinde “offsetLeft” döngüsü ile yeni elemanı eski yerine çağırarak mouse pozisyonu ile animasyonun devam etmesini sağlayacaktır.

En altta belirttiğim “pageX” metodu ise sayfanın x yönünde (yatay) hareketlendirmeyi sağlar..Daha sonrasındaki “(ulWidth-divWidth) / divWidth özelliği de mouse pozisyonu ile hareketin başlaması esnasını hızlı bir şekilde oluşmasını ve mouse ile seçilen yere hemen gitmesini sağladı.

işte Javascript Kodları:

[code lang="js"]
$(function(){
//Resimlerin hızlı bir şekilde boyutlanıp menü içerisinde girmesini sağlar
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;

//Menüyle birlikte
var divWidth = div.width();

//Scrolbar silinir.
div.css({overflow: 'hidden'});

//Son resimdeki konteynırı bulur
var lastLi = ul.find('li:last-child');

//Mouse ile üzerine gelindiğinde
div.mousemove(function(e){

//Mouse altında o resim belirsin
//Bu zamanı belirlemek için aşağıdaki kod
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
[/code]

Son olarak Sayfamızın son görünümü…