Günümüz sitelerinde kullanışlı olmak çok önemli. Haliyle sitelerimiz, kullanıcıların tek parmağı ile kullanılabilir olması ve onların işlerini daha kolay ve pratik yapmasını sağlamak amacıyla geliştirilir.
Kullanıcının sayfalar arasında geçiş yaptığı menüler, kullanıcı sayfanın altlarına indiğinde üstte kalır ve kullanıcı o menüye ulaşmak için tekrar üste çıkmak zorunda kalır.
Bu sorunu çözmek için menümüzü bir yere sabitleriz ve bu şekilde kullanıcı sayfanın en sonuna inse bile menü gözünün önünde olur.
Bende bu konumda belli bir boyutta aşağıya inince fixed pozisyonuna geçen (Sabit konumlanan) menü yapımını anlatacağım.
Öncelikle JS Kodlarımız:
<script>
$(document).scroll(function () {
var y = $(document).scrollTop(),
menu = $("nav");
if (y >= 180) {
menu.addClass('fixed').slideDown('slow', 'easeOutBounce');
} else {
menu.removeClass('fixed');
}
});
</script> |
Yukarıdaki kod parçacığında var y şeklinde atanan değişken ile kullanıcının sayfanın ne kadar altına indiğini belirten değeri çeker.
Menu olarak atanan değişkenin içinde gördüğünüz gibi nav tagı bulunmakta. Yani benim örneğimde nav css sınıfını menu değişkenini içine attığımı gösterir. Ben nav adlı menümü sabitleyeceğim. Siz buradaki nav değerini kendi sabitlemek istediğiniz css sınıfını yazarak değiştirebilirsiniz.
if (y >= 180) sorgusu ile kullanıcının 180’den fazla aşağıya inip inmediğini kontrol eder ve buna göre işlemler yaparız. Eğer 180’den fazla aşağıya inmiş veya 180’e eşit ise menu değişkenine fixed sınıfını ekleyerek menümüzü sabitledik.
Eğer 180’den küçükse menümüzden fixed sınıfını sildik.
CSS Kodları:
.fixed{ position:fixed; } |
