jQuery ile Scroll ile Küçülebilen Menü

Günümüz sticky menü trendinin bir diğer örneği de ekran aşağı kaydırıldıkça stil değiştirerek ekranda sabit kalan menü örnekleri. Bu menü tipleri küçülen yapısıyla da ekranda daha az yer kaplamakta, bu da içerikleriniz için daha fazla alan demek oluyor.

Bugün sizlerle birlikte ekran aşağı kaydırıldığında küçülen bir menü örneği hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

jQuery ile küçülebilen menü nasıl yapılır?

jQuery tarafında yapmamız gereken iki şey var. Birincisi scroll aşağı kaydırıldığında bunu tespit edip scrolled classını yapıya eklemek. İkincisi de dinamik olarak menünün yüksekliğini ölçüp body elemanını yukarıdan ittirerek (padding-top ile) içeriğin menü altında kalmasını engellemek.

İşin CSS tarafında da birkaç güzel renk, hover ve geçiş efekti işimizi kurtarır.

HTML kodlarımızda menubar classı ile oluşturacağımız bir nav ve onun içerisindeki ul yapısından ibaret olacak.

Hazırsanız başlayalım.

---

HTML Kodları

Sıradan bir nav oluşturalım ve ona menubar classını ekleyelim.

<nav class="menubar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

---

CSS Kodları

İlk olarak menüyü tasarlayalım. Menüye fixed pozisyonlama verdiktan sonra da ease-in-out bir transition ekleyelim. Fixed bir öğe block yapıda bile olsa table gibi çalışır ve tüm ekranı kaplayacak genişliğe ulaşmaz. Dolayısıyla top ve left’i sıfıra çektikten sonra da width tanımını 100% olarak belirliyoruz. Burada left:0 ve right:0 kullansak da sorunsuz çalışırdı. Ama crossbrowser kod yazmaksa eğer derdiğimiz, width ekleyerek tasarımı garantiye almalıyız.

Aşağıda menünün orjinal tasarımını yapıyoruz. Gri renkte bir barın üzerinde koyu renkte yazı, yazıların üzerine gelindiğinde de beliren 2 piksellik bir border bu kodları yazdığımızda hazır oluyor.

nav.menubar{
  padding:5px;
  background-color:#E7EBEC;
  font-size:22px;
  position: fixed;
  top:0;left:0;
  width: 100%;
  transition: all .3s ease-in-out;
}

nav.menubar ul{
  text-align:center;
  letter-spacing:.1px;
}

nav.menubar ul li{
  display:inline;
  padding:0 10px;
}

nav.menubar ul li a{
  color:#4e4e4e;
  text-decoration:none;
}

nav.menubar ul li a:hover{
  border-bottom:2px solid #4e4e4e;
}

Sırada ekranın aşağı kaymasında menünün alacağı stili tasarlamak var. Arkaplan rengimiz daha koyu oluyor, dolayısıyla daha açık bir yazı rengine ihtiyacımız var. Ayrıca okunulabilirliği ve içerik alanını arttırmak için barı biraz daha inceltebilir, yazıları da küçültebiliriz.

nav.menubar.scrolled{
  padding:0 5px;
  background-color:#e91e63;
  font-size:16px;
}

nav.menubar.scrolled ul li a{
  color:white;
}

nav.menubar.scrolled ul li a:hover{
  border-bottom:2px solid white;
}

---

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi yapmamız gereken web sitesinin kaydırma çubuğu ufakta olsa aşağı kaydırıldığında bunu yakalamak. Bu işlem gayet basit. Scrolltop eğer sıfırdan yüksek bir değere çıktıysa anlıyoruz ki kullanıcı kaydırma çubuğunu aşağıya kaydırdı. Bu durumda scrolled classını menümüze ekleyelim.

Bunun dışında da içeriğimizin menünün yüksekliği altında ezilmemesi için body’e dinamik olarak padding-top ekleyeceğiz. Dolayısıyla kodlarımız şu şekilde oluyor :

$(document).on('scroll', function() {
  if ($(document).scrollTop() > 0) {
    $('nav.menubar').addClass('scrolled');
  } else {
    $('nav.menubar').removeClass('scrolled');
  }
});

$('body').css('padding-top',$('nav.menubar').height()+10);

---

Kapanış

Gayet basit ve şık bu tasarımda jQuery tarafında kaydırma çubuğu gözetlemesi, CSS tarafında etkin class ve alt birimlerini kullanarak yapılabilecek sonsuz varyasyonun konu edilmesi ve HTML5 nav iskelet yapısı gibi konuları ele aldık.

İyi çalışmalar.