Genelde kişisel portfolyo siteleri tarafından ziyaretçilerin sitede gezinmelerini daha kolay hale getirmeye yarayan bir özelliktir. Web sitenin herhangi bir yerinde sabitlediğiniz butonlara tıklandığında alakalı olan bölüme sayfanın kaymasını sağlayan eklentilerle yapılır. Buna benzer internette birçok web tasarımı mevcut. Kimileri butonlara basıldığında ekranıı kaydırır kimileri de behsettiğim örnekte olduğu gibi web sitedeki bölümler arasında gezinmeye yarayan listeler oluşturur. Web site içinde gezinmeyi kolaylaştırmak için yapılmış bir kaç tane jQuery eklentisi bulunuyor.
Anchor.js :
Demo örneğine baktığınızda normal bir slide resim galeriden farklı görünmüyor. Sayfada tam ekran görülen resim ve sol tarafta da bu resimlerin daha küçüğü ile hazırlanmış bir resim listesi bulunuyor. Kullanımı oldukça kolaydır. Öncelikle tıklandığında ekranın kaymasını sağlayacak linke href=”#bolum1” class=”anchorLink” kodunu eklemeniz gerekiyor. Daha sonra bu linke, butona veya resme basınca sayfanın duracağı bölümü seçmeniz gerek. <div id=”bolum1“></div> olarak ayarladığınızda bölüm1 linkine tıklarsanız eğer ekran id bolum1 çerçevesine doğru kayacaktır. Bu şekilde çoğaltabildiğiniz kadar atlanacak bölümleri çoğaltabilirsiniz.
scrollyNav :
Kullanım amacı Anchor.js uygulamasının aynısı olup farklı bir geliştirici tarafından hazırlanmış olan bir örnektir. Kategori linklerine tıkladığınızda aynı şekilde siteyi aşağı ve yukarı doğru kaydırma özelliği olduğu gibi scroll (kaydırma çubuğu) ile sayfa aşağı yada yukarı kaydırıldığında da menü linkleri üzerinde değişiklikler olur. Bu sayede kullanıcı hangi bölüme geldiğini menüden görebiliyor. Demo sayfasında sayfa aşağı kaydırıldığında sol tarafta sabit duran menü örneğindeki linkler de alakalı olan bölüme gelindiğinde büyüyorlar. Bu örnek için herhangi bir resim eklemem mantıksız olacağı için örnek görüntüsünü paylaşmadım. Sonuçta kendi sitenize göre bir tasarım hazırlamanız gerekiyor. Ayrıca resimde ne olduğu da pek anlaşılmıyor doğrusu.
Toc :
Çalışma şekli scrollyNav ile aynı özelliklere sahip bir başka örnek. Linklere basınca sayfayı kaydıran bir jQuery eklentisidir buda. Sol tarafta bulunan linklere tıkladığınızda sayfada kayma işlemi gerçekleşiyor ve scroll ile kaydırıldığında da aynı şekilde ilişkili olan linkin arkaplanı değişerek sayfada hangi bölümde olduğunuzu gösteriyor.
daGama :
Bu konuda sizlere paylaşacağım son eklenti olan daGama da tek sayfalık tasarımlar içinde ziyaretçilerinizin kolay gezinmelerini sağlayan bir uygulama. Şimdiye kadar bahsettiğim örnekler genel olarak sol tarafa eklenmiş demolara sahipti. daGama eklentisindeki demo örneğinde ise üst menü olarak tasarlanmış bir demo sayfası bulunuyor. Bütün uygulamalar ile ister yan ister yatay olarak kullanabilirsiniz. Yine aynı şekilde bu örnekte de menüde geldiğiniz bölümü gösterme özelliği bulunuyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/daGama.js"></script>
JavaScript :
<script>
$(document).ready(function(){
$('nav').daGama({
menuHeight: 59
});
});
</script>
- Body etiketleri arasına eklemeniz gereken bölümler.
Menü kodu :
<nav>
<ul>
<li>
<a href="#slayt1">Menu 1</a>
</li>
<li>
<a href="#slayt2">Menu 2</a>
</li>
<li>
<a href="#slayt3">Menu 3</a>
</li>
</ul>
</nav>
Linklere tıklandığında sayfanın kayacağı alanı bulabilmesi için slayt1, slayt2 ve slayt3 olarak sınıflandırdım. Kendinize göre farklı sınıflandırmalar yapabilirsiniz ve dilediğiniz kadar çoğaltabilirsiniz bu seçenekleri. Doğru bir kayma işlemi için menü içindeki sınıflandırmayı ve section elementindeki sınıflandırmaları doğru eklemeniz gerekiyor. Yoksa her link farklı bir bölümü gösterecektir.
Slayt bölümler :
<section id="slayt1">
Slayt1 içeriği buraya
</section>
<section id="slayt">
Slayt2 içeriği buraya
</section>
<section id="slayt">
Slayt3 içeriği buraya
</section>