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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23 پاسخ

  1. سلام
    آیا امکان حذف یا تغییر استایل نشانگر اسکرول (غلطکی که زیر اسکرول بار میوفته) هست؟

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

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

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

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

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

    ممنونم ازتون

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

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

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

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

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

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *