آموزش ساخت منوی چسبان sticky menu | منو چسبنده جی کوئری با افکت زیبا

در این مقاله از ایران تمز به آموزش ساخت منوی چسبان که با نام sticky menu مشهور است میپردازیم. از منوهای چسبان که معمولا در بالای صفحه وب به شکل ثابت نمایش داده میشوند و با اسکرول رو به پایین یا بالا در جای خودشان ثابت میمانند میتوان در طراحی قالب وردپرس یا تبدیل psd به قالب وردپرس برای در دسترس بودن همیشگی لینکهای مفید سایت برای کاربران و بازدیدکنندگان استفاده کرد. منو چسبنده جی کوئری این آموزش دارای افکت زیبا css در هنگام شروع اسکرول صفحه است تا ظاهر گرافیکی سایت را زیباتر کند. از منو چسبنده میتوان در انواع سایتها استفاده کرد و محدودیتی از این نظر وجود ندارد. تا انتهای آموزش ساخت منوی چسبان sticky menu همراه ما باشید.

آموزش ساخت منوی چسبان sticky menu | منو چسبنده جی کوئری با افکت زیبا

آموزش ساخت منوی چسبان sticky menu توسط جی کوئری

برای ساخت منو ثابت علاوه بر کدهای css و jquery میتوان از افزونه وردپرس نیز استفاده کرد.
پیشنهاد ما استفاده از دستورات جی کوئری و css است زیرا قالب وردپرس یا رابط کاربری نهایی به شکلی بهینه و استاندارد خواهد بود. اصول کار به این شکل است که توسط دستورات jquery اسکرول شدن صفحه را شناسایی میکنیم به شکلی که وقتی تا میزان مشخصی از صفحه اسکرول شد، کلاس sticky به کلاس head-top که در اینجا کلاس اصلی منو است اضافه میشود. میزان اسکرول شدن صفحه را توسط متغییر جاوا defaultHeight که در خط سوم نمایش داده شده و در اینجا ۲۵۰ پیکسل است مشخص میکنیم. دستورات css که در کلاس sticky وجود دارد باعث ثابت شدن منو با افکت زیبای محو شونده میشود. برای افکت گرافیکی نیز از خاصیت opacity در css استفاده شده است.

در تصویر زیر نحوه عملکرد منو چسبنده وردپرس نمایش داده شده است.

آموزش ساخت منوی چسبان sticky menu توسط جی کوئری

کدهای جی کوئری را در فوتر سایت و کدهای css را در فایل style.css قالب وردپرس قرار دهید.

<script>
$(window).scroll(function(){var $heightScrolled = $(window).scrollTop();
var $defaultHeight = 250;
if($heightScrolled < $defaultHeight){$('.head-top').removeClass("sticky")}
else{$('.head-top').addClass("sticky")}});
</script>
// css codes copy to style.css
.sticky{position:fixed;width:100%;left:0;top:0;z-index:9999999;border-top:0;
-webkit-animation:fadein 1s;-moz-animation:fadein 1s;-ms-animation:fadein 1s;
animation:fadein 1s;}
@keyframes fadein{from{opacity: 0;} to{opacity: 1;}}
@-moz-keyframes fadein{from {opacity: 0;} to{opacity: 1;}}
@-webkit-keyframes fadein {from{opacity: 0;} to{opacity: 1;}

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

درباره نویسنده
رضا کیانوش

رضا کیانوش هستم مدیر ایران تمز، لیسانس فناوری اطلاعات و ارتباطات در گرایش کاربردهای ict دارم. حدود 7 سالی هست که با وردپرس آشنا شدم و خدمات طراحی قالب وردپرس، سئو و بهینه سازی سایت رو انجام میدم. ایران تمز رو برای ارائه آموزشهای تخصصی و انتشار پوسته های وردپرسی که طراحی میکنیم راه اندازی کردم. اگر نیاز به طراحی قالب وردپرس اختصاصی دارید ما در ایران تمز اینکار رو با بهترین کیفیت براتون انجام میدیم.

بازدیدکنندگان قبلی مشاهده مطالب زیر را به شما پیشنهاد کرده اند
دیدگاهی بنویسید
6
  1. emad
    5 مرداد 1398 ساعت 07:56

    سلام، کار نمیکنه …

    • رضا کیانوش
      5 مرداد 1398 ساعت 08:02

      سلام کار میکنه، همین الان توی قالب ایران تمز استفاده شده و داره بدرستی کار میکنه.

      • موریسف
        13 شهریور 1398 ساعت 03:59

        اقا عشقید کار کرد فقط باید دوستان تو کدای js تو بخش .header-top ایدی هدر قالب خودشون رو جایگزین کنن
        فقط یچیزی وقتی منو با اسکرول میاد پایین اون بخشای منو دیگه کار نمیکنه مثلا رو ایکن منو کلیک میکردم لیست پیجا میومد دیگه نمیاد. تو نسخه کامپیوتر هم کار نمیکنه
        تو نسخه کامپیوتر کار میکنه کش شده بود. فقط تو نسخه موبایل زیر منو ها نمایش داده نمیشن.

  2. مهدی
    27 تیر 1398 ساعت 16:51

    سلام . زیر منو هارو چطور مثل سایت شما کنیم ؟

  3. محمد رحمتی
    14 اسفند 1396 ساعت 17:07

    داش دمت گرم