ساخت منو شناور با jQuery

  • آپدیت شده در تاریخ

ساخت منو شناور با jQuery

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

همچنین این قابلیت باعث دسترسی سریع و آسان تر به بخش های مختلف صفحه مورد نظر و یا سایت می شود.

در این مثال از ساخت منو شناور با jQuery , ما یک منو با پوزیشن fixed داریم که با کلیک بر روی هر یک از آپشن های منو , یک افکت جی کوئری برای اسکرول نرم (smooth) را برای رفتن به بخش مورد نظر را فراخوانی می کنیم.

ساخت منو شناور با jQuery

کد HTML منو شناور

کد HTML زیر برای نمایش منوی قابل اسکرول / شناور استفاده شده است . ما به استایل position مقدار fixed دادیم تا بنابر صفحه اسکرول شده نمایش داده شود.

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

و کد CSS :

افکت ساخت منو شناور با jQuery

کد jquery زیر برای اسکرول صفحه بر اساس پوزیشن قسما بالای تارگت مورد نظر استفاده شده است . همچنین برای نرم بودن اسکرول آن از تابع animate() در جی کوئری و یک مقدار مکث (delay) بهره بردیم .

امیدوارم از آموزش ساخت منو شناور با jQuery نهایت استفاده را برده باشید .

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

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

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

دوره های آموزشی