ساخت Sticky Menu یا منوی چسبنده با استفاده از جی کوئری و سی اس اس 3

ساخت منوی چسبنده یا sticky menu با استفاده از JQuery و CSS3


امیر سروری 71 دیدگاه CSS , JQuery Sunday, 24th June , 2012 173839 بازدید

طراحی دکمه خرید

احتمالا تا کنون به منو های چسبنده یا Sticky Menu ها برخورد کرده اید . با توجه به افزایش ارتفاع وب سایتها به جهت افزایش اطلاعات موجود در صفحات و رایج شدن وب سایتهای تک صفحه ای یا Single Page  استفاده از منو های چسبنده رواج گرفته است . این نوع از منو می تواند دسترسی پذیری وب سایت را در این گونه از وب سایت ها افزایش دهد و باعث گشت و گذار بیشتری توسط مخاطب در وب سایت گردد . البته نوع حرکت و تکنیک استفاده شده نیز میتواند جالب باشد و به جلوه های وب سایت شما بیفزاید .

پلاگین های زیادی برای ساختن Sticky Menu ها نوشته شده اند و مورد استفاده قرار میگیرند . مانند پلاگین های Waypoints و STICKYBETA که به راحتی نیاز شما رو برطرف خواهند کرد . اما خوب از اونجایی که کمی دوست دارم در مورد نحوه کار این پلاگین ها تحقیق کنم تصمیم گرفتم این پلاگین ساده رو خودم تجربه کنم و بنویسم که البته تجربه جالبی بود .

در این سیستم با توجه به میزان اسکرول صفحه به صورت عمودی منو به بالای صفحه میچسبه و در واقع وضعیت position : fixed پیدا میکنه . برای اینکه بتونیم حالت منو رو از وضعیتی که در حالت اولیه و نرمال داره تغییر بدیم نیاز به این هست که متوجه بشیم صفحه چه موقعی با اسکرول به ارتفاع مورد نظر ما میرسه ( این ارتفاع قابل تنظیم خواهد بود ) و در اون لحظه وضعیت باکس منو ( یا هر چیز دیگه ای به غیر از منو ) رو به position : fixed تغییر بدیم . این منو در ابتدا میتونه هر وضعیت دیگه ای به غیر از fixed داشته باشه .

برای تغییر دادن این وضعیت کافیه یک class رو در نقطه بحرانی مورد نظرمون ( ارتفاع تعیین شده ) به منو یا باکس اطراف منو اضافه کنیم . برای تشخیص اینکه چه موقع کاربر با اسکرول به ارتفاع مورد نظر ما خواهد رسید از جی کوئری استفاده خواهیم کرد .

یادتون باشه باید از یک کتابخانه جی کوئری قبل از نوشتن فانکشن و استفاده در وب سایت استفاده کنید .

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>

در جی کوئری با استفاده از scroll event تشخیص خواهیم داد که چه زمانی کاربر اقدام به اسکرول خواهد کرد تا عملیات بعدی رو برنامه ریزی کنیم .


$(window).scroll(function () {

 .....

});

در این مرحله بعد از اینکه از ایونت اسکرول استفاده کردیم و متوجه شدیم چه زمانی کاربر اقدام به اسکرول خواهد کرد سپس باید متوجه بشیم چه زمانی کاربر به ارتفاع مورد نظر ما خواهد رسید ! .
برای این کار از فانکشن scrollTop استفاده خواهیم کرد که به ما مقدار اسکرول شده از بالای مرورگر رو با واحد پیکسل به صورتی عددی بر میگردونه .

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

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

با استفاده از یک فانکشن و دستور شرطی اقداماتی که روی باکس قراره انجام بدیم رو مشخص کنیم . مقدار اسکرول از بالای صفحه رو که واحدش پیکسل – px – داخل یک متغیر میریزیم به اسم heightScrolled و یک مقدار دیگه برای ارتفاع مورد نظرمون به عنوان نقطه بحرانی برای ایجاد تغییر تعیین کنیم و داخل یک متغیر با نام defaultHeight ذخیره میکنیم . این مقدار کاملا اختیاری هست و با توجه به نوع طرح شما انتخاب میشه .


$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 300;

 	 .....

});

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

با استفاده از دستورات شرطی حالت های قبل و بعد از رد شدن از نقطه بحرانی رو مشخص خواهیم کرد و کلاس های متناسب با این حالت ها رو به باکس مورد نظرمون خواهیم داد . در مثال ما باکس در دو حالت قبل از رسیدن به ارتفاع مورد نظر و بعد از گذشتن از این ارتفاع از ID #menu استفاده میکنه . نکته اینجاست که بعد از رسیدن به این نقطه کلاس sticky به باکس #header که در برگیرنده #menu هست اضافه خواهد شد و به وسیله این کلاس تغییرات لازم در #menu رو ایجاد خواهیم کرد .


