یونس بهادری
4 سال پیش توسط یونس بهادری مطرح شد
1 پاسخ

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

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


html_css
تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
ایمان
تخصص : ادمین شبکه
@iman 4 سال پیش آپدیت شد
3

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


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

ورود یا ثبت‌نام