آموزش مخفی و نمایان کردن منو با jquery یا sticky menu

روش استفاده از پلاگین های jquery
چگونه یک پلاگین جی کوئری ایجاد کنیم و یا از پلاگین های آماده استفاده کنیم ( JQuery Plugin )
۲ اسفند ۱۳۹۸
آموزش ساخت منوی کشویی یا canvas منو با jquery
آموزش ساخت منوی کشویی یا canvas منو با jquery
۱۲ اسفند ۱۳۹۸
آموزش مخفی و نمایان کردن منو با jquery یا sticky menu

چگونه یک منوی شناور یا ( sticky menu ) ایجاد کنیم که در اسکرول به بالا ، منو مخفی و در اسکرول به پایین منو نمایان بشه ؟

در این آموزش میخوام به شما نحوه پیاده سازی و یا ساخت یک منوی چسپان رو بدم که با اسکرول صفحه به سمت بالا منو نمایان بشه و با اسکرول به سمت پایین منو مخفی بشه که به اصطلاح به این نوع منو ها میگن ( sticky menu )، البته تفاوت اون با منو های چسپان یا همون sticky menu این هستش که این منو با اسکرول صفحه به سمت پایین مخفی میشه و با اسکرول صفحه به سمت بالا نمایان میشه من نمونه های مختلفی از این منو رو دیدم اما خیلی هاشون این نوع منو رو به روش های پیچیده ای پیاده سازی کرده بودن و بعضی ها هم بیش از ۳۰ خط براش کد نوشته بودن اما من میخوام خیلی ساده و با کمتر از ۳ خط پیاده سازی این منو رو به شما آموزش بدم پس تا آخر این آموزش همراه من باشید.

توجه داشته باشید که من در مورد کد های Html و Css توضیحی نمیدم پیش فرض من اینه که شما html و Css بلد هستن و نیازی به توضیح نمی بینم فقط مواردی خاضی را توضیح میدم ولی باز اگر سوالی داشتین توی بخش نظرات سوال خودتون را مطرح کنید تا توضیحات اون بخش رو بهتون بدم

قدم اول در پیاده سازی منوی چسپان یا همون sticky menu

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

قدم دوم اضافه کردن کد های Css

خب بعد از اضافه کردن کد های html بالا به فایل خودتون حالا نوبت به اضافه کردن کد های Css میرسه اینم که کاری نداره فقط کافیه کد های Css  پایین رو به فایل Style.css خودتون اضافه کنید و یا میتونید اون رو توی همون فایل html  توی یک تگ <style> توی head صفحه تون قرار بدین من سعی کردم طوری کد ها رو بتونیم برای نمایش صفحه توی حالت موبایل هم مشکلی پیش نیاد.

اگه بخوام درمورد کد های بالا یه توضیح بدم عرض منو رو برابر با % ۱۰۰ قرار دادیم و ارتفاع شو برابر با ۵۰px قرار بدین البته شما میتونید به دلخواه این اندازه ها رو تغییر بدین تنها نکته ای که در کد بالا باید به اون توجه کنید این هستش که باید position منوی خودتون رو برابر با fixed قرار بدین و Top و left اون رو هم برابر با ۰ بزارین برای اینکه منو با یک انیمیشن محو و نمایان بشه یه transition هم براش میزرایم بقیه موارد اختیاری هستن

حالا یه کلاس با نام hide یا هر اسم دیگه تعریف کنید و یه transform براش تعریف میکنم مقدارشو برابر با translateY -100% قرار میدیم تا وقتی این کلاس به منو اضافه شد منو % ۱۰۰-  در محور Y ها حرکت کنه و مخفی بشه وقتی جهت رو منفی میکنیم منو به سمت بالا حرکت میکنه.

قدم سوم اضافه کردن کد های jquery به صفحه است

حالا رسیدیم به بخش جذاب داستان برای اینکه منویی که در بالا با html و css ساخته شده رو متحرک کنیم حالا با کتابخانه محبوب جی کوئری میایم و کاری میکنیم که تا این منو به رفتار کاربر واکنش نشون بده فقط قبل از هر کاری باید کتابخانه jquery به صفحه اضافه بشه و بعد از اضافه کردن فایل این کتابخانه به صورت لوکال یا از طریق یک cdn حالا نوبت اضافه کردن کد جی کوئری ما میرسه که برای متحرک سازی منو اون رو نوشتیم.

