آموزش ساخت منوی شناور با CSS و jQuery

حتما تا کنون وارد سایت هایی شده اید که هنگامی که اسکرول را به پایین می کشید منوی سایت در بالاترین قسمت سایت همراه با شما به پایین کشیده می شود. در این مطلب قصد داریم به شما آموزش دهیم که چگونه چنین منویی با استفاده از  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>

دسته بندی: CSS / HTML

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

بروزرسانی شده در: 6 سال قبل

هیچ نظری ثبت نشده است! شما می توانید اولین نفر باشید

    +3800

    روز فعالیت سایت

    +57,358

    کاربر عضو

    +22,152

    مبحث در تالارگفتگو

    +117,999

    پاسخ در تالارگفتگو

    +10.000

    دیدگاه ثبت شده

    +2000

    قالب،اسکریپت و افزونه

    دریافت جدیدترین مطالب در تلگرام
    @persianscript