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

http://dl.persianscript.ir/img/fix-menu-css-jquery.jpg

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

<div>
<div>
<ul>
<li><a href="https://www.persianscript.ir">خانه</a></li>
<li><a href="http://forum.persianscript.ir">تالار گفتگو</a></li>
<li><a href="http://up.persianscript.ir">آپلود فایل</a></li>
<li><a href="">تماس با ما</a></li>
</ul>
</div>
</div>

سپس کد css برای ایجاد منو را به صورت زیر ایجاد می کنیم.

.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 فعال و غیر فعال می کنیم.

کد جاوای ما به صورت زیر است.

<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 فعال شود. و در غیر اینصورت غیر فعال و حذف شود.

فراموش نکنید که کد زیر را حتما در بخش <head> سایت خود فراخوانی کنید

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

دانلود و اطلاعات بیشتر

دانلود / 10 کیلوبایت

پیشنمایش کاربری

بحث و تبادل نظر / رفع مشکلات درباره این مطلب

چرا فایل های پرشین اسکریپت رایگان است؟

تمامی افزونه ها و قالب های موجود در پرشین اسکریپت به صورت کاملا اورجینال و بدون دستکاری تهیه می شوند و به اشتراک گذاشته می شوند. تمامی منابع و فایل های موجود در پرشین اسکریپت متن باز و بدون قفل گذاری می باشد و شما می توانید از سلامت کدهای درون سورس ها اطمینان حاصل کنید

برچسب ها: آموزش ساخت منوی شناور اموزش ساخت منوی همراه ساخت منو سایت ساخت منوی fix منوی css

نظرات

0 0 رای ها
رأی دهی به مطلب
اشتراک در
اطلاع از
guest

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه نظرات