آموزش ساخت menu چسبان با css و jQuery

آموزش ساخت menu چسبان با css و jQueryReviewed by امیرحسین گل محمدی on Sep 2Rating: 4.5آموزش ساخت Menu که با اسکرول کردن ثابت بماند امروز می خواهم برای شما وبمستر های عزیز آموزشی قرار دهم که خیلی کاربردی و بدرد بخوره ، در این مطلب می خواهم شما را با نحوه ساخت منویی آشنا کنم که با scroll down کردن ، همراه صفحه به پایین حرکت کند و در بالا صفحه ثابت بماند ! خلاصه بگویم می خواهیم منویی بسازیم شبیه به منوی سایت خودمان . توی این آموزش متوجه میشود که اصلا نیاز به یک پلاگین برای این کار ندارید و خیلی راحت با css و jQuery می توانیم یک منوی شیک و بروز بسازید ، با ما همراه باشید ...

امروز می خواهم برای شما وبمستر های عزیز آموزشی قرار دهم که خیلی کاربردی و بدرد بخوره ، در این مطلب می خواهم شما را با نحوه ساخت menu آشنا کنم که با scroll down کردن ، همراه صفحه به پایین حرکت کند و در بالا صفحه ثابت بماند (sticky menu) ! خلاصه بگویم می خواهیم منویی بسازیم شبیه به منوی سایت خودمان . توی این آموزش متوجه میشود که اصلا نیاز به یک پلاگین برای این کار ندارید و خیلی راحت با css و jQuery می توانید یک منوی شیک و بروز بسازید ، با ما همراه باشید …

 

scroll-css-jquery-main

 

ویرایش : ۸ تیر ۱۳۹۵

شما در انتهای این آموزش به خوبی یک menu واکنش پذیر نسبت به scroll مرورگر خود را تنها با استفاده از css و jQuery میسازید ، اسم دیگر این منو را منوی چسبان یا sticky menu هم میگویند !

خوب شروع میکنیم به ساختن menu !

مرحله ۱ : قرار دادن کد ها در html

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

 

 

مرحله ۲ : استایل دهی

خوب حالا نیاز داریم یکم به کد های html برسیم تا ظاهری بهتر داشته باشه

کد زیر را در style قالب خود قرار دهید .

 

مهمترین بخش این مرحله در خط دوم استایل بالا می باشد ، شما در این خط مشخص می کنید که مکان منو همیشه بالا صفحه باشد .

 

مرحله ۳ : قرار دادن اسکریپت در قالب

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

فقط کافی است این کد را در تگ head قالبتان قرار دهید .

 

