منوی افقی تمام عرض خوب. چگونه یک منوی css واکنش گرا بسازیم؟ نحوه کشش منوی افقی به عرض هدر

سلام. برای مدت طولانی من پستی در مورد نحوه عملکرد html / css ننوشتم. اخیراً من تازه شروع به ایجاد یک طرح جدید کردم و در این فرآیند با یک ترفند جالب روبرو شدم که به شما امکان می دهد منو را لاستیکی کنید (می توانید موارد جدیدی را به آن اضافه کنید و اندازه آن افزایش نمی یابد اما همیشه 100 خواهد بود. % از بلوک والد). بنابراین، امروز ما در حال پیاده سازی یک منوی لاستیکی در css هستیم.

اگر برای خواندن مقاله تنبل هستید، می توانید این ویدیو را تماشا کنید. نویسنده همچنین همه چیز را بسیار زیبا توضیح می دهد:

اولین قدم همیشه نشانه گذاری html است که بدون آن است. اما در مورد ما، همه چیز ساده خواهد بود:

همه چیز واضح است، این کد نشانه گذاری من است:

• بند 1


• نقطه 2


• نکته 3


• مورد 4


• مورد 5

همه چیز استاندارد به نظر می رسد، مانند این:

حالا همه چیز را به شکل دلخواه در می آوریم، CSS وارد کار می شود.

در مرحله بعد، استایل ها را به بلوک wrapper اضافه می کنم. یعنی حداکثر عرض را روی 600 پیکسل قرار می دهم (فقط برای اینکه راحت اسکرین شات بگیرید تا منو جا بگیرد) و همچنین بلوک را در مرکز قرار می دهم.

بسته بندی کردن(
پس زمینه: #fff;
حداکثر عرض: 600 پیکسل
حاشیه: 0 خودکار;
}

اکنون خود منو را انتخاب می کنیم. نشانگرها را از آن حذف می کنم (از تگ ul)، گرادیان خطی پس زمینه را ایجاد می کنم و مهمتر از همه، با ویژگی display: table-row، ظرف منو را مانند یک ردیف جدول رفتار می کنم. این برای دستکاری های بیشتر مهم است.

