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. HTML Aşağıdaki kodları menünüzün sayfada görünmesini istediğiniz yerine yerleştirin.
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"); } }); });
