Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML)

Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML)

Bu yazımızda css, jQuery, html yardımıyla haraketli sabit menü yapmını anlatacağım. Sabit duran menüler genellikle en üstte durur, bu menü’nün mantığı aslında çok basittir ufak bir css kodu ile menü’yü sabitleyebiliriz. Ancak bu mantık her menü için uygun değildir. Bu mantık sadece site menü’lerinin en üstte durduğu zaman işler.

Bu yazı ile birlikte menü’nüzü logo altına veya başka birşeyin altına koyup aşağı inerken menü’yü en üste sabitleyeceğiz.

Demo’yu görmek için tıklayın.

O halde yapıma başlayalım.

 jQuery Kütüphanesi

Bu menü’yü yapabilmemiz için bir jQuery kütüphanesine ihtiyacımız var. Aşağıda ki linklerden jquery kütüphanesini indirebilir veya o sitelerden kullanabilirsiniz.

Google CDN, Miscrosoft CDN , jQuery CDN.

Aşağıda ki kodları <head> tagı arasına ekleyin. Aşağıda ki kod ile jquery kütüphanesini sitemize çağırmış oluyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

HTML

Aşağıda ki kodlar menü’müzün html kodlarıdır bu kodları menü’yü nerede kullanmak istiyorsanız  oraya ekleyin.

<div class="nav-container">
<div class="nav">
<ul>
	<li><a>Home</a></li>
	<li><a>CSS</a></li>
	<li><a>PHP</a></li>
	<li><a>SEO</a></li>
	<li><a>jQuery</a></li>
	<li><a>Wordpress</a></li>
	<li><a>Services</a></li>
</ul>
<div class="clear"></div>
 /*clear floating div*/</div>
</div>

CSS

Aşağıda ki kodlar ile menümüzün css kodlarını ekleyeceğiz. Bu kodları sitenizin style.css dosyasına ekleyin.

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;}
    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.nav { height: 42px;}
    .nav ul { list-style: none; }
    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
    .nav ul li:first-child{ padding-left: 0;}
    .nav ul li a { }
    .nav ul li a:hover{ text-decoration: underline;} 

Javascript

Aşağıda ki kodları temanızın <head> tagı arasına ekleyin.

 jQuery("document").ready(function($){

    var nav = $('.nav-container');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });

}); 

NAV Arkaplan

Demo daki arkaplanı kullanmak istiyorsanız aşağıdaki resmi indirip images dosyasına atın.

nav bg Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML)

Aramalar:

  • jquery kayan yazı
  • css kayan menü
  • css sayfayı aşağı indirince menüyü sabitleme
  • hareketli logo yapımı
  • hareketli menü yapımı
  • jquery ile scroll indikçe büyüyen header yapımı
  • kayarak sabitlenen navigation menü
  • sayfayla birlikte kayan menü
YAPILAN YORUMLAR
  • samet diyor ki:

    emegine sağlık kaç gündür bunu arıyordum çok yardımın dokundu sağolasın

  • Mahmut Yaşar diyor ki:

    Hay Allah razı olsun çok işimi gördü ya.

  • selçuk şenol diyor ki:

    örnek çok güzel ancak menü tepeye tam dokunduğu anda altındaki nesne atlama yapıyor. bunu düzeltmenin bir yolu var mıdır?

  • yunus emre çolak diyor ki:

    çok teşekkür ederim hocam allah razı olsun yaa mutluluk göz yaşları döküyorum resmen 😀

  • Nevşehir balık restaurant diyor ki:

    teşekkür ederiz çok yararlı oldu

  • Fatih diyor ki:

    hocam yalnız javascript kodunda veya kodlarda uyumsuzluk var bende hatalı gösteriyor, javascript kodunu head tagları arasıan ekledim fakat direk kodlar bariz olarak sitede belli ediyor kendini

  • BİR YORUM YAPIN

  • Aramalar:

    • jquery kayan yazı
    • css kayan menü
    • css sayfayı aşağı indirince menüyü sabitleme
    • hareketli logo yapımı
    • hareketli menü yapımı
    • jquery ile scroll indikçe büyüyen header yapımı
    • kayarak sabitlenen navigation menü
    • sayfayla birlikte kayan menü