Bu yazımızda, bir önceki dersimizde oluşturduğumuz scroll sisteminin menülerle nasıl kontrol edildiğini göreceğiz.
Tek sayfa (single page) website tasarımlarının genel mantığı bu şekildedir. Bu sistemi oluştururken çok çeşitli yöntemler kullanılabilir, ama işin özü, gelmesi istenen yerin pozisyonunun tespit edilip, gerçekleşen olay ile (Event: click, onmmouseover vb.) yeni pozisyonunun oluşturulmasıdır.
Bu yöntemlerde, DOM nesnelerin yükseklik ve pozisyon özelliklerinden yararlanılır (Yatay tek sayfa yapacaksanız da genişlik ve pozisyon), bu özellikleri, ayrı ayrı veya beraber kullanarak çeşitli sistemler yapmak mümkündür.
Dom Nesneleri Ölçü Fonksiyonları:
- .width(): //Nesnenin genişliğini öğrenip değiştirmeye yarar.
- .height(): //Nesnenin yüksekliğini öğrenip değiştirmeye yarar.
- .innerWidth(): //Nesnenin genişliğine padding eklenmiş değeri verir.
- .innerHeight(): //Nesnenin yüksekliğine padding eklenmiş değeri verir.
- .outerWidth(): //Nesnenin genişliğine padding ve border eklenmiş değeri verir.
- .outerHeight(): //Nesnenin yüksekliğine padding ve border eklenmiş değeri verir.
Dom Nesneleri Pozisyon Fonksiyonları:
- .offset(): //Nesnenin sol(left) ve üst(top) değerlerine göre koordinatları alınır ve değiştirilir
- .position(): //Nesnenin bir üst düzey nesnesine göre koordinatları alınır ve değiştirilir.
- .scrollTop(): //Dikey kaydırma çubuğunun üstten pozisyon değeri alınır veya değiştirilir.
- .scrollLeft(): //Yatay kaydırma çubuğunun soldan pozisyon değeri alınır veya değiştirilir.
Uygulama:
Sol taraftaki menü ile sayfayı kaydırabilirsiniz (Scroll), bu uygulama websitenin geneli için uygulandığında tek sayfa (single Page) tasarım gerçekleşmiş olur.
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:330px;
padding:5px;
clear:both;
}
#overflow_text{
position:relative;
overflow-y:hidden;
overflow-x:hidden;
width:360px;
height:300px;
float:left;
}
#menu_scroll{
float:left;
margin-right:20px;
}
HTML yapısı:
<div id="area_product">
<div id="menu_scroll">
<ul id="menu_link">
<li><a href="#menu_1">Menü-1</a></li>
<li><a href="#menu_2">Menü-2</a></li>
<li><a href="#menu_3">Menü-3</a></li>
<li><a href="#menu_4">Menü-4</a></li>
</ul>
</div>
<div id="overflow_text">
<p id="menu_1"><strong>MENU-1</strong> Buraya uzun bir yazı gelecek........</p>
<p id="menu_2"><strong>MENU-2</strong> Buraya uzun bir yazı gelecek........</p>
<p id="menu_3"><strong>MENU-3</strong> Buraya uzun bir yazı gelecek........</p>
<p id="menu_4"><strong>MENU-4</strong> Buraya uzun bir yazı gelecek........</p>
</div>
</div>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Menüdeki linkin tıklanmasıyla olay tetikleniyor
$("#menu_link li a").click(function(event){
//Menüdeki linkin çalışmasını engelliyoruz
event.preventDefault();
//Tıklanan menünün link değerini alıyoruz (#menu_1,#menu_2 vb.)
var link=($(this).attr("href")).slice(1);
//paragrafdaki id'nin pozisyon değerini alıyoruz
var link_pos=$("#"+link+"").position().top;
//Yazı alanın o durumdaki scrollTop değerini alıyoruz
var cur_pos= $('#overflow_text').scrollTop();
//Tıklanan menüye göre yapılması gerekn scrollTop değeri
var total_scroll=cur_pos+link_pos;
//Yazımızın içeriğini animasyonla kaydırıyoruz
$('#overflow_text').animate({scrollTop : total_scroll},'slow');
});
});
</script>
Açıklamalar:
- 5. Menüdeki linkin ("a") tıklanmasıyla fonksiyonumuz tetikleniyor.
- 8. "preventDefault()" ile menüdeki "çapa (anchor:#menu_1, #menu_2)" linkini devre dışı bırakıyoruz. Aslında bu durum bize şu avantajı sağlıyor: Bu link değeri ile yazı içindeki paragrafın "id" değerleri ilişkili, bu değer sayesinde, hangi paragrafa gideceğimizi belirlemiş oluyoruz. Ayrıca, sayfa javascript desteği olmayan bir tarayıcıda açıldığında, "preventDefault()" fonksiyonu da çalışmayacağı için, çapa (anchor) linki çalışır hale gelecektir, bu durumda, animasyonlu olmasa da, kullanıcı gitmek istediği yere gidebilecektir (Yüksekten düşüğe tasarım tekniği: Sitenin yüksek seviye tarayıcılara göre hazırlanıp, düşük tarayıcılara göre de revize edilme durumu).
- 11. Tıklanan linkteki "href" değerini (Ör: #menu_1") alıp, "slice()" fonksiyonuyla paragraftaki "id" değerini elde ediyoruz (Ör:menu_1),
- 14. Paragrafın, üstündeki katmana göre, üstten pozisyon değerini alıyoruz.
- 17. Yazının bulunduğu katmanın üstten kayma ("scrollTop") değerini alıyoruz (Bu değer ile, paragrafın üst değerinin toplamı, toplam kaydırılması gereken mesafeyi verecek),
- 20. Toplam kaydırılması gereken mesafeyi buluyoruz,
- 23. Yazının bulunduğu alanın "scrollTop" değerini, animasyonla birlikte "toplam kaydırma" mesafesi olarak belirliyoruz
Not:Yazı alanının css özelliklerinden "overflow"özellikleri "hidden" olduğu için yan taraftaki scroll düğmeleri görünmüyor, isterseniz o değerleri "auto" yaparak durumu daha iyi inceleyebilirsiniz.
Kolay gelsin, görüşmek üzere...
