آموزش درست کردن منوی شناور

[میدوری]

با درود

حتما تا کنون وارد سايت هايی شده ايد که هنگامی که اسکرول را به پايين می کشيد منوی سايت در بالاترين قسمت سايت همراه با شما به پايين کشيده می شود . در اين مطلب قصد دارم به شما آموزش دهم که چگونه چنين منويی با استفاده از  CSS و jQuery برای سايت خود ايجاد کنيد . ابتدا تصویر های ضمیمه را ببینید  یکی در حالت عادی و دیگری در حرکت اسکرول به پایین .

توجه : این یک ایده اولیه است و نیاز به کار بیشتر دارد و با کمی تغییر و زیبا سازی که توسط شما انجام می شود به کمال می رسد .

================
[attachment=7725][attachment=7726]
================

اگر علاقه مند شدید پس دست به کار شوید .
گام یکم :  کد  HTML زیر را در header ایجاد کنید

کد php:

<div class="header"></div>
<div class="nav-container">
<div class="nav">
<ul>
<li><a href="http://">خانه</a></li>
<li><a href="http://">تالار گفتگو</a></li>
<li><a href="http://">آپلود فايل</a></li>
<li><a href="http://">تماس با ما</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 { text-decoration: none;color:#ffffff; }
.nav ul li a:hover{ text-decoration: none;color:#FF0000;} 


در کد CSS  تمامی موارد به صورت معمول می باشند . تنها class متفاوت ps-nav می  باشد که تعيين می کند منو در وضعيت fixed در بالای سايت نمايش  داده شود . اين کد با استفاده از jQuery فعال و غير فعال می شود .

گام سوم : کد جاوای زير را در ابتدای بخش header جايگذاری کنید  .

کد 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> 


در اين کد مشخص می کنيم که اگر اسکرول سايت بيشتر از 150 پيکسل پايين آورده شد  , class مورد نظر ما يعنی ps-nav فعال شود . و در غير اينصورت غير فعال و حذف شود .


گام چهارم :  فراموش نکنيد که کد زير را حتما در بخش headerinclude سايت خود فراخوانی کنيد . ( با وضعیت گوگل در ایران بهتر است فایل زیر را دانلود و در هاست خودتان آپلود کنید )

کد php:

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


کار تمام است و باقی کارها با شماست .
منبع: تالار میدوری