Sağa Sola Kayan Menü (Jquery ile)

Jquery fonksiyonları kullanılarak kendiliğinden sağa ve sola kayan bir menü örneğini bu yazıda bulabilirsiniz. Menü hazırlanırken jquery kütüphanesinin setInterval metodundan yararlanılmıştır. Jquery kütüphanesinin sağladığı özellikleri kullanarak ana div elemanının scrollLeft özelliğine değer ataması yapılarak kayma hareketi sağlanmıştır. Jquery’nin sağladığı animate fonksiyonu sayesinde div elementinin scroll özelliğine atama yapılabilmektedir. Bu sayede div üzerinde herhangi bir scroll kullanılmadan içerik sanki scroll varmış gibi kaydırılarak görüntülenebilir.

Örneğimizde sabit genişlikli bid div elementimiz var. Bu div elementinin içinde de dıştaki div elementine göre daha fazla bir alan kaplayan içeriğin bulunduğu div elementi mevcut. Dıştaki div elementinin genişliği sınırlı olduğundan ilk olarak içeriklerin yalınıca bir kısmı görüntülenecektir. Script fonksiyonları kullanılarak dıştaki div elementinin scrollLeft özelliği değiştirilerek görüntüleneck içeriklerin sırayla görüntülenen alana gelmesi sağlanabilir.

Önce sağa veya sola kaydırma işlemini kontrol eden fonksiyonumuzu inceleyelim. Bu fonksiyon belirli zaman aralığında çalıştırılarak içeriğin hareketi sağlanmaktadır.

 

