طراحی منو با اسکرول افقی در موبایل توسط المنتور

منوی افقی قابل اسکرول در المنتور
4.7/5 - (12 امتیاز)

طراحی منو سایت در المنتور به راحتی و با استفاده از ویجت فهرست ناوبری قابل انجام است.

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

زمانی که حالت منو را در حالت افقی قرار می دهید، در حالت موبایل زیر هم رفته و فضای بیشتر را اشغال می کنند. همچنین ظاهار صفحه را به هم میریزد.

در این آموزش قصد داریم تا توسط کد CSS و ویجت فهرست ناوبری المنتوری، یک منوی قابل اسکرول به صورت افقی ایجاد کنیم.

منو با اسکرول افقی در موبایل

ویجت فهرست ناوبری

وارد صفحه مورد نظر شده و ویجت فهرست ناوبری را قرار دهید.

روی ویجت فهرست ناوبری کلیک کرده و تنظیمات زیر را قرار دهید:

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

منوی افقی در المنتور

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

selector ul {
display: flex;
flex-wrap: nowrap;
white-space:nowrap;
overflow-x: auto;
}

صفحه را ذخیره کنید. وارد صفحه مورد نظر شده و در حالت موبایل مشاهده کنید.

امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید، اگر مشکلی توی پیاده سازی این طرح دارید، از بخش نظرات با ما در میان بگذارید.

امتیاز دهید

4.7/5 - (12 امتیاز)

اشتراک گذاری

آخرین مقالات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=50932

فهرست مطالب

میثم دریکوندی در 21:49

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

پاسخ
Hom در 18:27

بله در حالت موبایل

پاسخ
المنتور فارسی در 21:40
Hom در 17:11

سایت خودتون منو تمام صفحه باز میشه میخوام مثل اون بشه

پاسخ
المنتور فارسی در 23:47

طبق همون آموزش انجام میشه. می تونید عرض رو کامل قرار بدید.

پاسخ
Hom در 17:09

با سلام خسته نباشید چطور میتونیم مثل منو سایت خودتون طراحی کنیم؟؟

پاسخ
المنتور فارسی در 17:14

با سلام
منو در حالت موبایل؟

پاسخ
Hom در 19:59

میشه بفرمایید چطوری میشه؟؟

پاسخ
محمد در 16:18

سلام این آموزش عالی بود خیلی دنبالش بودم ممنونم
ممکنه راهنمایی کنین چطور کنار لینک های منو chevron-left هم قرار بدیم؟
یا یک علامتی کنار لینک ها باشه که مشخص بشه باید به چپ اسکرول کرد

ممنونم ازتون

پاسخ
احسان در 16:43

سلام
راهی برای اسکرول افقی مسیر پیمایش سایت هم هست

پاسخ
المنتور فارسی در 10:39

با استفاده از این زوش نه متاسفانه

پاسخ
abc در 12:13

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

پاسخ
المنتور فارسی در 16:48

با سلام
می تونید از افزونه Elementor Custom Skin Pro استفاده کنید.

پاسخ
علیرضا در 17:01

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

پاسخ
Mahdi در 13:23

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

پاسخ
المنتور فارسی در 17:12

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

پاسخ
داود در 02:06

سلام.اگر ممکنه همین رو برای سکشن هم اموزش بدید.مثلا برای بخش پستها به همین حالت اسکرول بشه.ممنونم

پاسخ
Ebrahim Parsaei در 18:28

سلام
با تشکر از مقالات آموزشی شما
پیشنهاد میکنم لینک آنلاین مثال در درس ارائه شده در هر مقاله رو هم در اون مقاله درج کنید تا بتونیم بصورت پویا مثال رو مشاهده کنیم
متشکرم

پاسخ
المنتور فارسی در 18:56

با سلام
بسیار عالی حتما این مورد هم بررسی میشه و در آموزش ها قرار می‌گیرد.

پاسخ
Siawash Sheikhbahaee در 10:26

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

پاسخ
المنتور فارسی در 11:51

با سلام
ممنون از شما، حتما انجام خواهد شد.

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید