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:

  • html menüyü yukarda sabit tutma
  • css ile ekranda sabit kalan bar yapımı
  • wordpress üst sabit
  • mobil için kayan menü
  • menünün kaymasını engelleme
  • menu cubugu olusturma kodları
  • kayan menü php
  • kayan menü
  • jQuery sabit üst menü
  • jquery ile aşağı inince küçülen menü yapımı
mature porno
porno hikayeleri
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?

  • Hareketli Menü Yapımı | diyor ki:

    Teşekkürler.

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

    • html menüyü yukarda sabit tutma
    • css ile ekranda sabit kalan bar yapımı
    • wordpress üst sabit
    • mobil için kayan menü
    • menünün kaymasını engelleme
    • menu cubugu olusturma kodları
    • kayan menü php
    • kayan menü
    • jQuery sabit üst menü
    • jquery ile aşağı inince küçülen menü yapımı