حتما تا کنون وارد سایت هایی شده اید که هنگامی که اسکرول را به پایین می کشید منوی سایت در بالاترین قسمت سایت همراه با شما به پایین کشیده می شود. در این مطلب قصد داریم به شما آموزش دهیم که چگونه چنین منویی با استفاده از CSS و jQuery برای سایت خود ایجاد کنید.
در ابتدا ما کد 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
نظرات
مطالب داغ
- افزونه صفحه ساز المنتور پرو Elementor Pro وردپرس نسخه 3.27.3- دانلود رایگان
- افزونه فارسی افزایش سرعت وردپرس (راکت) WP Rocket نسخه 3.18.1.5
- افزونه فرم ساز حرفه ای وردپرس گرویتی فرم Gravity Forms نسخه 2.9.1
- افزونه فارسی سئو Yoast SEO Premium وردپرس نسخه حرفه ای 24.4
- افزونه قدرتمند چند زبانه کردن سایت وردپرس WPML نسخه 4.6.15
- افزونه نمایش حرفهای WooCommerce Variation Swatches نسخه 2.2.0
- افزونه ثبت نام و ورود شماره موبایل Digits وردپرس نسخه 8.4.4.1
- افزونه هوش مصنوعی AIKit بر پایه GPT-3 نسخه 4.13.0
- قالب فروشگاهی چندمنظوره وودمارت WoodMart ووکامرس نسخه 8.0.6
- افزونه لیست قیمت در ووکامرس PriceList for WooCommerce نسخه 2.0.3