جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css

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

با استفاده از این آموزش قادر خواهید بود تا مِنو ( Navbar ) خود را درحالتی که کاربر مقدار خاصی از اسکرول بار سایت را پیمایش کرده و به پایین تر سایت رفته است , به صورت Fix نمایش دهید .

این کار باعث میشود تا کاربر شما , همیشه اصلی ترین جای یک وب سایت , که همان Navbar هست را مشاهده نماید .

ساخت چنین امکانی اصلا سخت نبوده و فقط نیاز به یک قطعا کد Jquery و Css است .

آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css

و اما آموزش :

1 – ابتدا باید سایت شما باید توانایی شناخت کتابخانه و فایل Jquery را داشته باشد .

پس اگر ندارد , باید به سایت Jquery.com رفته و آخرین ورژن Jquery را در این سایت دانلود نموده , در سایت خود آپلود نمایید  و سپس برای شناسایی این فایل به سایت خود , کد زیر را در بین دو تگ <head>و<head/> قرار دهید .

<script src="آدرس فایل جی کوئری"></script>

ضمنا میتوانید به صورت مستقیم , فایل جی کوئری را از سایت مرجع در سایت خود درج نمایید . ( به دلیل پایین آمدن سرعت سایت , این کار توصیه نمیشود )

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

2 – کد زیر را به فایل css خود اضافه نمایید .

.nav-fix{
	position:fixed;
	top:0px;
	z-index:1000;
}

3 – کد زیر را در سایت خود اضافه نمایید .

<script>
$(document).ready(function() {
$(document).scroll(function(){
	x = $(document).scrollTop();
	if ( x > vm_number ) {
		$("vm_id_class").addClass("nav-fix");
	}else{
		$("vm_id_class").removeClass("nav-fix"); } 
});
});
</script>

 نکات بسیار مهم در مورد بالا :

* اگر از سایت های استاتیک و html استفاده مینمایید , طبیعتا باید کد بالا را در تمامی صفحات کپی نمایید . برای مثال ( index.html , contact.html , about.html ) و اگر مثلا از وردپرس استفاده نمایید , کافیست یک بار در footer.php یا header.php کپی نمایید .

* وقتی اسکرول سایت را به سمت پایین میکشیم , فاصله ای از بالای سایت ( برحسب پیکسل ) میگیرد .

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

بهتر است این عدد , مقدار ارتفاع header سایت باشد . اگر این مقدار را بدهید , وقتی header سایت از دید کاربر محو شد , navbar به صورت چسبنده در میاید . ( مثلا 200 )

* به جای vm_id_class , باید id یا class منوی خود را وارد نمایید . مثلا اگر دیویژن منوی شما به صورت زیر است , باید navbar# را بنویسید :

<div id="navbar">	
</div>

یا اگر به صورت زیر است , باید navbar. را وارد نمایید :

<div class="navbar">
</div>

نکته : با کمی خلاقیت و استفاده از آموزش بالا , میتوانید بجز Navbar , هر قسمتی از سایت را که میخواهید , بعد از هر مقدار اسکرولی که میخواهید , به صورت چسبده در آورید . حتا اگر با css آشنایی بیشتری دارید , میتوانید بجز خاصیت چسبندگی , رنگ , سایز , محو شدن , رنگ ضمینه و … هر قسمتی را که میخواهید تغییر دهید .

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

 گرداوری : وحید مجیدی 

پخش اختصاصی

فایل ساخته شده مراحل بالا به صورت آماده

[sdm_download id=”1492″ fancy=”0″]

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

