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

یک طرح بندی منوی سایت نسبتاً رایج، زمانی که ظرف با آن کل عرض موجود در صفحه را اشغال می کند. در این حالت اولین مورد در مجاورت لبه چپ و آخرین مورد در مجاورت سمت راست قرار می گیرد و فاصله بین همه عناصر برابر است. امروز به شما نشان خواهیم داد که چگونه انجام می شود.

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

چگونه آن را پیاده سازی کنیم؟

هر برنامه نویسی می تواند راه خود را برای حل مشکل ارائه دهد. همه چیز به تخیل، سطح حرفه ای و توانایی های او بستگی دارد. رایج ترین راه حل برای این مشکل استفاده از جدول است. همچنین، بسیاری استفاده از جاوا اسکریپت را پیشنهاد می کنند. کسانی که پیشنهاد می کنند از ویژگی display با مقدار استفاده کنند جدولیا سلول جدول- عجله دارم که ناراحت شوم. این روش سازگاری کافی بین مرورگرها را ندارد.

راه حل ما

پیشنهاد ما بر پایه دانش HTML5 و CSS3 ساخته خواهد شد.

ماهیت فرآیند بر اساس ویژگی text-align با مقدار justify است. برای کسانی که فراموش کرده اند - به شما یادآوری می کنم: این ویژگی تراز متن را به عرض کامل ظرف جهت می دهد.

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

در زیر کدی وجود دارد که به عنوان نمونه ای از ایجاد منوی "لاستیک" عمل می کند:

HTML

< ul> < li>< a href= "#" >خانه < li>< a href= "#" >وبلاگ < li>< a href= "#" >اخبار < li>< a href= "#" >محبوب < li>< a href= "#" >جدید

ul (تراز کردن متن: توجیه، سرریز: پنهان. /* عارضه جانبی روش حذف */ارتفاع: 20 پیکسل؛ /* غیر ضروری را نیز حذف می کند */مکان نما: پیش فرض /* شکل اولیه مکان نما را تنظیم می کند */حاشیه: 50px 100px 0 100px; پس زمینه: #eee; padding: 5px ) li (نمایش: درون خطی; /* متن آیتم های منو بسازید */) li a (نمایش: inline-block; /* شکست های کلمه را در منو حذف می کند */رنگ: #444; ) a: شناور (رنگ: #ff0000؛ ) ul: بعد از ( /* تشکیل خط دوم برای کار کردن روش */محتوا: "1" ; حاشیه چپ: 100%؛ ارتفاع: 1px; سرریز: پنهان; صفحه نمایش: inline-block; )

برای کار در اینترنت اکسپلورر خوب قدیمی، باید کد زیر را نیز به CSS اضافه کنید

ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos,"< li class = "last" > "))) ul .last ( حاشیه چپ: 100%؛ ) * html ul (/* فقط به ie6 نیاز دارد */ ارتفاع: 30 پیکسل؛ )

پس از ثبت مقادیر و کد دارایی لازم، منوی لاستیکی زیر را دریافت می کنیم:

معایب روش

  1. کد حجم
  2. عدم امکان تعیین وضعیت فعال یک عنصر از طریق انتخابگر کلاس. این به دلیل شکستن کلمات در پاراگراف ها (در صورت وجود) است. راه حل این مشکل این است که یک ظرف دیگر داخل آیتم های لیست اضافه کنید.
  3. برای منوی کشویی، به دلیل تأثیر منفی سرریز، باید کد را سفارشی کنید.

روی چه مرورگرهایی کار می کند؟

6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -

عصر بخیر!

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

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

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

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

HTML MARKUP

...
خانه
خبر جالب
یکی دیگر از آیتم های منو!

برای کامل کردن منو از جداول با عرض 100% استفاده کردم. هر میز دارای بخشظرف آیتم منو بسته به اینکه اولین، آخرین یا میانی آیتم منو باشد - بخش-y به کلاس مناسب اختصاص داده می شود.

در هر بخشظرف دارای 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؛ border-l eft:none; حاشیه-رنگ: #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 cases *point of first and last. هیچ؛ ) .last_point_menu.active .borderRightSecond (نمایش: هیچکدام؛ ) .last_point_menu:hover .borderLeftSecond (نمایش: مسدود؛ )

همین!

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

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

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

منوی سیالات CSS مرحله 1

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

  1. بلوک بسته بندی منو
  2. خود منو، از طریق نمایش داده می شود لیست گلوله ای(تگ ul)
  3. خوب، آیتم های منو در داخل، و در آنها، به ترتیب، در حال حاضر لینک وجود دارد

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



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

حالا همه چیز را وارد می کنیم نمای مورد نظر، CSS کنترل می شود.

مرحله 2 - سبک های اساسی

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

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

مرحله 3 - اجرای لاستیک

حالا خود منو را انتخاب می کنیم. نشانگرها را از آن حذف می کنم (از تگ 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: middle و display: table-cell - اولی متن را به صورت عمودی با مرکز تراز می کند و دومی نیز پیوندها را به عنوان سلول نمایش می دهد. هر دو ویژگی مورد نیاز است.
  • فونت - خوب، این فقط مجموعه ای از تنظیمات برای فونت است. در مورد بخوانید ویژگی های cssبرای فونت های این مقاله

مرحله 4 (اختیاری) می توانید تعامل را اضافه کنید

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

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

تست منو از نظر لاستیکی

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

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

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

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

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

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

چگونه آن را تطبیق دهیم؟

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

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

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

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

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

پیمایش صفحه:

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

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

در کد

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

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

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

همانطور که از کد می بینید، منوی کشویی ما در لیست های 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

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

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

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

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

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

#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 > الف: شناور، #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/، تمام نمونه ها و انواع منوهای کشویی جمع آوری شده است.