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.

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ı 5 kez değerlendirilmiş ve ortalama 2 yıldız verilmiş.
Bu yazı daha önce 4559 kez okundu.

Yorum Yaz

    Yorumlar (2)

    64x64

    raskan

    Malesef çalışmıyor, kolay gelsin
    02 Ağ 2017
    0 0 Cevapla
    64x64

    Ercan

    Çok teşekkürler birçok sitede tarifi vardı sizinkini uygulayınca oldu . blogger şablonunda kullandım . merak ederseniz adresi https://makine-egitimi.blogspot.com.tr/ bende div class değilde nav class yazıyordu navları div yaptım bir de bazı değerlerle oynadım .örneğin javascript kodundaki 136 rakamıyla . emeğiniza sağlık paylaşım için tekrar teşekkür
    29 May 2016
    1 0 Cevapla
İstanbul Firma, İlan, Gezi Rehberi ve Haberleri instagram takipçi satın al