Linklere tıklayınca aşağı kaysın

0
793
Görüntülenme

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 : 

 JavaScript : 

  •  Body etiketleri arasına eklemeniz gereken bölümler.

Menü kodu : 

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 : 

 

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4,00 out of 5)
Loading...
Önceki İçerikHtml5 video etiketi
Sonraki İçerikDrupal içerik yönetim sistemi
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.