منوی R(
پس‌زمینه: گرادیان خطی (به راست، #b0d4e3 0%,#88bacf 100%)؛
display:table-row;
list-style: هیچکدام;
}

همانطور که می بینید، کد بالا همه چیزهایی را که در مورد آن نوشتم حل کرد. به هر حال، تولید گرادینت ها با استفاده از ابزار تولید کننده گرادیان نهایی CSS راحت است. یک وقت در مورد آن خواهم نوشت.

منوی R li(
vertical-align: bottom;
نمایش: جدول-سلول;
عرض: خودکار؛
text-align: center;
ارتفاع: 50 پیکسل؛
حاشیه سمت راست: 1px جامد #222;
}

• vertical-align: bottom - این خاصیت لازم است تا اگر متن موجود در آیتم منو 2 خط داشته باشد دقیقاً نمایش داده شود. وقتی منو درست می کنیم، می تونید این ویژگی رو حذف کنید، بزرگنمایی کنید تا آیتم ها کوچک شده و متن روی دو خط بپیچید و مشکل نمایش رو ببینید. ملک را برگردانید و همه چیز درست می شود.
• display: table-cell - از آنجایی که ما خود منوی نمایش را به عنوان یک ردیف جدول تنظیم می کنیم، منطقی است که موارد آن را به عنوان سلول در جدول نمایش دهیم. لازم است.
• عرض: خودکار - بسته به طول متن در پاراگراف، عرض به طور خودکار محاسبه می شود
• text-align: مرکز فقط برای تراز کردن متن داخل در مرکز است
• ارتفاع: 50 پیکسل - ارتفاع را روی 50 پیکسل تنظیم کنید
• خوب، border-right فقط یک حاشیه در سمت راست است، چنین جداکننده ای برای آیتم ها

در حالی که منو ناخوشایند به نظر می رسد، اما اشکالی ندارد، وقت آن است که آن را به ذهن بیاورید.

آخرین کاری که باید انجام دهید این است که به پیوندهای داخل پاراگراف ها استایل بدهید. در اینجا من این کد را دارم:

منوی R li a(
text-decoration: هیچ;
عرض: 1000 پیکسل
ارتفاع: 50 پیکسل؛
vertical-align: وسط;
نمایش: جدول-سلول;
رنگ: #fff;
فونت: معمولی 14px Verdana;
}

و این همان چیزی است که منو در حال حاضر به نظر می رسد:

باز هم چند خط را توضیح می دهم:

• ویژگی text-decoration زیرخط پیش فرض را از لینک ها حذف می کند
• عرض: 1000 پیکسل شاید مهمترین خط باشد. باید پیوندها را تقریباً به همان عرض تنظیم کنید، شاید کمتر، اما همیشه بیشتر از وسیع ترین آیتم منو. پهنای پیوندها 1000 پیکسل نخواهد بود زیرا عرض آن توسط آیتم منوی li محدود می شود که عرض آن روی خودکار تنظیم شده است، اما باعث می شود هرچقدر آیتم در منو باشد، همیشه 100 باشد. درصد عرض
• vertical-align: وسط و نمایش: جدول-سلول - اولی متن را به صورت عمودی با مرکز تراز می کند و دومی نیز پیوندها را به عنوان سلول نمایش می دهد. هر دو ویژگی مورد نیاز است.
• فونت - خوب، این فقط مجموعه ای از تنظیمات برای فونت است. در مورد ویژگی های css برای فونت ها در این مقاله بخوانید.

به عنوان مثال، برای تغییر رنگ یک آیتم منو در حالت شناور. این به سادگی با استفاده از کلاس شبه شناور اجرا می شود:

منوی R li:hover(
پس زمینه رنگ: #6bba70;
}

عالی است، منوها آماده هستند، اما ما مهمترین چیز را بررسی نکردیم - همانطور که به شما قول داده بودم چقدر لاستیکی است. خوب، من 2 مورد دیگر را به منو اضافه می کنم:

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

من یک پاراگراف طولانی دیگر اضافه می کنم:

همانطور که می بینید، منو کمی بیشتر کوچک شد و مورد طولانی کاملاً عادی نمایش داده شد. و اگر ویژگی vertical-align: bottom که به شما گفتم نبود، منو بدتر به نظر می رسید.

من منو را به سه مورد کاهش می دهم.

آیتم ها بسیار آزادتر شده اند، اما خود منو در عرض تغییر نکرده است. بنابراین ما یک منوی 100٪ لاستیکی درست کردیم!

در اصل، اگر بلوک لفاف را نه ثابت، بلکه روی حداکثر عرض تنظیم کنید، حتی نیازی به تطبیق آن نیست. در مورد من، ویژگی max-width: 600px را دارم، و زمانی که عرض کمتر از 600px شود، بلوک به سادگی به دنبال صفحه کاهش می یابد، بدون اینکه یک اسکرول افقی تشکیل شود.

خوب، اگر می خواهید به طریقی منو را در دستگاه های تلفن همراه یا صفحه های گسترده تغییر دهید یا اصلاح کنید، پرسش های رسانه ای به شما کمک می کنند! در ساخت وب سایت موفق باشید!

منوی افقی لیستی از بخش های سایت است، بنابراین منطقی تر است که آن را در داخل عنصر علامت گذاری کنید

و سپس استایل های CSS را روی عناصر آن اعمال کنید. این ترتیب منو به دلیل مزایای آشکار در موقعیت آن در یک صفحه وب رایج ترین است.
نحوه ایجاد یک منوی افقی: نمونه های نشانه گذاری و طراحی نشانه گذاری HTML و سبک های اساسی برای منوی افقی

به‌طور پیش‌فرض، همه آیتم‌های فهرست به‌صورت عمودی روی هم چیده می‌شوند و عرض کامل عنصر کانتینر را می‌گیرند، که به نوبه خود تمام عرض بلوک ظرف آن را می‌گیرد.

نشانه گذاری HTML برای ناوبری افقی

• آیتم منو
• آیتم منو
• آیتم منو
...

یک منوی افقی در داخل یک تگ می تواند به صورت اختیاری در داخل یک عنصر ... و/یا ... قرار گیرد. این نشانه گذاری html به معنای معنایی و همچنین فرصتی اضافی برای قالب بندی بلوک منو می دهد.

روش های مختلفی برای قرار دادن آنها به صورت افقی وجود دارد. ابتدا باید سبک های پیش فرض مرورگر را برای عناصر ناوبری بازنشانی کنید:

Ul (لیست به سبک: هیچکدام؛ /*حذف نشانگرهای لیست*/ حاشیه: 0؛ /*حذف حاشیه بالا و پایین 1em*/ padding-left: 0؛ /*حذف بالشتک سمت چپ 40px*/) (تزیین متن: هیچکدام؛ /*زیر متن پیوند را بردارید*/)

روش 1. li (نمایش: درون خطی؛)

موارد فهرست را به صورت درون خطی قرار دهید. در نتیجه، آنها به صورت افقی مرتب می شوند، در سمت راست، یک شکاف برابر با 0.4em بین آنها اضافه می شود (محاسبه شده نسبت به اندازه فونت). برای حذف آن، یک حاشیه سمت راست منفی به li li اضافه کنید (حاشیه-راست: -4px؛) . در مرحله بعد، لینک ها را به دلخواه استایل کنید.

روش 2. li (شناور: چپ؛)

عناصر لیست را شناور می کنیم. در نتیجه آنها به صورت افقی مرتب می شوند. ارتفاع بلوک ظرف ul صفر می شود. برای حل این مشکل، (سرریز: 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. تبدیل متن: بزرگ؛ نمایشگر: بلوک درون خطی؛ انتقال: رنگ 0.2s؛ ) .menu-main a, .menu-main a:visited (رنگ: #9d999d;) .menu-main a.current, .menu- main a:hover(color: #feb386;) .menu-main a:before, .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ ارتفاع: 4px؛ بالا: خودکار؛ سمت راست: 50%؛ پایین : -5 پیکسل؛ سمت چپ: 50%؛ پس‌زمینه: #feb386؛ انتقال: 0.8 ثانیه؛ ) .menu-main a:hover:before, .menu-main .current:before (سمت چپ: 0;) .menu-main a: hover:after, .menu-main .current:after (راست: 0;) @media (حداکثر عرض: 550 پیکسل) ( .menu-main (padding-top: 0;) .menu-main li (نمایش: block; ) .menu-main li:after (محتوا: هیچ؛) .menu-main a ( padding: 25px 0 20px; حاشیه: 030 پیکسل؛ ) ) 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؛ حاشیه بالا: 3px جامد #575350؛ حاشیه-پایین: 1px جامد #575350؛ حاشیه-پایین: 2px؛ ).بالا-menu:after ( حاشیه-پایین: 3px جامد #575350؛ حاشیه-بالا: 1px جامد #575350؛ box-shadow: 0 2px 7px #cccc؛ margin-top: 2px; ) .menu-main (لیست سبک: هیچکدام؛ بالشتک: 0 30px؛ حاشیه: 0؛ اندازه قلم: 18px؛ متن-تراز: مرکز؛ موقعیت: نسبی؛ ) .menu-main:before, .menu-main:after ( محتوا: "\25C8"؛ ارتفاع خط: 1؛ موقعیت: مطلق؛ بالا: 50%؛ تبدیل: translateY(-50% ) .menu-main:before (سمت چپ: 15px;) .menu-main:after (راست: 15px;) .menu-main li (نمایش: inline-block; padding: 5px 0; ) .menu-main a (تزیین متن: هیچکدام؛ نمایشگر: بلوک درون خطی؛ حاشیه: 2 پیکسل 5 پیکسل؛ بالشتک: 6 پیکسل 15 پیکسل؛ خانواده فونت: "PT Sans"، sans-serif؛ اندازه قلم: 16 پیکسل؛ رنگ: #777777؛ حاشیه پایین : 1px جامد شفاف؛ انتقال: 0.3s خطی. ) .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 ( محتوا: ""؛ موقعیت: مطلق؛ عرض: 100%؛ ارتفاع: 20 پیکسل؛ سمت چپ: 0؛ پایین: -20 پیکسل؛ پس‌زمینه: گرادیان شعاعی (سفید 0٪، سفید 70٪، rgba (255،255،255،0) 70٪، rgba( 255,255,255,0) 100%) 0 -10px؛ اندازه پس‌زمینه: 20px 20px؛ پس‌زمینه-تکرار: تکرار-x؛ ) .menu-main li (نمایش: inline-block;) .menu-main a (متن-تزیین: هیچکدام؛ صفحه نمایش: بلوک درون خطی؛ حاشیه: 0 15 پیکسل؛ پد: 10 پیکسل 30 پیکسل؛ خانواده فونت: "PT Sans Caption"، sans-serif؛ رنگ: #777777؛ انتقال: 0.3s خطی؛ موقعیت: نسبی؛ .menu -main a:before، .menu-main a:after ( محتوا: ""؛ موقعیت: مطلق؛ بالا: calc(50% - 3px)؛ عرض: 6px؛ ارتفاع: 6px؛ حاشیه-شعاع: 50%؛ پس زمینه: #F58262؛ کدورت: 0؛ انتقال: 0.5s ease-in-out؛ ) .menu-main a:before (سمت چپ: 5px؛) .menu-main a:after (راست: 5px؛) .menu-main a. جریان: قبل، .menu-main a.current:after، .menu-main a:hover:fore، .menu-main a:hover:after (تاری: 1;) .menu-main a.current، .menu- main a:hover (رنگ: #F58262;) @media(max-width:680px) (.menu-main li (نمایشگر: block;) ) 4. منوی ریبون پاسخگو
• کار کنید
• در باره
• وبلاگ
• مخاطب
آدرس اینترنتی 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); ) ؛ z-index: 2؛ سمت چپ: 0؛ 0% x عرض: 10 منوی بالا:قبل (بالا: 0؛ حاشیه-پایین: 1px خط چین rgba(255,255,255,.2); ) .top-menu:after (پایین: 0؛ حاشیه بالا: 1px rgba خط چین (255,255,255,.2); .menu-main (لیست-سبک: هیچکدام؛ بالشتک: 0؛ حاشیه: 0؛ متن-تراز: مرکز؛) عرض: 50 پیکسل؛ ارتفاع: 0؛ بالا: 8 پیکسل؛ حاشیه بالا: 18 پیکسل جامد #5A394E؛ حاشیه پایین: 18 پیکسل جامد # 5A394E؛ تبدیل: چرخش (360 درجه؛ شاخص z: -1؛ ) .menu-main: قبل از ( چپ: -30 پیکسل؛ حاشیه-چپ: 12 پیکسل rgba جامد (255، 255، 255، 0؛ ) ، 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 (متن-تزیینات: هیچکدام؛ نمایشگر: بلوک؛ ارتفاع خط: 80 پیکسل؛ پد: 0 20 پیکسل؛ اندازه قلم: 18 پیکسل ؛ فاصله حروف: 2px؛ فونت-خانواده: "Arimo"، sans-serif، وزن فونت: پررنگ، رنگ: سفید، انتقال: 0.3s خطی؛ ) .menu-main a:hover (پس زمینه: rgba(0, 0,0,.3)؛) @media (حداکثر عرض: 830 پیکسل) ( .menu-main ( padding-top: 90px; text-align: center; ) ;بالا: 10 پیکسل؛ تبدیل: translateX(-50%)؛ .menu-main li ( شناور: هیچ؛ نمایشگر: inline-block; ) .menu-main a (ارتفاع خط: عادی؛ بالشتک: 20px 15px؛ فونت -size: 16px; ) ) @media (حداکثر عرض: 630px) (.menu-main li (نمایشگر: block;) ) 6. منوی پاسخگو با لوگو در سمت چپ
• کار کنید
• در باره
• داستان
• فروشگاه
• آلبوم عکس
• مخاطب
آدرس @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 ( محتوا: "" ;نمایش: جدول؛ پاک: هر دو؛ .navbar-logo (نمایش: inline-block;) .menu-main (لیست-سبک: هیچکدام؛ حاشیه: 0؛ بالشتک: 0؛ شناور: سمت راست؛) .menu-main li (نمایش: بلوک درون خطی؛) .menu-main a (متن-تزیین: هیچکدام؛ نمایش: بلوک؛ موقعیت: نسبی؛ ارتفاع خط: 61 پیکسل؛ بالشتک سمت چپ: 20 پیکسل؛ اندازه قلم: 18 پیکسل؛ فاصله حروف : 2px؛ font-family: "Arimo"، sans-serif؛ وزن قلم: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( محتوا: ""؛ عرض: 9px; ارتفاع: 9 پیکسل؛ پس‌زمینه: #F73E24؛ موقعیت: مطلق؛ چپ: 50 درصد؛ تبدیل: چرخش (45 درجه) translateX (6.5 پیکسل؛ کدورت: 0؛ انتقال: 0.3 ثانیه خطی؛ ) .menu-main a:hover:before (تاری: 1;) @media (حداکثر عرض: 660 پیکسل) ( .menu-main ( شناور: هیچکدام؛ padding-top: 20px; ) .top-menu (تراز متن: مرکز؛ padding: 20px 0 0 0; ) .menu-main a (padding: 0 10px;) .menu-main a:before (تبدیل: rotate(45deg) translateX(-6px);) ) @media (حداکثر عرض: 600px) (.menu-main li (نمایش: بلوک؛) )

ما این مجموعه را با درسی در مورد منوهای کشویی ادامه می دهیم. در ردیف بعدی یک منوی کشویی افقی خودت انجام بده در css است.

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

در این بخش منوی کشویی افقی در CSS و HTML توضیح داده می شود.

پیمایش صفحه:

بنابراین، وظیفه ما:

ایجاد منوی کشویی افقی css (در لیست های ul li) بدون استفاده از jQuery و Javascript و همچنین بدون استفاده از جداول

در کد
منوی کشویی افقی html

اول از همه، قبل از شروع کدنویسی، باید یک قالب html برای منو بسازیم.

با توجه به اینکه در حال ساخت یک منوی جهانی هستیم، می خواهم آن را تا حد امکان شبیه به خروجی منوی وردپرس کنم. به نظر من، این یکی از ساده ترین و همه کاره ترین کدهای منوی Html است. به نظر می رسد این است:

• خانه
• درباره ما
• خدمات ما
  • سرویس شماره 1 ما
  • سرویس شماره 2 ما
  • سرویس شماره 3 ما
  • سرویس شماره 4 ما
  • سرویس 5
• اخبار
• مخاطب

همانطور که از کد می بینید، منوی کشویی ما در لیست های ul و li پیاده سازی می شود. منو بدون استایل CSS به این صورت است:

بیایید بگوییم که زشت به نظر می رسد، مانند یک لیست معمولی. در مرحله بعد، باید این منو را با سبک های CSS تزئین کنیم.

منوی کشویی افقی CSS

سبک های CSS برای منوهای کشویی و موارد دیگر به عنوان هوا ضروری هستند. پس از همه، تب کشویی بر اساس شبه کلاس:hover ساخته شده است.

برای منوی کشویی افقی، به سبک های زیر نیاز داریم:

#menu1( position:relative; display:block; عرض:100%; height: auto; z-index:10; ) #menu1 ul( position:relative; display:block; margin:0px; padding:0px; عرض:100 %؛ ارتفاع: خودکار؛ فهرست-سبک: هیچ‌کدام؛ پس‌زمینه:#F3A601؛ ) #menu1 > ul::after( display:block; عرض:100%؛ ارتفاع: 0px؛ پاک:هردو؛ محتوا:" "; ) # menu1 ul li( موقعیت: نسبی؛ نمایش: بلوک؛ شناور: چپ؛ عرض: خودکار؛ ارتفاع: خودکار؛ ) #menu1 ul li a (نمایش: بلوک؛ پد: 9 پیکسل 25 پیکسل؛ 0 پیکسل 25 پیکسل؛ اندازه قلم: 14 پیکسل؛ فونت- خانواده: Arial, sans-serif؛ رنگ: #ffffef؛ قد خط: 1.3em؛ متن-تزیین: هیچکدام؛ وزن فونت: پررنگ؛ تبدیل متن: بزرگ؛ ارتفاع: 36 پیکسل؛ اندازه جعبه: حاشیه-جعبه. ) #menu1 ul li > a:hover، #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; )

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

#menu1 ul li ul( موقعیت: مطلق؛ بالا: 36 پیکسل؛ سمت چپ: 0 پیکسل؛ نمایشگر: هیچ؛ عرض: 200 پیکسل؛ پس زمینه: #EBBD5B؛ ) #menu1 ul li:hover ul(نمایش:بلاک؛)/*این خط پیاده سازی می کند مکانیزم حذف*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; عرض: 100%؛ اندازه جعبه:حاشیه-جعبه؛ حاشیه-بالا:1px جامد #ffffff; ) #menu1 اول لی اول لی:فرست-فرزند a(border-top:0px;) #menu1 ul li ul li a:hover( پس زمینه:#FDDC96؛ رنگ:#6572BC؛ )

حالا تمام. مکانیسم کشویی خود در یک خط پیاده سازی می شود.

پوست را با این منو ببینید:

برنج. 2 (منوی کشویی افقی)

در زیر نمایشی از عملکرد منوی کشویی و همچنین لینکی برای دانلود کد منبع وجود دارد. (دمو به صورت کشویی روی این صفحه باز می شود، نیازی به کلیک بر روی باز کردن در پنجره جدید 🙂 یا استفاده از چرخ ماوس نیست)

منوی کشویی افقی تمام عرض

بسیاری از شما می توانید مرا سرزنش کنید و بگویید که چنین منوهایی همانطور که در بالا نشان دادم سلامی از گذشته است و تا حدی حق با شماست، اگرچه من با طرح های تازه ای با چنین منوهایی روبرو شده ام.

امیدوارم مثال بالا را دانلود کرده باشید. Html برای ما یکسان است، اما ما CSS را به طور کامل تغییر خواهیم داد. شما به سادگی می توانید کد CSS را از اینجا بگیرید و آن را در نمونه دانلود شده قرار دهید یا ببینید در حالت نمایشی چگونه کار می کند.

#conteiner( عرض: 1000 پیکسل؛ ارتفاع: خودکار؛ حاشیه: 0 پیکسل خودکار؛ padding-top: 10 پیکسل؛ ) #menu1( موقعیت: نسبی؛ نمایشگر: بلوک؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ شاخص z: 10؛ ) #menu1 ul( موقعیت: نسبی؛ نمایش: بلوک؛ حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ سبک فهرست: هیچ؛ پس‌زمینه: #F3A601؛ ) #menu1 > ul( تراز کردن متن: توجیه؛ اندازه فونت: 1 پیکسل؛ ارتفاع خط: 1 پیکسل؛ ) #menu1 > ul::after( display:inline-block; عرض:100%؛ ارتفاع:0px; محتوا:" "; ) #menu1 ul li( position :relative; display:inline-block; عرض:auto; ارتفاع:auto;Text-align:top; text-align:left; ) #menu1 ul li a(نمایش:block; padding:9px 35px 0px 35px;اندازه قلم :14px؛ font-family:Arial, sans-serif؛ color:#ffffef؛ line-height:1.3em؛ text-decoration:none؛ font-weight:bold; text-transform: بزرگ؛ ارتفاع:36px؛ اندازه جعبه :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; چپ :0px; نمایش: هیچ عرض: خودکار; پس زمینه:#EBBD5B; white-space:nowrap; ) #menu1 ul li:last-child ul(/*آخرین مورد به سمت راست لنگر می‌یابد*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*این خط حذف مکانیسم*/ #menu1 ul li ul li( display:block; عرض: auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width :100% ؛ اندازه جعبه:حاشیه-جعبه؛ حاشیه-بالا:1px جامد #ffffff; ) #menu1 اول لی اول لی:فرست-فرزند a(border-top:0px;) #menu1 ul li ul li a:hover ( پس زمینه: #FDDC96؛ رنگ: #6572BC؛ )

همچنین، این مثال با مثال اول از این جهت متفاوت است که منوی کشویی، خود کشویی، بسته به عرض همه آیتم‌های منو کشیده می‌شود.

برای آیتم های منوی بسیار طولانی، این گزینه ممکن است خیلی راحت نباشد، زیرا آنها از محدوده خارج می شوند. برای غیرفعال کردن این ویژگی، کافی است ویژگی "white-space: nowrap;" را جستجو کنید. انتخابگر #menu1 ul li ul و حذف آن.

در زیر می توانید یک نسخه نمایشی را مشاهده کنید یا منبع منوی کشویی افقی را دانلود کنید:

بدون جداکننده، این منو به نظر می رسد. جداکننده ها را می توان به صورت دستی به html اضافه کرد، اما اگر یک CMS مانند وردپرس دارید، اضافه کردن آن به صورت دستی چندان راحت نیست.

منوی کشویی افقی با جداکننده

ده ها گزینه در مورد نحوه اضافه کردن یک نوار (جداکننده) بین آیتم های منو با استفاده از CSS خالص وجود دارد. گزینه‌هایی که از::before یا::after یا بسیار ساده‌تر حاشیه چپ، حاشیه-راست استفاده می‌کنند، تکرار نمی‌کنم.

موقعیت‌هایی وجود دارد که چیدمان آنقدر شگفت‌انگیز ساخته شده است که jquery ضروری است.

کد Html ما یکسان باقی می ماند، ما فقط کتابخانه jQuery و فایلی را که در همان ابتدا از آن استفاده می کند شامل می شود:

درست بعد از

همانطور که متوجه شدید، باید یک فایل ایجاد کنید script-menu-3.jsو این کد کوچک را در آنجا قرار دهید:

$(document).ready(function()($("#menu1 > ul > li:not(:last-child)").after(" "); ));

استایل‌های CSS برای چنین منویی باید همان‌طور که هستند باقی بمانند، + این قطعه را در انتها بیندازید:

#menu1 ul li.razd(ارتفاع:28px؛ عرض:1px؛ پس‌زمینه:#ffffff؛ margin-top:4px؛ )

چنین منوی کشویی افقی با جداکننده در jQuery به شکل زیر خواهد بود:


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

مزایای چنین راه حلی عبارتند از:

• منو به صورت پویا کشیده می شود.
• تورفتگی از جداکننده تا پاراگراف در همه جا یکسان است.
• طراحی زیباتر و انعطاف پذیرتر
منوی کشویی لایه‌ای افقی CSS+HTML

از آنجایی که ما در مورد منوهای کشویی چند سطحی در شناور صحبت می کنیم، احتمالاً ارزش تقسیم آنها به زیر گروه ها را دارد:

• با ویپاداشکا هنگام اشاره به پهلو
• با لانژ پاپ آپ سطح سوم

در مثال‌هایم، یک منوی چند سطحی CSS را برای 3 سطح نشان می‌دهم، سپس فکر می‌کنم حدس زدن آنچه باید انجام شود دشوار نخواهد بود.

منوی کشویی چند سطحی با vipad در کناری در حالت شناور

برای شروع، باید کمی html خود را اصلاح کنیم. چند خط برای سطح 3 در آنجا اضافه می شود:

• خانه
• درباره ما
• خدمات ما
  • سرویس شماره 1 ما
    • اضافه شدن به سرویس 1
    • اضافه شدن به سرویس 2
  • سرویس شماره 2 ما
    • اضافه شدن به سرویس 3
    • اضافه شدن به سرویس 4
  • سرویس شماره 3 ما
  • سرویس شماره 4 ما
  • سرویس 5
• اخبار
• مخاطب
  • نقشه راه
    • افزونه نقشه
    • اضافه برای نقشه 2
  • فرم انتقادات و پیشنهادات

#conteiner( عرض: 1000 پیکسل؛ ارتفاع: خودکار؛ حاشیه: 0 پیکسل خودکار؛ padding-top: 10 پیکسل؛ ) #menu1( موقعیت: نسبی؛ نمایشگر: بلوک؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ شاخص z: 10؛ ) #menu1 ul( موقعیت: نسبی؛ نمایش: بلوک؛ حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ سبک فهرست: هیچ؛ پس‌زمینه: #F3A601؛ ) #menu1 > ul( تراز کردن متن: توجیه؛ اندازه فونت: 1 پیکسل؛ ارتفاع خط: 1 پیکسل؛ ) #menu1 > ul::after( display:inline-block; عرض:100%؛ ارتفاع:0px; محتوا:" "; ) #menu1 ul li( position :relative; display:inline-block; عرض:auto; height:auto; عمودی-align:top; text-align:left; ) #menu1 ul li.razd( height:28px; عرض:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a(نمایش:block; padding:9px 45px 0px 45px;اندازه قلم:14px؛ font-family:Arial, sans-serif; color:#ffffef; ارتفاع خط:1.3 em؛ text-decoration: هیچ؛ فونت-وزن: درشت؛ تبدیل متن: بزرگ؛ ارتفاع: 36 پیکسل؛ اندازه جعبه: border-box؛ ) #menu1 ul li > a:hover, #menu1 ul li:hover > a ( پس زمینه: #EBBD5B; color:#2B45E0; ) #menu1 ul li ul( موقعیت: مطلق؛ بالا: 36 پیکسل؛ سمت چپ: 0 پیکسل؛ نمایش: هیچ؛ عرض: خودکار؛ پس‌زمینه: #EBBD5B؛ فضای سفید:nowrap؛ ) #menu1 > ul > li:last-child > ul(/*آخرین مورد به سمت راست متصل می شود*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*این خط مکانیسم حذف را پیاده سازی می کند*/ #menu1 ul li ul li( display:block; عرض: auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; عرض:100%;sizing box:border -box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li: hover > a( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; left:100%; display:none; background:#fddc96; ) #menu1 > ul > li:last -child > ul ul(چپ: خودکار؛ راست: 100%؛) #menu1 ul li ul li ul a(color:#F38A01;)

فایل‌های jQuery مانند مثال قبلی کپی می‌شوند. تصمیم گرفتم جداکننده ها را ترک کنم تا منو حداقل کمی بهتر به نظر برسد. البته بدون آنها ممکن است.

به این شکل اتفاق افتاد:
من 2 پوسته را در یکی ساختم تا نشان دهم لانژ در سمت راست و وسط چگونه به نظر می رسد.

در زیر می توانید دمو را ببینید و نمونه آن را دانلود کنید:

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

کمی روغن در عنوان ظاهر شد، اما کار خواهد کرد، نکته اصلی کد است.

ماهیت این مثال ایجاد یک منوی بازشوی افقی با عرض کامل با یک منوی کشویی تمام عرض + چند سطحی است.

من کد HTML را تغییر نمی دهم، می توان آن را از مثال قبلی گرفت. جداکننده ها در jQuery نیز باقی مانده اند.

فقط CSS به طور کامل تغییر می کند:

#conteiner( عرض: 1000 پیکسل؛ ارتفاع: خودکار؛ حاشیه: 0 پیکسل خودکار؛ padding-top: 10 پیکسل؛ ) #menu1( موقعیت: نسبی؛ نمایشگر: بلوک؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ شاخص z: 10؛ ) #menu1 ul( موقعیت: نسبی؛ نمایش: بلوک؛ حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ عرض: 100 درصد؛ ارتفاع: خودکار؛ سبک فهرست: هیچ؛ پس‌زمینه: #F3A601؛ ) #menu1 > ul( تراز کردن متن: توجیه؛ اندازه فونت: 1 پیکسل؛ ارتفاع خط: 1 پیکسل؛ ) #menu1 > ul::after( display:inline-block; عرض:100%؛ ارتفاع:0px; محتوا:" "; ) #menu1 ul li( position :relative; display:inline-block; عرض:خودکار؛ ارتفاع:خودکار؛ تراز عمودی:بالا؛ تراز متن:چپ؛ ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( ارتفاع :28px؛ عرض: 1px؛ پس‌زمینه:#ffffff؛ margin-top:4px؛ ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- سریف؛ رنگ:#ffffef؛ ارتفاع خط: 1.3em؛ نوشتار-تزیین: هیچکدام؛ وزن فونت: پررنگ؛ تبدیل متن: حروف بزرگ؛ ارتفاع: 36 پیکسل؛ اندازه جعبه: حاشیه-جعبه؛ ) #menu1 ul li > a:hover، #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( موقعیت: مطلق؛ بالا: 36 پیکسل؛ چپ: 0 پیکسل؛ نمایش: هیچ؛ عرض: 100%؛ پس‌زمینه: #EBBD5B؛ ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*این خط مکانیسم حذف را پیاده سازی می کند*/ #menu1 ul li ul li( نمایش :block; عرض:30%; float:left; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing: border -box; ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( پس زمینه:#FDDC96 ؛ color:#6572BC; ) #menu1 ul li ul li ul(بالا:0px؛ سمت چپ:100%؛ نمایش:هیچکدام؛ پس زمینه:#fddc96؛ z-index:15; ) #menu1 ul li ul li ul li (نمایش : بلوک؛ شناور: هیچ؛ عرض: 100%؛) #menu1 ul li ul li ul a(رنگ:#F38A01؛ حاشیه بالا: 1px جامد #ffffff؛ )

منو به این صورت خواهد بود: تنها نکته این است که سایت باید فضای کافی داشته باشد، زیرا آخرین مورد در سمت راست جایی برای انصراف ندارد. این مشکل را می توان از طریق: فرزند nام حل کرد، اما من حصار باغ را به خود زحمت ندادم.

مشاهده نسخه نمایشی منوی کشویی چند سطحی افقی:

همانطور که ممکن است متوجه شده باشید: صفحه زیرین نیز عرض کامل دارد. به این ترتیب لانژها در چندین بلوک ساخته می شوند.

این همه برای من است، امیدوارم حداقل یکی از نمونه های من برای شما مناسب باشد. با تشکر از توجه شما.

هم به نفع من و هم آنهاست 🙂 .

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

همچنین به شما توصیه می کنم از صفحه اصلی https://website/vypadayushhee-menu/ دیدن کنید، تمام نمونه ها و انواع منوهای کشویی در آنجا جمع آوری شده است.

عصر بخیر

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

امروز می خواهم به شما نشان دهم که چگونه یک چنین منویی ایجاد کنید.

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

به عرض کامل کشیده می شود، وقتی ماوس را نگه می دارید برجسته می شود. منو از طرفین گرد است.

HTML MARKUP

...

خانه

خبر جالب

یکی دیگر از آیتم های منو!

برای کامل کردن منو از جداول با عرض 100% استفاده کردم. هر جدول دارای یک آیتم منوی ظرف است. بسته به اینکه به اولین، آخرین یا میانی آیتم منو - 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%؛ ارتفاع: 47 پیکسل؛ حاشیه: 1px توپر #dadbda؛ z-index: 1000؛ موقعیت: نسبی؛ حاشیه سمت چپ: هیچکدام؛ .inner_table (عرض: 100%؛ ارتفاع: 100%؛ ) .inner_table td ( بالشتک: 0px؛ تراز عمودی: وسط؛ حاشیه: هیچ؛ تراز نوشتاری: چپ؛ عرض: 150 پیکسل؛ padding-left: 4px؛ ) .td.inner_table_title (بالا padding: 4px؛ وزن قلم: پررنگ؛ ) .td.inner_table_img ( عرض: 40 پیکسل! مهم؛ ) .inner_table_menu ( ارتفاع: 100%؛ بالشتک: 0 پیکسل؛ تراز عمودی: وسط؛ حاشیه: هیچ؛ تراز متن: چپ؛ ) .inner_table_title ( padding-px: 1 padding-right: 10px؛ تبدیل متن: بزرگ؛ ارتفاع خط: 13px؛ ) .inner_table_menu td.inner_table_img (عرض: 30px!مهم؛ ارتفاع: 30px!مهم؛ padding-left: 15px؛ )

برای زیبایی، گوشه های کناری منو را گرد کنید:

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 پیکسل؛ حاشیه-پایین-چپ-شعاع: 5 پیکسل؛ حاشیه-راست: 1px جامد #dadbda؛ ) .last_point_menu ( -webkit-border-top-right-radius: 5px; -webkit-border -پایین-راست-شعاع: 5px؛ -moz-border-radius-to-right: 5px؛ -moz-border-radius-bottomright: 5px؛ حاشیه-بالا-راست-شعاع: 5px؛ حاشیه-پایین-راست-شعاع: 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%, from(#CAE285)، به (#9FCB56))؛ تصویر پس‌زمینه: -webkit-linear -gradient(بالا، #CAE285، #9FCB56)؛ تصویر پس‌زمینه: -o-linear-gradient (بالا، #CAE285، #9FCB56)؛ تصویر پس‌زمینه: خطی-gradient (به پایین، #CAE285، #9FCB56). حاشیه: 1 پیکسل جامد #9FCB56؛ رنگ حاشیه: #aec671 #9fbb62 #87ac4a؛ حاشیه سمت چپ: هیچکدام؛ شاخص z: 5000؛ ) /* حاشیه های کاری روی شناور*/ .first_point_menu ( حاشیه: 1px جامد #dadbda؛ ) .first_point_menu:hover, .first_point_menu.active ( حاشیه: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; . ( حاشیه: 1px جامد #9FCB56؛ حاشیه سمت چپ: هیچ. حاشیه-رنگ: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( حاشیه سمت چپ: هیچ؛ )

اکنون منوی ما بسیار زیباتر به نظر می‌رسد، اما در حال حاضر حاشیه‌هایی برای آیتم‌های منو انتخاب شده نداریم. بیا درستش کنیم!

/* سبک‌های حاشیه‌های جانبی */ .borderLeftSecond، .borderRightSecond (نمایش: هیچ‌کدام؛ موقعیت: مطلق؛ عرض: 1 پیکسل؛ ارتفاع: 47 پیکسل؛ رنگ پس‌زمینه: #9fbb62؛ بالا: 0 پیکسل؛ شاخص z: 1000؛ ) /* افست های مطلق برای مرزها */ .borderLeftSecond ( چپ: 0px; ) .borderRightSecond (راست: -1px; ) /* نشان دادن مرزها برای اشیاء فعال و شناور شده */ .active .borderLeftSecond، .active .borderRightSecond > .mi. borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond (نمایش: block; .) /* handle case case of first and last. نمایش: هیچ؛ ) .last_point_menu.active .borderRightSecond (نمایش: هیچکدام؛ ) .last_point_menu:hover .borderLeftSecond (نمایش: مسدود؛ )

همین!

ما یک منوی عالی دریافت کردیم که به کل عرض بلوک والد کشیده شد! هنگام نگه داشتن ماوس، نقاط روی یکدیگر روی هم قرار نمی گیرند و طرح بندی نمی پرد.