در کد بالا شاهد if ($(this).scrollTop() > 136 هستیم ، این خط یعنی تا ۱۳۶px از بالا اسکرول را انجام بده سپس منو را به بالای صفحه بچسبان ( به عبارت دیگر ۱۳۶ فاصله بین منو تا بالا صفحه است )

 

لازم به ذکر است ، برای اجرا شدن اسکریپت فوق نیازمند افزودن کتابخانه jQuery به کدهایتان هستید برای اینکار کافی است کد زیر را در مکانی مناسب ( در تگ head یا انتهای تگ body قرار دهید )

 

به همین سادگی توانستید یک منوی پرکاربرد رو بسازید ..

امیدوارم براتون مفید بوده باشه

 

همچنین میتوانید پبش نمایش این منو را از لینک روبرو مشاهده فرمایید : پیش نمایش

    پاسخگو
    محمدصادق در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

    من این منو رو درست کردم و با کوچک شدن مرورگر متناسب اون میشه رو روی هم در میاد . لطفا نطرتون رو بگید با تشکر
    لینک دانلود : http://uplod.ir/30sxnl14xjh0/Make_Menu.rar.htm

    پاسخگو
    محمدصادق در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

    دیدینش؟ پسندیدید ؟ لطفا نظر بدید . من ۱۳ سالمه و تازه شروع کردم . می خوام ببینم به درد این کار می خورم یا نه ؟
    با تشکر

      پاسخگو
      امیرحسین گل محمدی در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

      سلام محمد جان ، خوبه و ادامه فعالیتت توی این کار به خودت و علاقت بستگی داره .

    پاسخگو
    محمدصادق در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

    علاقه که دارم فقط می خوا میدونم این سه شرط رو دارم کر تو کتاب نوشته بود برای موفق بودن در یک شغل : ۱- علاقه ۲ – استعداد ۳- بازار کار .

      پاسخگو
      امیرحسین گل محمدی در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

      به نظر من داری .

    پاسخگو
    محمدصادق در چهارشنبه ۱۲ شهریور ۱۳۹۳ :

    ممنونم بابت راهمایی و تحسین

    پاسخگو
    بدو بوسه دات کام در شنبه ۲۷ دی ۱۳۹۳ :

    مطلب جالبی بود
    فقط یه چیز دیگه اگه خواستم یه منو بندازم پایین صحفه و ثابت باشه بایید چیکار کرد …
    مثل منوی پایینی این سایت
    http://codepen.io/

      پاسخگو
      امیرحسین گل محمدی در یکشنبه ۲۸ دی ۱۳۹۳ :

      سلام دوست عزیز
      برای اینکار کافیه در مرحله دوم ، به جای top:0 ،
      bottom:0 قرار بدهی .

    پاسخگو
    مجید در جمعه ۱۷ بهمن ۱۳۹۳ :

    سلام امیر جان… f-nav واسه چی بکار رفته؟

      پاسخگو
      امیرحسین گل محمدی در جمعه ۱۷ بهمن ۱۳۹۳ :

      درود بر تو مجید عزیر
      f-nav یک کلاسی هستش که بعد از اینکه ۱۳۶ پیکسل اسکرول به سمت پایین حرکت میکنه , به nav-container اضافه میشه ( تا اینجا برای جاوا اسکریپت )
      تو css براش تعریف شده که به بالا بچسبه و روی تمام لایه قرار بگیره .

      موفق باشی دوست من

    پاسخگو
    Arshan در سه شنبه ۲۶ اسفند ۱۳۹۳ :

    چرا برا من نمیشه؟؟!! (لطفا کمک کنید!)

    پاسخگو
    علی در چهارشنبه ۰۵ فروردین ۱۳۹۴ :

    خیلی ممنون از آموزش خوبتون

    پاسخگو
    امیرحسین در دوشنبه ۱۴ اردیبهشت ۱۳۹۴ :

    سلام. خسته نباشید!
    خیلی ممنون بابت آموزش کاربردیتون
    من این قابلیت رو به منوی سایتم اضافه کردم . اما توی صفحه ی اول سایت با پایین اومدن صفحه، منو زیر چنتا از عکسا میره و یخرده ناجوره میشه. میخواستم بدونم دلیلش چیه؟ چطور میتونم بدون دست زدن به قسمت های دیگه سایت این مشکل رو برطرف کنم؟
    آدرس : http://applazem.ir

      پاسخگو
      امیرحسین گل محمدی در دوشنبه ۱۴ اردیبهشت ۱۳۹۴ :

      دروود امیرحسین عزیز
      من سایتتو دیدم ، برای اینکار کافیه به کلاس scl-down ، کد زیر را اضافه کنی :
      z-index: 10000
      از لحاظ فنی ، با استفاده از این کد شی مورد نظر را جلوتر از بقیه اشیاء قرار میدهی .

      امیدوارم به نتیجیه دلخواه برسی .

    پاسخگو
    erfan در یکشنبه ۰۴ مرداد ۱۳۹۴ :

    سلام
    واقعا خسته نباشین برای طراحی سایتتون که الحق کم نظیره
    بی ربط بود معذرت 🙂

    پاسخگو
    علی در جمعه ۰۶ شهریور ۱۳۹۴ :

    سلام داداش
    یک مشکلی تو آموزشت هست و اونم اینه که شما اشاره به این نکردی که فایل js باید لینکش تو خود کد ها پیوست بشه,چون وگرنه کار نمیکنه….
    دوستان این کد پایین رو تو head قرار بدید:

    با تشکر از امیرحسین جان

      پاسخگو
      امیرحسین گل محمدی در یکشنبه ۰۸ شهریور ۱۳۹۴ :

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

    پاسخگو
    ehsa در سه شنبه ۱۰ شهریور ۱۳۹۴ :

    سلام چطوری می تونم منو رو طوری تطابق بدم که به جای خانه و آرشو و… موضوعات سایت رو به صورت منو کشویی نشون بده؟؟مثل خود سایتتون رو آموزش که کلیک می کنیم زیر موضوعات مریوز به آموزش باز می شه؟؟
    بعد بخوام می تونم این کدو توی قالب وبلاگ به کار ببرم؟؟
    با تشکر

      پاسخگو
      امیرحسین گل محمدی در پنج شنبه ۱۲ شهریور ۱۳۹۴ :

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

    پاسخگو
    فریدون وبمانی در یکشنبه ۱۳ دی ۱۳۹۴ :

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

    پاسخگو
    امیر در سه شنبه ۱۸ اسفند ۱۳۹۴ :

    خدایی عاشق دمو شدم…خیلی قشنگ بود…دمت گرم

    پاسخگو
    امیر در سه شنبه ۱۸ اسفند ۱۳۹۴ :

    سیستم کامن گذاشتنت رو هم دوست داشتم :))
    (از چپ به راست بکشید)
    اموزش اینم بذار
    ممنون

    پاسخگو
    امیرم :) در سه شنبه ۱۸ اسفند ۱۳۹۴ :

    دوباره سلام 🙂
    اقا یه چیزی…این اماده ارسال دیدگاهتو درست کردم..با استفاده از
    draggable &droppable فقط یه سوال
    $( “#drag” ).draggable({ containment: “parent” ,
    revert: true
    });
    واسه draggable چون از revert استفاده کردم اون باکس کشویی دوباره بر میگیرده وقتی به اخر میرسه.چیکارش کنم که مثله تو علامت تیک بخوره و دیگه بر نگرده:)))
    ممنون..

    پاسخگو
    Amir در شنبه ۰۵ تیر ۱۳۹۵ :

    سلام.آقا دمتون گرم با این کد مختصر و مفیدتون فقط یادتون رفت بگید که باید به کتابخونه جی کوئری لینکش کنیم تا کد ها اجرا بشه…..

      پاسخگو
      امیرحسین گل محمدی در سه شنبه ۰۸ تیر ۱۳۹۵ :

      درود بر تو امیرجان
      ممنون بابت نظرت ،‌ حق با شما بود و پست ویرایش شد .
      با تشکر

    پاسخگو
    سامان در چهارشنبه ۰۹ تیر ۱۳۹۵ :

    مرسی … خوب بود .

    پاسخگو
    نسیم در چهارشنبه ۲۶ آبان ۱۳۹۵ :

    سلام من سایت بانک پرسیان رو دارم طراحی می کنم و میخوام منو رو قرار بدم، فایل css و فایل html رو ساختم اما اصلا jquery بلد نیستم، کدهایی که تو مرحله ۳ گفتین رو تو head کپی کردم، اما عمل نکرد،میشه راهنمایی کنید.