evden eve nakliyat firmaları teklif al uygun taşın istanbul şehir içi yada şehirler arası firmalar listelenir istanbul evden eve firmaları
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

YAPILAN YORUMLAR
  • samet dedi ki:

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

  • Mahmut Yaşar dedi ki:

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

  • selçuk şenol dedi 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 dedi 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 dedi ki:

    teşekkür ederiz çok yararlı oldu

  • Fatih dedi 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