47 پاسخ به “آموزش ساخت منوی چسبنده ( Sticky Menu ) با Jquery و Css”

  1. رضا گفت:

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

  2. اصغر گفت:

    آقا دمت گرم.عاااااااالی بود

  3. طراحی سایت گفت:

    بسیار عالی بود، ممنون بابت به اشتراک گذاری

  4. مبین گفت:

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

    • مبین گفت:

      نمیشه خواهش میکنم کمک کن واقعا نیاز دارم

      • وحید مجیدی گفت:

        لطفا دمو بزاید دوست عزیزم

        • مبین گفت:

          عالیه حل شد ولی از شما تقاضای یه آموزش دارم.میشه ساخت search.php حرفه ای بدید یعنی منظورم اینه میخوام وقتی یه چیزی سرج شد بنویسه “نتایج جستجو برای x ” که x همون کلمس و دیگری این که اگه پاسخی یافت نشد بگه یافت نشد.ممنونم منظورم از search.php تو وردپرس بود

          • وحید مجیدی گفت:

            با سلام . لطفا در تالار گفتمان بیان کنید تا سریعا برایتان گذاشته شود . با تشکر

  5. کاظمی گفت:

    سلام آقای مجیدی

    ممنونم واقعا

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

    خیلی عالی توضیح دادین
    مچکرم

  6. رهگذر گفت:

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

  7. sajjadm گفت:

    مرسی از آموزش ، اگه علاوه بر بالای منو ، پایینش هم یه نوار باشه چجوری میشه کاری کرد که این دو تا نوار نیان بهم بچسبن بعد از جابجایی منو ؟

    • وحید مجیدی گفت:

      باید کدنویسی jquery کرد دوست عزیزم و اینجا نمیتونم بگم . ایشالله آموزش های ساده کاربردی رو دنبال کنید تا به jquery برسیم

  8. mahmod گفت:

    سلام ممنون از مطلب مفیدتون

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

    • وحید مجیدی گفت:

      دوست عزیزم به راحتی میتونید توی if اولی دستورات css رو برای کوچک کردن لوگو بیان کنید .
      به دلیل نداشتن اطلاعات از css سایت شما , نمیتونم دقیقش رو براتون بنویسم

  9. فرشاد گفت:

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

  10. محمد جواد گفت:

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

  11. ehsan گفت:

    با سلام
    تشکر بابت اشتراک گذاری
    من برای منوی سمت راست استفاده کردم
    که با پایین آمدن و رسیدن به آخر
    با فوتر به مشکل میخورد
    اگر کدی هست که تایین کنیم مثلا 500 تا مونده به آخر صفحه منو اِستُپ بشه یعنی همونجا بمونه اشتراک بگذارید خیلی ممنون میشم

    • وحید مجیدی گفت:

      دوست عزیزم در جیکوئری فقط اسکرول از بالا داریم

  12. تبدیل html به وردپرس گفت:

    بسیار جالب بود

    خیلی ممنون بابت وب سایت خوبتون

  13. اسماعیل احمدی گفت:

    داداش منظورم اینه که وقتی میایم پایین صفحه نوار نشون داده بشه وقتی میریم بالای سایت اتو ماتیک محو بشه

  14. اسماعیل احمدی گفت:

    سلام خسته نباشید من میخوام وقتی نوار رو ببریم پایین این نواره فعال بشه وقتی میاریمش بالا پیش هدر ناپدید بشه باید چی کار کنیم

  15. طراحی قالب وردپرس گفت:

    خیلی ممنون بابت سایت عالیتون

  16. dashesi_lamer گفت:

    بله داداشه گلم

    ممنون مثل سایت خودت باشه ممنون میشم

    با سپاس

  17. dashesi_lamer گفت:

    دادا میشه این کد اسکرل به بالا که گوشه صفحه سمت راست هست رو هم بذارید

    class=”fa fa-2x fa-arrow-circle-up

    ممنون میشم :X:X:X

  18. dashesi_lamer گفت:

    ممنون پیدا کردم

    با سپاس فراوان

  19. dashesi_lamer گفت:

    #navbar:hover{

    }

    داخلش باید برا color چه کدی بزنم ممنون

    • وحید مجیدی گفت:

      دقیقا میخوای چیکار انجام بشه تا کدش رو بنویسم
      ضمنا اسمی که برای navbar گذاشتید هم بگید

  20. dashesi_lamer گفت:

    سلام دادا شرمنده سوال زیاد میکنما :D

    دادا بخوام رو نوار بالا موس رو ببرم مثل سایت شما رنگش تغییر کنه
    مثلا سایت شما در css باید چه دستوری بدم ممنون

    • وحید مجیدی گفت:

      به این حالت , hover میگن
      کافیست تو css , مثلا اگر اسم نوار ابزار شما navbar# هست , میشه :
      #navbar:hover{

      }

  21. dashesi_lamer گفت:

    ممنون کدوم پست سرچیدم پیدا نکردم :D:D:D

  22. dashesi_lamer گفت:

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

    بازم سپاس گذارم

    • وحید مجیدی گفت:

      کافیه در css رنگ background رو عوض کنی …
      ساخت منویی که باز شونده باشه رو توی یکی از پستام گذاشتم داداشی

  23. میلاد گفت:

    تشکر.
    موفق باشید.

  24. موسوی گفت:

    سُلام داداشی بک لینک میفروشی؟برا ما فقیر بیچاره ها ی قیمت ایمیل میکنی؟مرسی….

    • وحید مجیدی گفت:

      سلام دوست عزیزم . تعرفه ها توی سایت هست . قیمت ها بسیار پایینه اگر یه گشتی بزنی تو نت

  25. dashesi_lamer گفت:

    پرفکــــــــــــــــــــــــــــــــــــــــــــــــــــــت

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

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