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

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

Kendi sitemde de kullandığım sayfa aşağı kayarken üstte sabit duran menü nasıl yapılır bunu anlatacağım.

::

2 Yorum ::

Webmaster ::

Şu 20, 2015

Dikkat! Bu yazı yayınlandığından beri 909 gün geçmiş. Yazının içeriği güncelliğini kaybetmiş olabilir.

jQuery

Öncelikle jQuery Kütüphanesini sitemize ekliyoruz.

Bu menü’yü yapabilmemiz için bir jQuery kütüphanesine ihtiyacımız var. Aşağıda ki kodu sitenize ekleyin.

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

HTML

Aşağıdaki kodları menünüzün sayfada görünmesini istediğiniz yerine yerleştirin.

 <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ğıdaki kodları sitenizin style.css dosyasına ekleyin. Daha sonra isterseniz bu kodlar ile değişiklik yaparak menünüzün stilini değiştirebilirsiniz.

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

JAVASCRİPT

Aşağıda ki kodları temanızın tagları 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");
        }
    });
  
});

 


Bu yazıyı 5 yıldız üzerinden kaçla değerlendirirsiniz?


Daha önce bu yazı 1 kez değerlendirilmiş ve ortalama 1 yıldız verilmiş.


Etiketler:


Bu yazı daha önce 2373 kez okundu.

Ogznet.com

Zaman buldukça siteye yeni ve faydalı yazılar yazmaya çalışıyorum. 2004'ten bu yana web siteler yapıp yönetiyorum.

Yorum Yaz

guvenlik

Hemen mail adresinle kaydol

Yeni Yazılardan İlk Senin Haberin Olsun

feedburner
stats
Engelleyiciyi kapattım!