ساخت منوی چسبان با CSS

یکی از ترندهای طراحی قالب HTML ایجاد یک منوی چسبان یا به اصطلاح Sticky بود که هنوزهم این نوع منو در دستور کار طراحان قرار دارد و همچنان سایت‌هایی همچون دیجی کالا نیز از این نوع منو استفاده می‌کنند .

سهولت برای دسترسی کاربر در هر قسمتی از صفحه به منو ، ازجمله دلایل اصلی جهت ایجاد منوی Sticky در سایت است . طراحی و ایجاد این نوع منو دو روش اصلی دارد که حالت اول آن به کمک جاوا اسکریپت بوده و حالت دوم توسط CSS است . شاید با خودتان سئوال کنید که چگونه می‌توان توسط CSS بدون اینکه اسکرول صفحه را درنظر گرفت ، یک منوی Sticky ساخت ؟ پس اول لازم است انواع منوی چسبان و روش کار آنها را بررسی کنیم تا یک مثال قابل درک و ساده را خدمتتان آموزش دهیم !

حالت اول ساخت منوی Sticky به کمک جاوا اسکریپت

یکی از حالت‌هایی که می‌توان توسط آن منوی Sticky داخل سایت ایجاد کرد به کمک JS است . در این حالت ، روش کار به این شکل است که وقتی کاربر کمی داخل صفحه به سمت پایین اسکرول کرد ، منو ظاهر خواهد شد . به عبارتی منوی سایت از همان ابتدای اسکرول کاربر به سمت پایین صفحه چسبان نیست و کمی بعد از اینکه کاربر به سمت پایین اسکرول کرد ( مثلا 500 پیکسل ) منوی سایت ناگهان ظاهر خواهد شد .

در این روش شما لازم است تا ابتدا از رویداد window scroll کمک بگیرید ، و سپس تعیین کنید که اگر مقدار اسکرول از بالای صفحه ، یا همان scroll top صفحه به اندازه مثلا 500px شد ، به منوی مدنظر شما یک کلاس اضافه شود . تصور کنید که منوی شما در حالت اول به این صورت است :

<nav class="Main-Menu"></nav>

زمانی که دستور جاوا اسکریپت شما اجرا شد ، یک کلاس بصورت خودکار و طبق دستوری که نوشتید به این قسمت اضافه شده و کد شما بصورت زیر خواهد بود :

<nav class="Main-Menu Sticky-Menu"></nav>

اما اکنون داخل کلاس Sticky-Menu چه مواردی نوشته شده است ؟ این کلاس باید مقدار position منو را بصورت fix تغییر دهد تا بتوانیم منو را در بالا نگه داریم پس شاید یکی از دستورات برای این کلاس بصورت زیر باشد :

.Sticky-Menu {
	position:fixed;
	top:0;
	right:0;
	width:100%;
	z-index:10;
}

پس اگر دستور JS مورد نظر برای این روند را به درستی بنویسیم ، پس از اسکرول به میزان 500 پیکسل و اضافه شدن کلاس دوم به منو ، حالت چسبان ایجاد خواهد شد . همچنین باید حالت برعکس منو را نیز درنظر داشته باشیم .

به این معنی که وقتی اسکرول از بالا کمتر از 500 پیکسل شد ( یعنی یا هنوز اسکرول به 500 نرسیده یا کاربر از پایین صفحه به سمت بالا در حالت بازگشت است و مقدار اسکرول از بالا کمتر از 500 پیکسل خواهد شد ) ، در این شرایط باید کلاس Sticky-Menu را از تگ nav حذف کنیم که روند نمایش و عدم نمایش منوی چسبان به درستی کار کند .

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

حالت دوم ساخت منوی Sticky به کمک CSS

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

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

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

.Main-Menu {
	position:sticky;
	top:0;
	z-index:10;
}

در این حالت شما بدون درگیری باکدهای مختلف ، یک منو Sticky دارید . توجه کنید که شاید کلاس Main-Menu شما دستورات دیگری نیز برای استایل داشته باشد . درهرصورت شما باید سه مقدار بالا را به بخشی که قصد دارید چسبان شود اضافه کنید تا منوی Sticky برای شما ایجاد شود .

چرا position:sticky برای من کار نمی‌کند ؟

شاید شما به کمک دستور بالا منوی استیکی بسازید اما اصلا هنگام اسکرول کردن ، منوی شما به بالای صفحه فیکس نشود ! این مشکل تنها یک دلیل دارد که شما از آن بیخیر هستید . دستور position:sticky با دستور overflow:hidden تداخل دارد ! به عبارتی این دو دشمن هم هستند .

اگر برای تگ body یا html از دستور overflow:hidden استفاده کرده باشید ( جهت سرپوش گذاشتن روی مشکلات overflow افقی در طراحی و خصوصا طراحی برای موبایل ) با حالت استیکی خداحافظی کنید .

همچنین اگر برای بخش مدنظر که قصد دارید چسبان شود از دستور overflow:hidden استفاده شده باشد ، حالت sticky با دستور position:sticky به هیچ عنوان اجرا نخواهد شد . این همان فوت کوزه گری در طراحی است که باید از آن اطلاع داشته باشید . امید است این مقاله نیز برای شما مفید واقع شده باشد .

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا