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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
منوی افقی قابل اسکرول در المنتور

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Avatar
داود در 02:06

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

پاسخ
Ebrahim Parsaei
Ebrahim Parsaei در 18:28

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

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

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

پاسخ
Siawash Sheikhbahaee
Siawash Sheikhbahaee در 10:26

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

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

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

پاسخ

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

نیاز به کمک دارید؟ پیام دهید