1390
جزئیات وبلاگ
ساخت Sticky Menu یا منوی چسبنده
حتمالا تا کنون به منو های چسبنده یا Sticky Menu ها برخورد کرده اید . با توجه به افزایش ارتفاع وب سایتها به جهت افزایش اطلاعات موجود در صفحات و رایج شدن وب سایتهای تک صفحه ای یا Single Page استفاده از منو های چسبنده رواج گرفته است . این نوع از منو می تواند دسترسی پذیری وب سایت را در این گونه از وب سایت ها افزایش دهد و باعث گشت و گذار بیشتری توسط مخاطب در وب سایت گردد . البته نوع حرکت و تکنیک استفاده شده نیز میتواند جالب باشد و به جلوه های وب سایت شما بیفزاید .
پلاگین های زیادی برای ساختن Sticky Menu ها نوشته شده اند و مورد استفاده قرار میگیرند . مانند پلاگین های Waypoints وSTICKYBETA که به راحتی نیاز شما رو برطرف خواهند کرد . اما خوب از اونجایی که کمی دوست دارم در مورد نحوه کار این پلاگین ها تحقیق کنم تصمیم گرفتم این پلاگین ساده رو خودم تجربه کنم و بنویسم که البته تجربه جالبی بود .
در این سیستم با توجه به میزان اسکرول صفحه به صورت عمودی منو به بالای صفحه میچسبه و در واقع وضعیت position : fixed پیدا میکنه . برای اینکه بتونیم حالت منو رو از وضعیتی که در حالت اولیه و نرمال داره تغییر بدیم نیاز به این هست که متوجه بشیم صفحه چه موقعی با اسکرول به ارتفاع مورد نظر ما میرسه ( این ارتفاع قابل تنظیم خواهد بود ) و در اون لحظه وضعیت باکس منو ( یا هر چیز دیگه ای به غیر از منو ) رو به position : fixed تغییر بدیم . این منو در ابتدا میتونه هر وضعیت دیگه ای به غیر از fixed داشته باشه .
برای تغییر دادن این وضعیت کافیه یک class رو در نقطه بحرانی مورد نظرمون ( ارتفاع تعیین شده ) به منو یا باکس اطراف منو اضافه کنیم . برای تشخیص اینکه چه موقع کاربر با اسکرول به ارتفاع مورد نظر ما خواهد رسید از جی کوئری استفاده خواهیم کرد .
یادتون باشه باید از یک کتابخانه جی کوئری قبل از نوشتن فانکشن و استفاده در وب سایت استفاده کنید .
|
1
|
<script type="text/javascript" src="js/jquery-1.7.1.js"></script> |
در جی کوئری با استفاده از scroll event تشخیص خواهیم داد که چه زمانی کاربر اقدام به اسکرول خواهد کرد تا عملیات بعدی رو برنامه ریزی کنیم .
|
1
2
3
4
5
|
$(window).scroll(function () { .....}); |
در این مرحله بعد از اینکه از ایونت اسکرول استفاده کردیم و متوجه شدیم چه زمانی کاربر اقدام به اسکرول خواهد کرد سپس باید متوجه بشیم چه زمانی کاربر به ارتفاع مورد نظر ما خواهد رسید ! .
برای این کار از فانکشن scrollTop استفاده خواهیم کرد که به ما مقدار اسکرول شده از بالای مرورگر رو با واحد پیکسل به صورتی عددی بر میگردونه .
خوب ابزارهای لازم در اختیار ما قرار داره کافیه روی این اعداد و ارقام کمی کار کنیم .
ما مقدارهای اندازه ارتفاع اسکرول شده از بالای مرورگر و همچنین مقدار ارتفاع نقطه بحرانی ( که باید با توجه به طرح تعیین کنیم ) از بالای صفحه رو در اختیار داریم .
با استفاده از یک فانکشن و دستور شرطی اقداماتی که روی باکس قراره انجام بدیم رو مشخص کنیم . مقدار اسکرول از بالای صفحه رو که واحدش پیکسل – px – داخل یک متغیر میریزیم به اسم heightScrolled و یک مقدار دیگه برای ارتفاع مورد نظرمون به عنوان نقطه بحرانی برای ایجاد تغییر تعیین کنیم و داخل یک متغیر با نام defaultHeight ذخیره میکنیم . این مقدار کاملا اختیاری هست و با توجه به نوع طرح شما انتخاب میشه .
|
1
2
3
4
5
6
7
|
$(window).scroll(function () { var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 300; .....}); |
این نکته رو فراموش نکنید که نباید زیاد از اسکرول کردن بگزره و بعد این فانکشن اجرا بشه به عبارت دقیقتر این ارتفاع رو خیلی بیشتر از ارتفاع منو نگیرید فقط کمی بیشتر از ارتفاعی که منوی شما قابل رویت هست .
با استفاده از دستورات شرطی حالت های قبل و بعد از رد شدن از نقطه بحرانی رو مشخص خواهیم کرد و کلاس های متناسب با این حالت ها رو به باکس مورد نظرمون خواهیم داد . در مثال ما باکس در دو حالت قبل از رسیدن به ارتفاع مورد نظر و بعد از گذشتن از این ارتفاع از ID #menu استفاده میکنه . نکته اینجاست که بعد از رسیدن به این نقطه کلاس sticky به باکس #header که در برگیرنده #menu هست اضافه خواهد شد و به وسیله این کلاس تغییرات لازم در #menu رو ایجاد خواهیم کرد .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(window).scroll(function () { var $heightScrolled = $(window).scrollTop(); var $defaultHeight = 300; if ( $heightScrolled < $defaultHeight ) { $('#header').removeClass("sticky") } else { $('#header').addClass("sticky") }}); |
خوب با توجه به توضیحاتی که داده شد فانکشن ما تقریبا کامل شده . حالا برای اینکه هنگام تعویض حالت از نوع پوزیشن قبلی به جدید افکت زیبایی داشته باشیم از سی اس اس ۳ – CSS3 استفاده خواهیم کرد .
برای ایجاد افکت کافیه ار خصوصیت transition استفاده کنیم تا تغییر حالت به نرمی صورت بگیره .
قبل از نقطه بحرانی
|
1
2
3
4
5
6
|
</pre><div id="header"><div id="menu"> ........</div></div><pre> |
بعد از رسیدن به نقطه بحرانی
|
1
2
3
4
5
6
|
</pre><div id="header" class="sticky"><div id="menu"> .........</div></div><pre> |
در حالتی که #menu در زیر شاخه کلاس sticky قرار بگیره خصوصیت پوزیشن به fixed تغییر پیدا خواهد کرد .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
#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 رو به ۱۰۰% یا مقدارهای مشابه تغییر بدید و از z-index برای تعیین موقعیت لایه ای باکس استفاده کنید . در این کلاسها فقط مواردی که ما به اونها نیاز داریم رو نوشتم و مابقی موارد و ظاهر منو ها بستگی به طراحی شما خواهد داشت . البته تقریبا در مورد تمام مواردی که در این آموزش توضیح داده شد در وب تارگت مطالب وجود داره . امیدوارم مورد استفاده قرار بگیره .
ساخت Sticky Menu یا منوی چسبنده