Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Javascript / Javascript ile Scroll ile Küçülebilen Menü

Javascript 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.

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

Javascript 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.

[geo_alert style=”1″ color=”dark” ]

<nav class=”menubar”>

<ul>

<li><a href=”#”>Ana Sayfa</a></li>

<li><a href=”#”>Hakkında</a></li>

<li><a href=”#”>İletişim</a></li>

<li><a href=”#”>Reklam</a></li>

</ul>

</nav>

[/geo_alert]

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.

[geo_alert style=”1″ color=”dark” ]

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; }

[/geo_alert]

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.

[geo_alert style=”1″ color=”dark” ]

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; }

[/geo_alert]

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.

[geo_alert style=”1″ color=”dark” ]

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

[/geo_alert]

Ş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 :

[geo_alert style=”1″ color=”dark” ]

$(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);

[/geo_alert]

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 kodlamalar.

BENZER KONULAR

JavaScript ile Basit Bir Program
JavaScript ile Basit Bir Program DEVAMI
  • 12 Mayıs 2020 | 0 | 241
Javascript | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...