Öncelikle bu kodu <head> tagından sonra ekleyiniz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>Daha sonra aşağıdaki kodu HTML tema wordpress yada script her neye kullanmak istiyorsanız oranın header yada indexine ekleyiniz.
<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>Bu işlemi yaptıktan sonra aşağıdaki CSS kodlarını dediğim gibi HTML wordpress script ne için kullanıcaksanız CSS uzantısına ekleyin..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;}Ve son işlem olarak sistemin Javascriptini yine aynı şekilde <head> tagından sonra ekleme yapıyorsunuz.jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});Ve aşağıdaki NAV gifini kullanmak isterseniz buradan alabilirsiniz umuyorum işinize yarar bir paylaşım olmuştur.
Herkeze kolaylıklar dilerim.
Kaynak konu: WMForumlari.NET
