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

  • منتشر شده در تاریخ

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

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

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

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

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

کد HTML منو شناور

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

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

و کد CSS :

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

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

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

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