$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 300;

    if ( $heightScrolled < $defaultHeight )
    {
        $('#header').removeClass("sticky")
        }
    else {
        $('#header').addClass("sticky")
        }

});

خوب با توجه به توضیحاتی که داده شد فانکشن ما تقریبا کامل شده . حالا برای اینکه هنگام تعویض حالت از نوع پوزیشن قبلی به جدید افکت زیبایی داشته باشیم از سی اس اس 3 – CSS3 استفاده خواهیم کرد .
برای ایجاد افکت کافیه ار خصوصیت transition استفاده کنیم تا تغییر حالت به نرمی صورت بگیره .

قبل از نقطه بحرانی

</pre>
<div id="header">
<div id="menu">
 ........</div>
</div>
<pre>

بعد از رسیدن به نقطه بحرانی

</pre>
<div id="header" class="sticky">
<div id="menu">
 .........</div>
</div>
<pre>

در حالتی که #menu در زیر شاخه کلاس sticky قرار بگیره خصوصیت پوزیشن به fixed تغییر پیدا خواهد کرد .


#menu {

	-moz-transition:all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	transition:all 0.5s;

    }

.sticky #menu {

	position:fixed;
    top : 0;
    width :100%;
    z-index:9999;

}

به این نکات توجه کیند که فراموش نکنید مقدار top رو تعیین کنید و اینکه width رو به 100% یا مقدارهای مشابه تغییر بدید و از z-index برای تعیین موقعیت لایه ای باکس استفاده کنید . در این کلاسها فقط مواردی که ما به اونها نیاز داریم رو نوشتم و مابقی موارد و ظاهر منو ها بستگی به طراحی شما خواهد داشت . البته تقریبا در مورد تمام مواردی که در این آموزش توضیح داده شد در وب تارگت مطالب وجود داره . امیدوارم مورد استفاده قرار بگیره .



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


