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 5183 kez okundu.

Bu yazıyı beğendiniz mi? Haber bültenimize katılarak buna benzer yeni yazılardan haberdar olun!

Açılacak sayfada "Ben robot değilim" işaretleyip "Complete Subscription Request" yazan butona tıklayınız!

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
" Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML) konulu makalemizde Ogznet.com olarak sizlere Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML) ile ilgili bilgiler aktarmak istedik. Hemen yukarıda Haraketli Kayan Sabit Üst Menü Yapımı (CSS,jQuery,HTML) ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "
Reklam Ver instagram takipçi satın al