نحوه ریسپانسیو کردن منو
سلام
من میخوام یه منو بسازم که با html,css وقتی منو رو میسازم به مشکل آیکن بر میخورم اگه کسی پیشنمایش کدی رو داره لطفا برای من ارسال کنه و آیا باید از طریق بوت استرپ استفاده کنم.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام
برای رسپانسیو کردن menu باید از media query ها کمک گرفت و استفاده کرد
پیشنهاد من این هست شما در ابتدا منو را برای نسخه‌ی موبایل بسازید و بعد display آن رو none کنید
سپس یک دکمه (toggle) به صورت سه خطی (bar) در آنجا قرار دهید و با کمک js یا Jquery رخداد click آن دکمه را پیاده سازی کنید و وقتی روش کلیک شد بین display:none یا diplay:block تغییر حالت بدهد.
بعد از اتمام این کار، سپس در یک break point خاص استایل های مربوط به منو را تغییر دهید و سپس منو را برای حالت صفحه نمایش های بزرگتر آماده سازی کنید. در این صورت شما در ابتدا درگیر اضافات و حاشیه های مربوط به صفحه نمایشگر بزرگ نمی‌شوید، که به این روش mobile-first نیز گفته می‌شود.
برای دیدن نمونه، شما میتونید به codepen.io مراجعه کنید و یا در گوگل عبارت responsive pure css menu را جستجو کنید (pure css برای زمانی که قصد استفاده از جاوا اسکریپت ندارید)
برای نمونه بنده سه مورد پیدا شده را برای شما قرار می‌دهم:
https://codepen.io/AdamCCFC/pen/RrZomP
https://codepen.io/deyand/pen/pvmyjw
https://codepen.io/rugor/pen/wayJQY?page=1