71 دیدگاه برای این نوشته ثبت شده است


  1. مهدي شكري
    25 June 2012

    سلام
    واقعا عالي بود. از مطالب خوبتون متشكرم. موفق باشيد




  2. رضوی
    25 June 2012

    سلام آقای سروری . مثل همیشه عالی :) منم ثبت نام کردم برای پی اچ پی :)



    • سلام آقای رضوی عزیز . ممنون . خیلی خوبه با پشتکاری که از شما میشناسم ، مطمئنم موفق خواهید بود .




  3. حسین
    25 June 2012

    مرسی . خلاصه و مفید و عالی .




  4. محسن
    25 June 2012

    سلام.

    چقدر خوبه ادم همه کدهای جی-کوئری رو خودش بنویسه.

    استفاده کردیم.

    سپاس…



    • محسن @ سلام ; ممنون محسن جان : بله واقعا خوبه و البته دیگه توی نوع طراحی های امروز لازمه . ما هم تلاش میکنیم تجربه کسب کنیم :-)




  5. مهدخت
    26 June 2012

    مطلبتون عالی بود مرسی




  6. مرتضوی
    26 June 2012

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



    • مرتضوی @ سلام و ممنون . مشکل متاسفانه به دلیل گوگل پلاس هست که کار رو برای ما سخت کرده و اینجور مشکلات رو به وجود میاره :-) چی بگم که هیچی نگم بهتره . در هر صورت اشکر میکنم از اینکه گفتین و من سریعا این مشکل رو برطرف کردم .




  7. امیر
    3 July 2012

    عالی بود
    با تشکر فراوان




  8. سوران خضري
    9 July 2012

    سلام جناب سروري
    خوشحال شدم ديدم باز مطلب جديد گذاشتين ولي حيف كه ديگه اين سايت رو مثل سابق به روز نميكنين
    به هر جال آرزوي موفقيت دارم براتون



    • ممنونم سوران عزیز . ما تلاشمون این هست که هم کمیت و کیفیت مطالب بیشتر بشه . البته با کمک خوانندگان و دوستان خوبی مثل شما ;-)




  9. Akbar
    17 July 2012

    من چند وقتی بود که دنبال همچین چیزی می گشتم!
    ممنون! واقعا ممنون




  10. hesam0181
    23 July 2012

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




  11. داوود
    4 August 2012

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




  12. کرل دیزاین
    1 September 2012

    خیلی ممنون از وب سایت خوب و مفیدتون
    موفق و سربلند باشید




    • امیر سروری
      1 September 2012

      مرسی امیر حافظی عزیز ;-)




      • کرل دیزاین
        1 September 2012

        خواهش میکنم
        سایتتون خوبه ولی منوی اصلی نداره و این به نظرم یه نقطه ضعف محسوب میشه
        کمبود یه چیزی مثل همین منوی چسبنده توی سایتتون احساس میشه




        • امیر سروری
          1 September 2012

          منوی اصلی که داریم ولی خوب نکته بعدی که گفتی رو بله قبول دارم میشه روش کارکرد و بهترش کرد ;-)




  13. الیاس
    15 September 2012

    با سلام.
    چطور می تونیم کاری کنیم که یک فایل فقط از یک سایت خاص قابل دانلود باشه ؟




  14. سایه
    14 October 2012

    اگر میشه منوهایی که فقط با Css3 نوشته می شوند رو آموزش بدبد




  15. سامان
    10 November 2012

    خیلی عالی بود ممنون




  16. سمانه
    20 December 2012

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

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

    ممنون




  17. بهنام
    10 January 2013

    عرض سلام حدمت جناب سروری
    مطلب بسیار عالی و کاربردی هست
    مدتی پیش به سرم زد همچین کاری انجام بدم ولی از کجا و چجوری شروع کنم رو توش مونده بودم. براتون ارزوی سربلندی و موفقیت روزافزون دارم. تشکر




  18. حسین
    11 January 2013

    واقعا استفاده کردم…تشکر + لایک




  19. الهه
    11 January 2013

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




  20. علی
    22 January 2013

    با سلام .

    تشکر بابت پست مفید تان . یک سوال .

    پلاگین های ارائه شده فقط مخصوص وردپرس است ؟؟؟




  21. PmanFessional
    21 February 2013

    سلام ..اگه درباره تکنلیک Parallax هم مطلب بنویسی خیلی خوب میشه..
    یه نگاهی به این سایت بنداز http://asiatech.ir/
    البته نمیدونم اسم Parallax رو درست به کار بردم یا نه..
    ولی سایتش خیلی خوشگله..

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




  22. احسان
    16 March 2013

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

    ایا میشه این منو رو با ما بی بی ست کرد؟




  23. حقیقت
    26 April 2013

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

    یه سری به این سایت ها بزنید :
    tutorialzine.com
    designmodo.com
    tympanus.net >> ( با فیلتر شکن وارد شوید)




    • امیر سروری
      27 April 2013

      آقا یا خانوم حقیقت عزیز ممنون از شما برای نظر . اولا کسی ادعای بهترین بودن و عالی بودن نداره و نخواهد داشت ! فکر میکنم اگر چند تا مخاطب خوب و خوشبین مثل شما داشته باشیم همینی هم که داره انجام میشه دیگه انجام نمیشه ، و فکر میکنم شما راه خوبی رو پیش گرفتین توصیه میکنم به خوندن مطالب از روی همون وب سایت ها که من هم میشناسمشون و واقعا عالی هستن ادامه بدین :-) و اگر واقعا از موضوع کمبود آموزشها مناسب در زبان فارسی رنج میبرید شما که توانایی خوندن و تحلیل این وب سایتهای بسیار عالی رو دارین آستین بالا بزنید و چند تا شون رو برای هموطنان فارسی زبان خودتون ترجمه کنید تا استفاده کنند . موفق باشید .




      • حقیقت
        22 September 2013

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

        ارادتمند
        حقیقت




  24. ayoub
    2 May 2013

    با سلام

    من میخواستم منوی آبی تیره (منوی بالا که جستجو داره) سایتم(www.CLOOBIHA.com) با اسکرول بیاد پایین مثل سایت فیس نما (www.FACENAMA.com) و دموی همین آموزش , اما چون تازه کاره طراحی سایتو شروع کردم زیاد از این آموزش چیزی متوجه نشدم, اگه امکانش هست منو راهنمایی کنید که این پلاگینا چطوری روی سیستم سوشیال انجین که جامعه مجازی ساز هست نصب میشه, و یا اینکه این کدارو چگونه و کجای سایت وارد کنم؟

    با تشکر.




  25. رها امیر چرمهینی
    25 May 2013

    سلام
    من در بخش نظرات css های اختصاصی برای اینترنت اکسپلورر یه سوال گذاشتم که در اینجا و زیر این مطلب باید این رو هم اضافه کنم که دموی اموزشی این اموزش رو هم وقتی دانلود کردم در IE 10 بصورت بهم ریخته باز میشه و لینک به css نمیده اما در کروم خیلی عالی باز میشه
    ولی وقتی در index اصلی همین دموی اموزشی شما هم بالای Doctype میام و این تگ رو اضافه میکنم براحتی لینک به css رو میشناسه و در IE 10 خیلی عالی باز میشه

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




  26. محمد
    17 June 2013

    واقعا مطلب خوبی بود! ممنون از شما…




  27. رها
    23 July 2013

    سلام در صورت امکان اسلاید شوهایی که با جی کوئری ساخته میشوند هم یه اموزش ازشون بزارید
    یه اسلاید شو دراین سایت هست اگر امکان داره و فرصتی دارید یه اموزش مانند این تهیه کنین چون اسلاید شوها این روزها جزئ جدانشدنی از وب سایتها هستند اما در هیچ وب سایت ایرانی و یا خارجی اموزش کاملی از اسلاید شو هنوز ندیدم
    بخصوص اموزش جی کوئری ها برای اسلاید شو ها

    با تشکرو ارزوی توفیق




  28. رضا
    3 September 2013

    مرسی بابت آموزش قشنگتون




  29. ali
    27 November 2013

    ba salam
    dastetoon dard nakoune
    amozesh khubi boud
    kamel V jame
    mamnoun :-)




  30. سیروان
    27 November 2013

    سلام مطالب خیلی مفید بود ممنون




  31. علیرضا
    17 December 2013

    سلام .

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




  32. remy
    31 December 2013

    خیلی متشکرم.




  33. امیر حسین
    31 December 2013

    سلام
    از زحماتتون سپاسگزارم
    میشه لطف بفرمایین بگین این کد رو دقیقا کجا باید قرار بدیم؟(وبلاگ)




  34. نوید
    3 January 2014

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

    بدرود




  35. maadcn
    6 January 2014

    سلام
    جناب سروری عزیز
    مطلب بسیار جالبی بود:)

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




  36. قایق بادی
    6 April 2014

    خیلی سایت خوبی دارید ولی خیلی وقته مطالب جدید نمیذارید .. منتظر مطالب جدید هستیم




  37. مهرداد
    22 April 2014

    بسیار متشکر …

    موفق باشین انشالله



  38. اخ اخ اخ دمت گرم چه قدری دنبال این مطلب بود وب تارگت تکه




  39. azaran
    2 June 2014

    با سلام
    دوست عزیزم من یه مشکل داشتم لطفا منو راهنما ئیم بفر ما ئید

    بنده یه منو html دانلود کردم میخوام در سایت خود قرار دهم

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

    http://azarscript.com/%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%85%D9%86%D9%88-%D8%AB%D8%A7%D8%A8%D8%AA/#comment-

    روش قرار دادن در قالب php ورد پرس

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

    http://azaranlaser.ir
    این هم سایت بنده خیلی متشگر هستم




  40. محمد
    4 June 2014

    بسیار عالی بود.




  41. محمدرضا
    20 June 2014

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




  42. alireza madadi
    4 July 2014

    سلام آقای سروری سایت themeroller.jquerymobile.com
    هم امکانات قابل توجهی برای JQuery ارائه کرده.
    با تشکر از سایت بسیار خوبتون.




  43. محمدرضا
    6 August 2014

    سلام
    خدا قوت
    واقعا استفاده کردم.



  44. فوق العده بود

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




  45. محمد لطیفی
    24 August 2014

    با تشکر مفید و کاربردی بود استفاده کردم …




  46. الیاس شرفی
    4 September 2014

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




  47. سعید
    26 September 2014

    دمت گرم رفیق




  48. سعید
    11 October 2014

    با تشکر از آموزش خوبتون




  49. فاضل
    3 December 2014

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

    واقعا ممنونم




  50. حامد صیامیان
    21 December 2014

    دمت گرم



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




  52. محمد
    30 April 2015

    باسلام
    من یه تازه کارم
    میخام منو قالب جوملاییم رو دقیقا همینطور متحرک کنم اما نفهمیدم چطور میشه این کارو کرد
    میشه بفرمایید چطور از آموزشتون استفاده کنم؟




  53. erfan
    26 July 2015

    متاسفانه ریسپانسیو نیست




  54. دانیال نورانی
    5 August 2015

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




  55. morteza
    15 September 2015

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




  56. علی
    2 February 2016

    وااااای یه عمر دنبال این کد بودم O_o ممنوووووووون




  57. Ms. Safaei
    30 June 2016

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




  58. marjan
    19 May 2019

    سلام خیلی ممنونم از وب سایت شما یه سوالی دارم، چطور به این منو زیر منو اضافه کنم؟ چون هر کار میکنم نمایش نمی ده



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





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

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.