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

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

/ / Okuma süresi: 1 dk, 50 sn / Yorum (2)
A A A

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ı emoji ile değerlendir!
like 0
like 0
like 0
like 0
like 0
like 0
Bu yazıyı sosyal medyada paylaş!
Bu yazı daha önce 6401 kez okundu.
Yazıya ait etiketler
Ogznet.com

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!

    Yorumlar (2)

    avatar

    raskan

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

    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

Yorum Yaz

" 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. "

Bir reklam engelleyici kullandığınızı fark ettik

Sorun yok. Kim kullanmıyor ki? Ancak reklam geliri olmadan bu siteyi geliştirmeye devam edemeyiz.

Reklam engelleyicimi devre dışı bıraktım. Devam etmeme izin ver! Reklam engelleyici ile devam etmek istiyorum! Reklam engelleyicimi nasıl devre dışı bırakabilirim?
logo

Bu site için için reklam engelleyici nasıl devre dışı bırakabilirim:

AdblockAdblock / Adblock Plus
  • Tarayıcınızın sağ üst kısmındaki AdBlock / AdBlock Plus simgesine tıklayın.
  • "Aşağıdaki adreste reklamları engelle" seçeneğini kapalı konuma getirin.
  • Değişiklikleri etkinleştirmek için "Tazele" butonuna tıklayın.
FirefoxFirefox Özel Tarama
  • Firefox'ta Özel Tarama yapıyorsanız, "İzleme Koruması" adblock bildirimini kullanabilir. Adres çubuğundaki "Kalkan" simgesini tıklayarak geçici olarak devre dışı bırakılabilir.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
GhosteryGhostery
  • Tarayıcınızda Ghostery simgesini tıklayın.
  • Ghostery versiyon 6.0 altı ise "Whitelist site.", versiyon 6.0 ise "Trust site." ye tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.
uBlockuBlock / uBlock Origin
  • Tarayıcınızda Ublock / Ublock Origin simgesini tıklayın.
  • Mevcut web sitesini beyaz listeye almak için görünen menüde "power" düğmesine tıklayın.
  • İşlem bittiğinde bu yardım kutusunu kapatın.