در ابتدا ما کد HTML منوی خود را با استفاده از لیست ها (ul) ایجاد می کنیم.

کد PHP:
<div> <div> <ul> <li><a rel="nofollow"  href="http://www.persianscript.ir">خانه</a></li>  <li><a rel="nofollow" href="http://forum.persianscript.ir">تالار  گفتگو</a></li> <li><a rel="nofollow"  href="http://up.persianscript.ir">آپلود فایل</a></li>  <li><a href="">تماس با ما</a></li> </ul>  </div> </div> 
سپس کد css برای ایجاد منو را به صورت زیر ایجاد می کنیم.

کد PHP:
.nav-container{ background:#000;} .ps-nav{ z-index: 9999; position:  fixed; top: 0; width: 100%;} /* this make our menu float top */ .nav {  height: 29px;} .nav ul { list-style: none; } .nav ul li{float: right;  padding: 6px; border-left: 1px solid #ACACAC;} .nav ul li:first-child{  padding-right: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration:  none;color:#ccc;} 
در کد CSS ما تمامی موارد به صورت معمول می باشند. تنها class متفاوت ps-nav می باشد که تعیین می کند منو در وضعیت fixed در بالای سایت نمایش داده شود. این کد را با استفاده از jQuery فعال و غیر فعال می کنیم.
کد جاوای ما به صورت زیر است.

کد PHP:
<script type="text/javascript"> var _rys = jQuery.noConflict();  _rys("document").ready(function(){  _rys(window).scroll(function () { if  (_rys(this).scrollTop() > 150) {  _rys('.nav-container').addClass("ps-nav"); } else {  _rys('.nav-container').removeClass("ps-nav"); } });  }); </script> 
در این کد مشخص می کنیم که اگر اسکرول سایت بیشتر از ۱۵۰ پیکسل پایین اورده شد . class مورد نظر ما یعنی ps-nav فعال شود. و در غیر اینصورت غیر فعال و حذف شود.
فراموش نکنید که کد زیر را حتما در بخش <head> سایت خود فراخوانی کنید

کد PHP:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 

نوشته شدن توسط پرشین اسکریپت
تگ گزاری شد توسط interhost | اینترهاست - اعضا