description

نحوه ریسپانسیو کردن منو

- 7 ماه پیش
توسط مستر X آپدیت شد
یونس بهادری ( 148 تجربه )
7 ماه پیش

سلام
من میخوام یه منو بسازم که با html,css وقتی منو رو میسازم به مشکل آیکن بر میخورم اگه کسی پیشنمایش کدی رو داره لطفا برای من ارسال کنه و آیا باید از طریق بوت استرپ استفاده کنم.

بهترین پاسخ انتخاب شده توسط یونس بهادری
مستر X
7 ماه پیش

سلام
برای رسپانسیو کردن 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

مستر X ( 431 تجربه )
7 ماه پیش

سلام
برای رسپانسیو کردن 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

برای ارسال پاسخ باید وارد سایت شوید