عصر بخیر
اغلب لازم است یک منوی افقی ایجاد شود که در سراسر عرض بلوک والد، صرف نظر از تعداد موارد موجود در آن، کشیده شود.
امروز می خواهم به شما نحوه ایجاد چنین منوی را نشان دهم.
بنابراین منوی ما به شرح زیر خواهد بود:
به عرض کامل کشیده می شود و وقتی روی آن شناور می شود خودنمایی می کند. منو از طرفین گرد است.
HTML MARKUP
|
|
...
|
برای کامل کردن منو از جداول با عرض 100% استفاده کردم. هر جدول دارای یک محفظه div آیتم های منو است. بسته به اینکه اولین، آخرین یا میانی آیتم منو یک div باشد، کلاس مربوطه تخصیص داده می شود.
هر ظرف div دارای 2 حاشیه جانبی با موقعیت مطلق است که برای نمایش صحیح لازم است. اگر از حاشیه‌های استاندارد استفاده می‌کنید، وقتی آیتم‌های منو را تغییر می‌دهید، متن 1-2 پیکسل پرش می‌کند که خوب است.
کلاس فعال مسئول آیتم منوی انتخاب شده است و آن را برجسته می کند.
در هر مورد یک عکس و متن داریم. برای اطمینان از اینکه همه اینها به شدت در وسط به صورت عمودی تراز شده است، از یک جدول استفاده می کنیم. به لطف ویژگی تراز عمودی، آیتم های منوی ما همیشه به آرامی نمایش داده می شوند و دور نمی شوند.
قوانین CSS
ابتدا، بیایید سبک هایی را برای نمایش کلی منو تنظیم کنیم:
Menu_container ( padding-top: 40px; عرض: 100%; height: 47px; border-spacing: 0px; ) .menu_container td ( vertical-align: Middle; /* vertical alignment */ ) .last_point_menu, .first_mi (menu_point_menu) عرض: 100% ارتفاع: 1px جامد #dadbda: هیچکدام; 150px; padding-left: .td.inner_table_title ( padding-top: 4px; font-weight: bold;) عمودی-ترازی: هیچکدام از متن ها: چپ ) .inner_table_title ( padding-left: 10px; text-transform: 13px; inner_table_ind. (عرض: 30 پیکسل! مهم؛ ارتفاع: 30 پیکسل! مهم؛ بالشتک چپ: 15 پیکسل؛ )
برای زیبایی، اجازه دهید گوشه های کناره های منو را گرد کنیم:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-toleft: 5px; -moz-border-radius-bottomleft: 5px; حاشیه-بالا-چپ-شعاع: 5 پیکسل حاشیه-راست: 1px. پایین-راست-شعاع: -moz-border-radius: 5px;
حالا منوی ما ظاهر زیباتری دارد:
تا اینجا نقطه اول حاشیه سمت چپ ندارد. کمی بعد درستش می کنیم
حالا بیایید افکت های شناور را برای منو اضافه کنیم.
Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (background-color: -background-8-moE-linear گرادیان (بالا، #CAE285، #9FCB56 پس زمینه: -webkit-gradient(خطی، 0 0، 0 100%, از(#CAE285)، به(#9FCB56)); #9FCB56: -o-linear-gradient(بالا، #CAE285، #9FCB56: linear-gradient (به پایین، #CAE285، #9FCB56); -color: #aec671 #9fbb62 #87ac4a: none z-index: 5000 .first_point_menu.active ( حاشیه: 1px solid #9FCB56; border-color: #aec672 #8; ) .last_point_menu ( حاشیه: 1px جامد #dadbda؛ حاشیه-سمت چپ: هیچ؛ .) حاشیه-رنگ: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( حاشیه سمت چپ: هیچ؛ )
اکنون منوی ما بسیار زیباتر به نظر می رسد، اما فعلاً برای آیتم های منوی برجسته شده مرزی نداریم. بیایید این را درست کنیم!
/* سبک‌های حاشیه‌های جانبی */ .borderLeftSecond، .borderRightSecond (نمایش: هیچکدام؛ موقعیت: مطلق؛ عرض: 1 پیکسل؛ ارتفاع: 47 پیکسل؛ رنگ پس‌زمینه: #9fbb62؛ بالا: 0 پیکسل؛ شاخص z: 1000؛ ) /* انحراف مطلق برای مرزها */ .borderLeftSecond ( سمت چپ: 0px; , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_Sle:Hover:Hover*. اولین و آخرین مورد */ .first_point_menu.active .borderLeftSecond (نمایش: هیچکدام؛ ) .last_point_menu.active .borderRightSecond (نمایش: هیچکدام؛ ) .last_point_menu:hover .borderLeftSecond (نمایش: block;)
همین!
ما یک منوی عالی در سراسر عرض بلوک والد دریافت کردیم! وقتی ماوس را نگه می‌دارید آیتم‌ها روی یکدیگر همپوشانی ندارند و طرح‌بندی پرش نمی‌کند.
یک منوی افقی لیستی از بخش های وب سایت است، بنابراین منطقی تر است که آن را در داخل عنصر قرار دهید
- و سپس استایل های CSS را روی عناصر آن اعمال کنید. این طرح منو به دلیل مزایای آشکار در موقعیت آن در یک صفحه وب رایج ترین است.نحوه ایجاد یک منوی افقی: نمونه های طرح و طراحی
نشانه گذاری HTML و سبک های اساسی برای یک منوی افقی
- آیتم منو
- آیتم منو
- آیتم منو ...
- خانه
- درباره ما
- خدمات ما
- سرویس شماره 1 ما
- سرویس شماره 2 ما
- سرویس شماره 3 ما
- سرویس شماره 4 ما
- سرویس 5
- اخبار
- مخاطب
- منو به صورت پویا ترسیم می شود.
- تورفتگی از جداکننده تا پاراگراف در همه جا یکسان است.
- طراحی زیباتر و انعطاف پذیرتر
- با یک پد vip هنگام اشاره به کنار
- با بازشوی بازشوی سطح سوم
- خانه
- درباره ما
- خدمات ما
- سرویس شماره 1 ما
- اضافه شدن به سرویس 1
- اضافه شدن به سرویس 2
- سرویس شماره 2 ما
- اضافه شدن به سرویس 3
- اضافه شدن به سرویس 4
- سرویس شماره 3 ما
- سرویس شماره 4 ما
- سرویس 5
- سرویس شماره 1 ما
- اخبار
- مخاطب
- نقشه راه
- افزونه نقشه
- اضافه برای نقشه 2
- فرم انتقادات و پیشنهادات
- نقشه راه
- کد حجم
- عدم توانایی در تعیین وضعیت فعال یک عنصر از طریق انتخابگر کلاس. این به دلیل شکستن کلمات در پاراگراف ها (در صورت وجود) رخ می دهد. راه حل این مشکل اضافه کردن یک ظرف دیگر به عناصر لیست است.
- برای منوی کشویی، به دلیل تأثیر منفی سرریز، باید کد را سفارشی کنید. در چه مرورگرهایی کار می کند؟
- بسته بندی بلوک برای منو
- خود منو، که از طریق یک لیست گلوله‌دار نمایش داده می‌شود (تگ ul)
- خوب، آیتم های منو در داخل وجود دارد، و بر این اساس، از قبل پیوندهایی در آنها وجود دارد
- vertical-align: bottom - این ویژگی لازم است تا اگر متن یک آیتم منو 2 خط داشته باشد، به طور یکنواخت نمایش داده شود. وقتی منو درست کردیم می تونید این خاصیت رو حذف کنید، بزرگنمایی کنید تا آیتم ها فشرده شده و متن به دو خط منتقل بشه و مشکل نمایش رو ببینید. ملک را برگردانید و همه چیز درست می شود.
- display: table-cell - از آنجایی که خود منوی نمایش را به عنوان یک ردیف جدول تنظیم می کنیم، منطقی است که موارد آن را به عنوان سلول در جدول نمایش دهیم. لازم است.
- عرض: خودکار - بسته به طول متن در پاراگراف، عرض به طور خودکار محاسبه می شود
- text-align: center - این فقط برای وسط متن در داخل است
- ارتفاع: 50 پیکسل - ارتفاع را روی 50 پیکسل تنظیم کنید
- خوب، border-right فقط یک حاشیه در سمت راست است، یک جداکننده برای آیتم ها
- ویژگی text-decoration زیر خط پیش‌فرض پیوندها را لغو می‌کند
- عرض: 1000 پیکسل شاید مهمترین خط باشد. باید پیوندها را تقریباً به این عرض تنظیم کنید، شاید کمتر، اما قطعا بزرگتر از وسیع ترین آیتم منوی ممکن. پهنای پیوندها 1000 پیکسل نخواهد بود، زیرا عرض آن توسط آیتم منوی li محدود می شود، که عرض آن روی خودکار تنظیم شده است، اما این امکان را فراهم می کند تا اطمینان حاصل شود که برای هر تعداد آیتم در منو، همیشه 100 مورد خواهد بود. درصد از عرض
- vertical-align: middle و display: table-cell - اولی متن را به صورت عمودی با مرکز تراز می کند و دومی نیز پیوندها را به عنوان سلول نمایش می دهد. هر دو ملک مورد نیاز است.
- فونت - خوب، این فقط مجموعه ای از تنظیمات برای فونت است. در مورد ویژگی های css برای فونت ها در این مقاله بخوانید.
به طور پیش فرض، تمام عناصر لیست به صورت عمودی مرتب می شوند و کل عرض عنصر ظرف را اشغال می کنند، که به نوبه خود کل عرض بلوک کانتینر آن را اشغال می کند.
نشانه گذاری HTML برای ناوبری افقی
یک منوی افقی که در داخل یک تگ قرار دارد، می‌تواند در داخل عنصر ... و/یا ... قرار گیرد. به لطف این، نشانه گذاری html معنای معنایی پیدا می کند و همچنین فرصتی اضافی برای قالب بندی بلوک منو فراهم می کند.
روش های مختلفی برای قرار دادن آنها به صورت افقی وجود دارد. ابتدا باید سبک های پیش فرض مرورگر را برای عناصر ناوبری بازنشانی کنید:
Ul (سبک لیست: هیچکدام؛ /*حذف نشانگرهای لیست*/ حاشیه: 0؛ /*حذف حاشیه بالا و پایین برابر با 1em*/ padding-left: 0؛ /*حذف بالشتک سمت چپ برابر با 40px*/ ) a (تزیین متن: هیچکدام؛ /*زیر خط متن پیوند را بردارید*/)
روش 1. li (نمایش: درون خطی؛)کوچک کردن عناصر لیست در نتیجه، آنها به صورت افقی قرار می گیرند و یک شکاف 0.4em در سمت راست بین آنها اضافه شده است (محاسبه شده نسبت به اندازه فونت). برای حذف آن، یک حاشیه سمت راست منفی برای li li اضافه کنید (حاشیه-راست: -4px؛) . در مرحله بعد، لینک ها را به دلخواه خود استایل می کنیم.
روش 2. li (شناور: چپ؛)شناور کردن عناصر لیست در نتیجه آنها به صورت افقی قرار می گیرند. ارتفاع بلوک ظرف ul صفر می شود. برای حل این مشکل، ما (overflow: hidden;) را به ul اضافه می کنیم، آن را گسترش می دهیم و بنابراین اجازه می دهیم عناصر شناور را در خود جای دهد. برای پیوندها، یک (نمایش: بلوک؛) اضافه کنید و به دلخواه آنها را استایل دهید.
روش 3. li (نمایش: بلوک درون خطی؛)ساخت عناصر لیست به صورت درون خطی. آنها به صورت افقی قرار دارند، مانند مورد اول، یک شکاف در سمت راست تشکیل می شود. برای پیوندها، یک (نمایش: بلوک؛) اضافه کنید و به دلخواه آنها را استایل دهید.
روش 4. ul (نمایش: flex؛)با استفاده از . در نتیجه، عناصر لیست به صورت افقی مرتب می شوند. برای لینک ها یک (نمایش: بلوک؛) اضافه می کنیم و به دلخواه استایل می دهیم.
1. منوی تطبیقی با جلوه زیر خط هنگام قرار دادن ماوس روی پیوند آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (سبک لیست: هیچکدام؛ حاشیه: 40px 0 5px؛ بالشتک: 25px 0 5px؛ تراز متن: مرکز؛ پس زمینه: سفید؛ ) .menu-main li (نمایش: inline-block;).menu- main li:after ( محتوا: "|"؛ رنگ: #606060؛ نمایشگر: inline-block; vertical-align: top; ) .menu-main li:last-child:after (محتوا: هیچ؛) .menu-main a ( متن-تزیین: هیچ، فونت-خانواده: "Ubuntu Condensed"، sans-serif؛ فاصله حروف: 2px؛ موقعیت: نسبی؛ بالشتک پایین: 20px؛ حاشیه: 0 34px 0 30px؛ اندازه قلم: 17px. text-transform: نمایش بزرگ: inline-block: color .2s .menu-main a:visited (color:#9d999d;). ) .menu-main a:before, .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ ارتفاع: 4px؛ بالا: خودکار؛ سمت راست: 50%؛ پایین: -5px؛ چپ: 50%؛ پس‌زمینه : #feb386; .8s; 0;) @media (حداکثر عرض: 550 پیکسل) ( .menu-main (padding-top: 0;).menu-main li (نمایش: block; ) .menu-main li:after (محتوا: هیچ؛) . menu-main a ( padding: 25px 0 20px; حاشیه: 0 30 پیکسل؛ ) ) 2. منوی تطبیقی برای وب سایت عروسی url @import ("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( موقعیت: نسبی؛ پس‌زمینه: #fff؛ box-shadow: inset 0 0 10px #cccc؛ ) .top-menu:before, .top-menu:after ( محتوا: ""؛ نمایش: بلوک؛ ارتفاع : 1px توپر #575350; حاشیه 57350 575350 box-shadow: 0 2px 7px #ccc; موقعیت: نسبی; (تزیین متن: هیچکدام؛ نمایشگر: بلوک درون خطی؛ حاشیه: 2 پیکسل 5 پیکسل؛ بالشتک: 6 پیکسل 15 پیکسل؛ خانواده فونت: "PT Sans"، sans-serif؛ اندازه قلم: 16 پیکسل؛ رنگ: #777777؛ حاشیه پایین : 1px جامد transition: 0.3s linear; ) .menu-main .current، .menu-main a:hover (حاشیه-شعاع: 3px؛ پس زمینه: #f3ece1؛ رنگ: #313131؛ متن-سایه: 0 1px 0 #fff؛ حاشیه-رنگ: #c6c6c6؛ ) @media (حداکثر عرض: 500 پیکسل) ( .menu-main li (نمایش: بلوک؛) ) 3. منوی scalloped پاسخگو آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (سبک لیست: هیچکدام؛ بالشتک: 0 30 پیکسل؛ حاشیه: 0؛ اندازه قلم: 18 پیکسل؛ تراز متن: مرکز؛ موقعیت: نسبی؛ پس زمینه: سفید؛ .menu-main:after ( محتوا: ""; ارتفاع: 20px: سفید 0%, rgba (255,255,0) 0 -10px ; پس‌زمینه-تکرار: تکرار-x; .menu-main li (نمایشگر: inline-block;) PT Sans Caption"، sans-serif؛ انتقال: 0.3s خطی؛ -main a:before، .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: calc(50% - 3px)؛ عرض: 6 پیکسل; :after (راست: 5px;) .menu-main a جریان:قبل، .menu-main a.current:after، .menu-main a:sover:before، .menu-main a:hover:after (تاری: 1. منو روی روبان آدرس اینترنتی import@("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menu ( حاشیه: 0 60 پیکسل؛ موقعیت: نسبی؛ پس‌زمینه: #5A394E؛ جعبه سایه: درج 1px 0 0 rgba(255,255,255,.1), ورودی -1px 0 0 rgba(255,255,255,150px), inset 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12) .top-menu:prefore; .top-menu:after; -شاخص: 100% ارتفاع: 3px .بالا- منوی بعد (پایین: 0; حاشیه بالا: 1px rgba(255,255,255)؛ .menu-main: هیچکدام: 0 حاشیه: 0. منوی اصلی: پس از آن. 8px توپر #5A394E : 18px solid #5A394E : 12px جامد rgba(255, 255, 255, 0 ) .menu- main:after ( سمت راست: -30px; حاشیه-راست: 12px جامد rgba(255, 255, 255, 0); فهرست بدون شرح»، sans-serif؛ رنگ: سفید؛ انتقال: 0.3s خطی؛ .menu-main a.current، .menu-main a:hover (پس‌زمینه: rgba(0,0,0,.2);) @media (حداکثر عرض: 680 پیکسل) ( .top-menu (حاشیه: 0;) .menu-main li (نمایش: بلوک؛ حاشیه-راست: 0; ) .menu-main:before, .menu-main:after (محتوا: هیچ؛) .menu-main a (نمایش: بلوک؛) ) 5. منوی پاسخگو با یک لوگو در وسط
آدرس @import ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( موقعیت: نسبی؛ پس‌زمینه: rgba(34،34،34،.2؛) ( محتوا: ""؛ نمایش: جدول؛ واضح: هر دو؛ ) .چپ مورد (شناور: چپ؛) .راست آیتم (شناور: راست؛).navbar-logo (موقعیت: مطلق؛ چپ: 50%؛ بالا : 50% تبدیل: translate(-50%,-50%) .menu-main a ( text-decoration: none; display: block; padding: 0 20px; font-size: 18px ; فاصله بین حروف: 2px: "Arimo"; اصلی ( padding-top: 90px; text-align: center; ) .navbar-logo ( موقعیت: مطلق؛ سمت چپ: 50%؛ بالا: 10px؛ تبدیل: translateX(-50%)) .menu-main li ( شناور: نمایشگر: inline-block; نمایش: بلوک؛) ) 6. منوی پاسخگو با لوگو در سمت چپ 
url @import ("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( پس زمینه: rgba(255,255,255,.5)؛ box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( محتوا: "" نمایشگر: جدول: هر دو ) . li (نمایش: بلوک درون خطی؛). منوی اصلی a (متن-تزیین: هیچ، نمایشگر: بلوک؛ موقعیت: نسبی؛ ارتفاع خط: 61 پیکسل؛ بالشتک سمت چپ: 20 پیکسل؛ اندازه قلم: 18 پیکسل؛ فاصله حروف : 2px font-family: "Arimo"، sans-serif color: #F73E24 linear .menu-family; سمت چپ: 50% translate(45px) translateX(6.5px): 0.3s خطی (تعریف: 1;) @media (max-width: 660px) ( .menu-main (float: none; 20 پیکسل; -6px؛) ) @media (حداکثر عرض: 600 پیکسل) ( .menu-main li (نمایشگر: بلوک؛)) ما این مجموعه را با درسی در مورد منوهای کشویی ادامه می دهیم. در مرحله بعدی یک منوی کشویی افقی انجام دهید که با استفاده از css انجام می شود.
اگر به طور تصادفی به اینجا رسیدید یا به دنبال اجرای دیگری از منوی کشویی بودید، به شما توصیه می کنم به بخش والد بروید.
این بخش یک منوی کشویی افقی را در CSS و HTML توضیح می دهد.
پیمایش صفحه:
بنابراین، وظیفه ما:
یک منوی افقی با یک لیست کشویی css (در لیست های ul li) بدون استفاده از jQuery و جاوا اسکریپت و همچنین بدون استفاده از جداول ایجاد کنید.
برنج. 2 (منوی کشویی افقی)
من 2 پوسته را در یکی ساختم تا نشان دهم قطره در سمت راست و وسط چگونه به نظر می رسد.
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
سلام. مدت زیادی است که در مورد کار html/css مطلبی ننوشته ام. اخیراً شروع کردم به چیدمان جدید و در این فرآیند به یک ترفند جالب برخوردم که به شما امکان می دهد منو را انعطاف پذیر کنید (می توانید موارد جدیدی را به آن اضافه کنید و اندازه آن افزایش نمی یابد، اما همیشه 100٪ خواهد بود. بلوک مادر). بنابراین، امروز یک منوی لاستیکی را با استفاده از CSS پیاده سازی می کنیم.
اگر برای خواندن مقاله تنبل هستید، می توانید این ویدیو را تماشا کنید. نویسنده همچنین همه چیز را به خوبی توضیح می دهد:
اولین قدم همیشه نشانه گذاری html است، بدون آن کجا خواهیم بود؟ اما در مورد ما همه چیز ساده خواهد بود:
همه چیز واضح است، این کد نشانه گذاری من است:
همه چیز استاندارد به نظر می رسد، مانند این:
حالا همه چیز را به شکل دلخواه قرار می دهیم، CSS دست به کار می شود.
مرحله 2 - سبک های اساسیدر مرحله بعد، استایل ها را به بلوک wrapper اضافه می کنم. یعنی، من حداکثر عرض را روی 600 پیکسل تنظیم می کنم (فقط برای اینکه گرفتن اسکرین شات را آسان تر کنم تا منو متناسب باشد)، و همچنین بلوک را در مرکز قرار می دهم.
بسته بندی کردن(
پس زمینه: #fff;
حداکثر عرض: 600 پیکسل؛
حاشیه: 0 خودکار;
}
حالا بیایید خود منو را بررسی کنیم. نشانگرها را از آن (برچسب ul) حذف می‌کنم، یک گرادیان خطی پس‌زمینه ایجاد می‌کنم، و مهمتر از همه، از ویژگی display: table-row استفاده می‌کنم تا ظرف منو مانند یک ردیف جدول رفتار کند. انجام این کار برای دستکاری های بیشتر مهم است.
منوی R(
پس‌زمینه: گرادیان خطی (به راست، #b0d4e3 0%,#88bacf 100%)؛
نمایش: جدول-ردیف.
list-style: هیچکدام;
}
همانطور که می بینید، کد بالا همه چیزهایی را که در مورد آن نوشتم حل کرد. به هر حال، تولید گرادینت ها با استفاده از ابزار تولید کننده گرادیان نهایی CSS راحت است. روزی دوباره درباره او خواهم نوشت.
منوی R(
vertical-align: bottom;
صفحه نمایش: جدول-سلول;
عرض: خودکار؛
text-align: center;
ارتفاع: 50 پیکسل؛
حاشیه سمت راست: 1px جامد #222;
}
تا اینجای منو نامناسب به نظر می رسد، اما اشکالی ندارد، وقت آن است که آن را به خاطر بسپارید. 
آخرین کاری که باید انجام دهید این است که لینک های داخل آیتم ها را استایل کنید. در اینجا من این کد را دارم:
منوی R li a(
text-decoration: هیچ;
عرض: 1000 پیکسل؛
ارتفاع: 50 پیکسل؛
vertical-align: وسط;
صفحه نمایش: جدول-سلول;
رنگ: #fff;
فونت: معمولی 14px Verdana;
}
و این همان چیزی است که منو در حال حاضر به نظر می رسد:
باز هم چند خط را توضیح می دهم:
به عنوان مثال، به طوری که رنگ یک آیتم منو با نگه داشتن نشانگر تغییر می کند. این را می توان به سادگی با استفاده از کلاس شبه شناور پیاده سازی کرد:
منوی R li:hover(
پس زمینه رنگ: #6bba70;
}
عالی است، منوها آماده هستند، اما ما مهمترین چیز را بررسی نکردیم - همانطور که به شما قول داده بودم چقدر لاستیکی است. خوب، من 2 مورد دیگر را به منو اضافه می کنم:
پهنای منو 600 پیکسل باقی می ماند. بقیه موارد به سادگی کمی کوچک شدند تا 2 مورد جدید را در خود جای دهند.
من یک نکته طولانی دیگر اضافه می کنم:
همانطور که می بینید، منو کمی بیشتر کوچک شده است و آیتم طولانی کاملاً عادی نمایش داده می شود. و اگر ویژگی vertical-align: bottom که به شما گفتم نبود، منو بدتر به نظر می رسید.
من منو را به سه مورد کاهش می دهم.
آیتم ها بسیار آزادتر شده اند، اما خود منو در عرض تغییر نکرده است. بنابراین ما یک منوی 100٪ لاستیکی درست کردیم!
در اصل، اگر بلوک لفاف را به جای ثابت روی حداکثر عرض تنظیم کنید، حتی نیازی به تطبیق آن نیست. در مورد من، ویژگی max-width را دارم: 600 پیکسل و وقتی عرض کمتر از 600 پیکسل شود، بلوک به سادگی همراه با صفحه کوچک می شود، بدون اینکه یک اسکرول افقی تشکیل شود.
خوب، اگر می خواهید به نحوی منو را در دستگاه های تلفن همراه یا صفحه های گسترده تغییر یا اصلاح کنید، پرسش های رسانه ای به شما کمک می کنند! در ساخت وب سایت موفق باشید!