قبلا از اینکه بریم سراغ کد های جی کوئری مون ابتدا کتابخانه جی کوئری رو به صفحه مون اضافه میکنیم

خب حال میتونیم کار اصلی خودمن رو شروع کنیم شما میتونید این کد ها رو در یک فایل جداگانه اضافه کنید یا اینکه اون رو بعد فراخوانی کتابخانه جی کوئری به صفحه تون اضافه کنید

در اولین مرحله قبل از نوشت هر کدی در جی کوئری سعی کنید کدهای خودتون رو داخل $(document).ready قرار بدین که این تابع کد های دیگه رو به صورت یک تابع callback دریافت میکنه و بعد از اینکه صفحه html به صورت کامل لود شد کد های داخل این متد اجرا میشه این به شما کمک میکنه که با خطای undefined  مواجه نشین اگر کد های خودتون رو داخل این فایل ننویسین وقتی در هنگام لود اگر شما یک تگ html را با جی کوئری دریافت میکنین که بخواین یه عملیاتی روی اون کد ها انجام بدین چون هنوز لود نشده و جاوا اسکریپت یا جی کوئری نمیتونه اون رو پیدا کنه با خطای undefined مواجه میشن

دیگه میریم سراغ کد های منو ، حالا در این مرحله کاری که باید بکنید یک متغییر تعریف کنید و مقدار شو برابر با صفر بزارین مثلا اسم شو میزاریم oldScroll بعد از تعریف این متغییر باید شی  window رو با متد $  بگیرین و اون رو با متد on() برای حالت اسکرول در حالت listen قرار بدیم فقط یه نکته ای رو درمورد متد on توضیح بدم با استفاده از متد on در ابتدا باید یکی از پدرهای اون المنت داینامیک که همیشه استاتیک هست و در صفحه وجود داره رو انتخاب کنیم و بعد از اون رویداد رو براش تعریف کنیم و بعنوان پارامتر دوم، المنت فرزند داینامیک رو مشخص کنیم. با اینکار متد مورد نظر حتی برای المنتهایی که با Ajax در صفحه قرار میگیرن به خوبی کار میکنه و مشکل حل میشه.

به کد زیر توجه کنید

اگه بخوام یه توضیح درمورد کد بالا بدم با استفاده از متد on() ما برای شئ window یک eventlistener تعریف میکنم و میگیم که در هنگام اسکرول صفحه کد های داخل تابع اون اجرا بشن

در این قسمت ما با تابع $() المان یا منویی رو که میخوام در حالت اسکرول مخفی و نمایان بشه رو میگیریم و بعد با متد toggleClass یک کلاس css رو که از قبل تعریف کردیم رو به اون اضافه میکنم توجه کنید که متد toggleClass در پارامتر دومی که دریافت میکند میتوانیم یک شرط قرار بدهیم که اگر شرط برقرار بود کلاس به اون اضافه بشه یا از اون المان حذف بشه . اگر بخوام این خط رو به صورت خیلی قابل درک تر بنویسم به صورت زیر میتونیم بنویسیم

همون طوری که در بالا مشاهده میکنید ما در پارامتر متد toggleClass گفتیم که هر وقت شرط برقرار بود کلاس زیر hide رو return کنه به همین سادگی اما برای اینکه خلی جم و جور تر باشه کد رو به همون روش قبلی مینویسیم .

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

اگر بخوام خیلی خلاصه بگم روش کار این کد به این صورته که هر وقت که صفحه به پایین اسکرول میشه مقدار جدید اسکرول بالا $(window).scrollTop() با مقدار قبلی اون که در متغییر oldScroll نگهداری میشه مقایسه میشه اگر مقدار بیشتر بود یعنی اسکرول به طرف پایین بود پس شرط برقراره و کلاس hide به منو اضافه میشه و  اگر مقدار oldScroll بیشتر از مقدرا فعلی $(window).scrollTop()  بود یعنی اسکرول به طرف بالا بود کلاس  hide از منو حذف میشه با همین ترفند ساده این کار به راحتی انجام میشه

کد کامل شو توی این بخش میتونید ببینید

 

 

در نهایت خروجی شما باید شبیه منوی پایین باشه

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

See the Pen
Walkers – How to
by Louis Hoebregts (@Mamboleoo)
on CodePen.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

7 − یک =