function kaydir() {
var icerikgenislik = $(“#icerik”).width();

var alanGenislik = $(“#alan”).width();

if (HareketSolaMi == false) {

solKaydir();
// deger = $(“#alan”).scrollLeft();
if (deger + alanGenislik >= icerikgenislik) {
HareketSolaMi = true;
}
}
else {

sagKaydir();
deger = $(“#alan”).scrollLeft();
if (deger <= 0) {
HareketSolaMi = false;
}

}
}

Fonksiyonda kullanılan solKaydir ve sagKaydir fonksiyonları ana div elementinin scrollLeft özelliğinin değiştirilmesini sağlayan fonksiyonlardır. ScrollLeft özelliği arttırıldığında ve azaltıldığında sağa ve sola kayma hareketi sağlanmaktadır. Fonksiyonda  kullanılan HareketSolaMi isimli değişken her scrollLeft değişikliğinden sonra içeriğin sonuna gelinmiş olması durumunda true veya false olarak değiştirilmektedir. Bu değişkenin durumuna göre kayma hareketi sağa veya sola olacak şekilde ayarlanmaktadır. Her kaydırma işlemi 1 piksel olacak şekilde ayarlanmıştır. Her kaydırma işleminden sonra değer isimli değişkene yeni scrollLeft değeri atanmakta ve bir sonraki kaydırma işlemi için değer isimli değişken kullanılmaktadır. değer, alanGenislik, icerikGenislik isimli değişkenler global değişken olarak fonksiyonlardan önce tanımlanmıştır.

Sağa ve sola hareketi sağlayan fonksiyonlarımız aşağıdaki gibidir.
function solKaydir() {
var scrollSol = $(“#alan”).scrollLeft() + kaydirma_miktari;
$(“#alan”).animate({
scrollLeft: scrollSol//”+=” + kaydirma_miktari
}, KaydirmaSuresi);
deger = scrollSol;
}
function sagKaydir() {
var scrollSol = $(“#alan”).scrollLeft() – kaydirma_miktari;
$(“#alan”).animate({
scrollLeft: scrollSol//”-=” + kaydirma_miktari
}, KaydirmaSuresi);
deger = scrollSol;
}

Fonksiyonlarda görüldüğü üzere jquery kütüphanisinin animate fonksiyonu kullanılarak div elementinin scrollLeft özelliği değiştirilmekte ve bu sayede hareketli görünüm sağlanmaktadır. Animate fonksiyonuna verilen ikinici parametre bu ekleme işleminin süresini mili saniye cinsinden belirtmektedir. Merak edenler animate fonksiyonunu kullanımını içeren örnekleri inceleyebilir.

Eğer istenirse alan isimli div elementinin sağına ve soluna ok simgeleri yerleştirilerek bu oklara tıklandığında sağa ve sola hareket sağlanabilir. Böyle bir işlem için aşağıdaki fonksiyonlar kullanılabilir.

function sagOk() {
var scrollSol = $(“#alan”).scrollLeft() + 50;
$(“#alan”).animate({
scrollLeft: scrollSol//”+=” + 40
}, 100);
deger = scrollSol;
HareketSolaMi = false;
}

function solOk() {
var scrollSol = $(“#alan”).scrollLeft() – 50;
$(“#alan”).animate({
scrollLeft: scrollSol//”-=”- 40
}, 100);
deger = scrollSol;
HareketSolaMi = true;
}

 

Yukarıdaki fonksiyonların ilgili oklara tıklandığında çalışabilmesi için script yüklendiğinde ilgili ok simgelerinin tıklama olayına bu fonksiyonlar abone olmalıdır. Script ilk yüklendiğinde belli zaman aralıklarıyla kaydırma fonksiyonun çalıştırılması ve okların tıklama olaylarına atama yapılması için aşağıdaki gibi bir yapı kullanılabilir. Burada kullanılan global değişkenlerin de tanımlanmış olduğunu görebilirsiniz.

 

var DegismeSuresi = 100, KaydirmaSuresi = 30, kaydirma_miktari = 1, deger = 0;

var HareketSolaMi = false;
$(function () {
setInterval(kaydir, DegismeSuresi);

$(“#sagOk”).on(“click”, function () {
sagOk();
});
$(“#solOk”).on(“click”, function () {
solOk();
});
});

 

Tüm Script Fonksiyonların Bir Arada Olduğu Js Dosyası

Tüm bu çalışmalrın bir js dosyasına kaydedilmiş hali ise aşağıda görülmektedir.

/// <reference path=”jquery-1.11.1.min.js” />

var DegismeSuresi = 100, KaydirmaSuresi = 30, kaydirma_miktari = 1, deger = 0;

var HareketSolaMi = false;
$(function () {
setInterval(kaydir, DegismeSuresi);

$(“#sagOk”).on(“click”, function () {
sagOk();
});
$(“#solOk”).on(“click”, function () {
solOk();
});
});
function kaydir() {
var icerikgenislik = $(“#icerik”).width();

var alanGenislik = $(“#alan”).width();

if (HareketSolaMi == false) {

solKaydir();
// deger = $(“#alan”).scrollLeft();
if (deger + alanGenislik >= icerikgenislik) {
HareketSolaMi = true;
}
}
else {

sagKaydir();
deger = $(“#alan”).scrollLeft();
if (deger <= 0) {
HareketSolaMi = false;
}

}
}
function solKaydir() {
var scrollSol = $(“#alan”).scrollLeft() + kaydirma_miktari;
$(“#alan”).animate({
scrollLeft: scrollSol//”+=” + kaydirma_miktari
}, KaydirmaSuresi);
deger = scrollSol;
}
function sagKaydir() {
var scrollSol = $(“#alan”).scrollLeft() – kaydirma_miktari;
$(“#alan”).animate({
scrollLeft: scrollSol//”-=” + kaydirma_miktari
}, KaydirmaSuresi);
deger = scrollSol;
}

function sagOk() {
var scrollSol = $(“#alan”).scrollLeft() + 50;
$(“#alan”).animate({
scrollLeft: scrollSol//”+=” + 40
}, 100);
deger = scrollSol;
HareketSolaMi = false;
}

function solOk() {
var scrollSol = $(“#alan”).scrollLeft() – 50;
$(“#alan”).animate({
scrollLeft: scrollSol//”-=”- 40
}, 100);
deger = scrollSol;
HareketSolaMi = true;
}

Html İçerik

Sayfamıza ait html içeriği de aşağıda bulabilirsiniz. Html içerikte görüldüğü üzere kullandığımız div elementlerine bir takım css atamaları yapılmıştır. Ana div içeriğinin kısıtlanması ve daha geniş bir alana sahip olmasına rağmen içerik divinin tümünün görünmemesi sadece ana divin müsade ettiği kadarının görüntülenmesi bu sayede sağlanmıştır.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”SagaSolaKayanIcerik.aspx.cs” Inherits=”JqueryOrnekler.SagaSolaKayanIcerik” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<%– <script src=”http://mehmetduran.com/media/js/jquery-1.2.6.pack.js” type=”text/javascript”></script>–%> <script src=”jquery-1.11.1.min.js”></script>

<script src=”kayanMenu.js”></script>
<style type=”text/css”>
#alan
{
float:left;
width:900px;
border:solid 1px #147;
background:#eee;
overflow:hidden; /*önemli nokta*/
}
#icerik
{
float:left;
color:#000;
font:24pt tahoma;
text-align:left;
white-space:nowrap; /*önemli nokta*/
}
</style>

<script type=”text/javascript”>
</script>

</head>
<body>
<form id=”form1″ runat=”server”>
<div style=”float:left”>
<img id=”solOk” src=”imge/indir.jpg” width=”50″ />
</div>

<div id=”alan”>
<div id=”icerik”>
<a href=”www.bilecik.edu.tr”>izmir</a>
<a href=”www.bilecik.edu.tr”>trabzon</a>
<a href=”www.bilecik.edu.tr”>rize</a>
<a href=”www.bilecik.edu.tr”>hakkari</a>
<a href=”www.bilecik.edu.tr”>van</a>
<a href=”www.bilecik.edu.tr”>antalya</a>
<a href=”www.bilecik.edu.tr”>edirne</a>
<a href=”www.bilecik.edu.tr”>samsun</a>
<a href=”www.bilecik.edu.tr”>ağrı</a>
<a href=”www.bilecik.edu.tr”>aydın</a>
<a href=”www.bilecik.edu.tr”>adıyaman</a>
</div>

</div>
<div style=”float:left”>
<img id=”sagOk” src=”imge/indir.jpg” width=”50″ />
</div>

</form>
</body>
</html>