CSS va Html-dan foydalanib, o'z qo'llaringiz bilan gorizontal ochiladigan menyu. To'liq kenglikdagi go'zal gorizontal menyu Bootstrap 4 to'liq kenglikdagi menyu

Sayt bo'limlari

Muharrir tanlovi:

Reklama

uy - Yangi boshlanuvchilar uchun

Sayt menyusi uchun juda keng tarqalgan tartib, u bilan konteyner sahifada mavjud bo'lgan butun kenglikni egallaganida. Bunday holda, birinchi element chap chetiga, oxirgisi esa o'ngga ulashgan va barcha elementlar orasidagi masofa tengdir. Bugun biz sizga bu qanday amalga oshirilganligini aytib beramiz.

Biz sizga resursingiz uchun CSS-dan foydalangan holda kauchuk menyuni amalga oshirish misolini taklif qilamiz. Ushbu menyuda elementlar bir qatorda joylashgan bo'ladi. Javascript ishlatilmaydi. Menyuning mazmuni muntazam ro'yxatga kiritiladi. Bunday menyuning asosiy xususiyati uning ko'p qirraliligi bo'lib, u elementlarning soni va uzunligi har qanday bo'lishi mumkinligi bilan ifodalanadi.

Buni qanday amalga oshirish kerak?

Har bir dasturchi muammoni hal qilishning o'ziga xos usulini taklif qilishi mumkin. Bularning barchasi uning tasavvuriga, professionallik darajasiga va qobiliyatlariga bog'liq. Ushbu muammoning eng keng tarqalgan yechimi jadvaldan foydalanishdir. Bundan tashqari, ko'pchilik JavaScript-dan foydalanishni tavsiya qiladi. Displey xususiyatidan qiymatlar jadvali yoki jadval katakchasi bilan foydalanishni taklif qilganlarni xafa qilishga shoshildim. Ushbu usul o'zaro faoliyat brauzerlar uchun etarli darajada mos emas.

Bizning yechimimiz

Bizning taklifimiz HTML5 va CSS3 bilimlarining mustahkam poydevoriga quriladi.

Jarayonning mohiyati matnni oqlash qiymati bilan tekislash xususiyatiga asoslanadi. Unutganlar uchun eslatib o'taman: bu xususiyat matnni tekislashni konteynerning butun kengligi bo'ylab yo'naltiradi.

Bizning yechimimizdan foydalanganda ikkita majburiy qoidaga rioya qilish kerak. Birinchisi, menyu elementi konteynerining kengligi matndan kichikroq bo'lishi kerak. Ya'ni, bir qatorda emas. Ikkinchi muhim qoida shundaki, so'zlar bir nuqtaga tegishli yoki yo'qligidan qat'i nazar, teng ravishda cho'ziladi.

Quyida kauchuk menyu yaratishga misol bo'ladigan kod mavjud:

HTML

< ul> < li>< a href= "#" >uy< li>< a href= "#" >Blog< li>< a href= "#" >Yangiliklar< li>< a href= "#" >Mashhur< li>< a href= "#" >Yangi elementlar

ul ( text- align: justify; overflow: hidden; /* metodning nojo'ya ta'sirini yo'q qiladi */ balandlik: 20px; /* keraksizni ham yo'q qiladi */ kursor: default ; /* kursorning boshlang'ich shaklini o'rnatadi */ chekka : 50px 100px 0 100px; fon: #eee; toʻldirish: 5px; ) li (displey: inline; /* menyu bandlarini matnga aylantiradi */ ) li a (displey: inline- bloki; /* menyudagi soʻz uzilishlarini yoʻq qiladi */ rang: #444; ) a : hover ( rang: #ff0000; ) ul: keyin ( /* usulni ishlab chiqish uchun ikkinchi qatorni shakllantirish */ kontent: "1" ; chet-chap: 100 %; balandlik: 1px; toshib ketish: yashirin; displey: inline-blok; )

Yaxshi eski Internet Explorer-da ishlash uchun CSS-ga qo'shimcha ravishda quyidagi kodni qo'shishingiz kerak

ul ( z- indeks: ifoda(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" >")); ) ul .oxirgi (chekka-chap: 100%; ) * html ul ( /* faqat ie6 kerak */ balandlik: 30px; )

Kerakli xususiyat qiymatlari va kodini belgilab, biz ushbu kauchuk menyuni olamiz:

Usulning kamchiliklari

Ovoz kodi

Sinf selektori orqali elementning faol holatini aniqlashning mumkin emasligi. Bu paragraflardagi so'zlarning uzilishi tufayli yuzaga keladi (agar mavjud bo'lsa). Ushbu muammoni hal qilish ro'yxat elementlari ichiga boshqa konteyner qo'shishdir.

Ochiladigan menyu uchun siz ortiqcha oqimning salbiy ta'siri tufayli kodni sozlashingiz kerak.

U qaysi brauzerlarda ishlaydi?


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

Hayrli kun!

Ko'pincha, qancha elementdan iborat bo'lishidan qat'i nazar, asosiy blokning butun kengligi bo'ylab cho'ziladigan gorizontal menyu qilish kerak.

Bugun men sizga aynan shunday menyuni qanday yaratishni ko'rsatmoqchiman.

Shunday qilib, bizning menyumiz quyidagicha bo'ladi:

U to'liq enigacha cho'zilgan va kursorni tepaga olib kelganda ajralib turadi. Menyu yon tomonlarda yaxlitlangan.

HTML MARKUP

...

Qiziqarli yangiliklar

Yana bir menyu elementi!

Menyuni to'liq kenglikda qilish uchun men 100% kenglikdagi jadvallardan foydalanardim. Har bir jadvalda menyu elementi div konteyneri mavjud. Menyuning birinchi, oxirgi yoki oraliq bandi div ekanligiga qarab, tegishli sinf tayinlanadi.

Har bir div konteynerida to'g'ri ko'rsatish uchun zarur bo'lgan mutlaq joylashuvga ega 2 ta yon chegara mavjud. Agar siz standart chegaralardan foydalansangiz, menyu elementlarini almashtirganingizda, matn 1-2 pikselga o'tadi, bu yaxshi.

Faol sinf tanlangan menyu bandi uchun javobgardir va uni ta'kidlaydi.

Har bir elementda bizda rasm va matn mavjud. Bularning barchasi vertikal ravishda o'rtada tekislanishini ta'minlash uchun biz jadvaldan foydalanamiz. Vertikal hizalama xususiyati tufayli bizning menyu bandlarimiz doimo silliq ko'rsatiladi va uzoqlashmaydi.

CSS QOIDALARI

Birinchidan, menyuning umumiy ko'rinishi uchun uslublarni o'rnatamiz:

Menu_container ( padding-top: 40px; en: 100%; balandlik: 47px; hoshiya oraligʻi: 0px; ) .menu_container td (vertikal tekislash: oʻrta; /* vertikal tekislash */ ) .last_point_menu, .first_point, mid_point_menu kenglik: 100%; balandlik: 47px; chegara: 1px qattiq #dadbda; z-indeks: 1000; joylashuv: nisbiy; chegara-chap: yoʻq; ) .ichki_jadval (kenglik: 100%; balandlik: 100%; ) .inner_table td ( to'ldirish: 0px; vertikal tekislash: o'rta; chegara: yo'q; matnni tekislash: chap; kenglik: 150px; to'ldirish-chap: 4px; ) .td.inner_table_title ( padding-top: 4px; shrift-weight: qalin; ) .td.inner_table_img ( kengligi: 40px! muhim; ) .inner_table_menu (balandlik: 100%; toʻldirish: 0px; vertikal tekislash: oʻrta; chegara: yoʻq; matnni tekislash: chap; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: katta harf; satr balandligi: 13px; ) .inner_table_menu td.inner_table_img (kenglik: 30px! muhim; balandlik: 30px! muhim; to‘ldirish-chap: 15px; )

Go'zallik uchun menyuning yon tomonlaridagi burchaklarni yumalaylik:

Birinchi_nuqta_menyu ( -webkit-chegara-yuqori-chap-radius: 5px; -webkit-chegara-pastki-chap-radius: 5px; -moz-chegara-radius-yuqori: 5px; -moz-chegara-radius-pastki chap: 5px; chegara-yuqori-chap-radius: 5px; chegara-pastki-chap-radius: 5px; chegara-oʻng: 1px qattiq #dadbda; ) .last_point_menu (-webkit-chegara-yuqori-oʻng-radius: 5px; -webkit-chegara -pastki-o'ng-radius: 5px; -moz-chegara-radius-yuqori o'ng: 5px; -moz-chegara-radius-pastki o'ng: 5px; chegara-yuqori-o'ng-radius: 5px; chegara-pastki-o'ng-radius: 5px ;)

Endi bizning menyu yanada chiroyli ko'rinishga ega:

Hozircha birinchi nuqtaning chap chegarasi yo'q. Birozdan keyin tuzatamiz.

Endi menyu uchun hover effektlarini qo'shamiz.

O'rta_nuqta_menyusi: kursor, .oxirgi_nuqta_menyu: kursor, .birinchi_nuqta_menyu: kursor, .middle_point_menu.active, .so'nggi_nuqta_menyu.active, .first_point_menu.active, .middle_point_menu.active (fon rangi: #-z-chiziq;-CA gradient (yuqori, #CAE285, #9FCB56); fon tasviri: -webkit-gradient(chiziqli, 0 0, 0 100%, dan (#CAE285), to (#9FCB56)); fon tasviri: -webkit-chiziqli -gradient(yuqorida, #CAE285, #9FCB56); fon-tasvir: -o-chiziqli-gradient (yuqorida, #CAE285, #9FCB56); fon-tasvir: chiziqli-gradient (pastga, #CAE285, #9FCB56); chegara: 1px qattiq #9FCB56; hoshiya-rang: #aec671 #9fbb62 #87ac4a; chegara-chap: yoʻq; z-index: 5000; ) /* hoverda chegaralarni ishlab chiqadi */ .first_point_menu (chegara: 1px qattiq #dadbda ; ) .first_point_menu: suring, .first_point_menu.active (chegara: 1px qattiq #9FCB56; hoshiya-rang: #aec671 #9fbb62 #87ac4a; ) .last_point_menu (chegara: 1px qattiq #dadbda; chegara-chap: no.laneu) : hover (chegara: 1px qattiq #9FCB56; chegara-chap: yo'q; chegara rangi: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active (chegara-chap: yo'q; )

Endi bizning menyumiz ancha chiroyli ko'rinadi, ammo hozircha bizda ta'kidlangan menyu elementlari uchun chegaralar yo'q. Keling, buni tuzataylik!

/* yon chegaralar uchun uslublar */ .borderLeftSecond, .borderRightSecond (displey: yo‘q; pozitsiya: mutlaq; kenglik: 1px; balandlik: 47px; fon rangi: #9fbb62; tepa: 0px; z-indeks: 1000; ) /* chegaralar uchun mutlaq siljishlar */ .borderLeftSecond (chapda: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond holatlarini ko‘rsatish (tutqichni ko‘rsatish;*) birinchi va oxirgi element */ .first_point_menu.active .borderLeftSecond (displey: none; ) .last_point_menu.active .borderRightSecond (displey: none; ) .last_point_menu: hover .borderLeftSecond (displey: blok; )

Ana xolos!

Bizda asosiy blokning butun kengligi bo'ylab cho'zilgan ajoyib menyu mavjud! Sichqonchani surganingizda elementlar bir-birining ustiga tushmaydi va tartib sakrab chiqmaydi.

Salom. Men juda uzoq vaqt davomida html/css ishi mavzusida post yozmadim. Yaqinda men yangi tartibni yaratishni boshladim va bu jarayonda men menyuni moslashuvchan qilish imkonini beruvchi qiziqarli hiylaga duch keldim (siz unga yangi narsalarni qo'shishingiz mumkin va hajmi oshmaydi, lekin har doim 100% bo'ladi). ota-ona bloki). Shunday qilib, bugun biz CSS yordamida kauchuk menyuni amalga oshiramiz.

Agar siz maqolani o'qishga dangasa bo'lsangiz, ushbu videoni tomosha qilishingiz mumkin. Muallif ham hamma narsani juda yaxshi tushuntiradi:

CSS bilan kauchuk menyu - 1-qadam

Birinchi qadam har doim html belgisidir, biz usiz qayerda bo'lardik? Ammo bizning holatlarimizda hamma narsa oddiy bo'ladi:

menyu uchun blokli o'rash

Belgilangan ro'yxat orqali ko'rsatiladigan menyuning o'zi (ul teg)

Xo'sh, menyu elementlari ichkarida va shunga mos ravishda ular allaqachon havolalarga ega

Hammasi aniq, mana mening belgilash kodim:

Hammasi standart ko'rinadi, quyidagicha:

Endi biz hamma narsani kerakli shaklga joylashtiramiz, CSS ishga tushadi.

2-qadam - Asosiy uslublar

Keyinchalik, o'rash blokiga uslublar qo'shaman. Ya'ni, men maksimal kenglikni 600 pikselga o'rnataman (menyu mos kelishi uchun skrinshotni olishni osonlashtirish uchun) va men blokni ham markazlashtiraman.

Oʻrash(
fon: #fff;
maksimal kenglik: 600px;
chegara: 0 avtomatik;
}

3-qadam - kauchukni amalga oshirish

Endi menyuning o'ziga o'taylik. Men undan markerlarni olib tashlayman (ul tegi), fon chiziqli gradientini yarataman va eng muhimi, menyu uchun konteynerni jadval qatori kabi ishlashi uchun displey: table-row xususiyatidan foydalanaman. Bu keyingi manipulyatsiyalar uchun qilish muhimdir.

R-menyu(
fon: chiziqli-gradient (o'ngga, #b0d4e3 0%, #88bacf 100%);
displey: jadval qatori;
ro'yxat uslubi: yo'q;
}

Ko'rib turganingizdek, yuqoridagi kod men yozgan hamma narsani hal qildi. Aytgancha, Ultimate CSS Gradient generator vositasi yordamida gradientlarni yaratish qulay. Bir kun kelib bu haqda yana yozaman.

R-menyu(
vertikal tekislash: pastki;
displey: jadval-hujayra;
kenglik: avtomatik;
matnni tekislash: markaz;
balandligi: 50px;
chegara o'ng: 1px qattiq # 222;
}

vertical-align: bottom - bu xususiyat shunday zarurki, agar menyu bandidagi matn 2 qatordan iborat bo'lsa, u bir tekisda ko'rsatiladi. Menyuni yaratganimizda, siz ushbu xususiyatni olib tashlashingiz, kattalashtirishingiz mumkin, shunda elementlar siqiladi va matn ikki qatorga ko'chiriladi va siz ekranda muammoni ko'rasiz. Mulkni qaytarib bering va hamma narsa yaxshi bo'ladi.
displey: jadval-hujayra - biz displey menyusining o'zini jadval qatori qilib o'rnatganimiz uchun, uning elementlarini jadvalning kataklari sifatida ko'rsatishni o'rnatish mantiqan to'g'ri bo'ladi. Bu zarur.
width: auto — paragrafdagi matn uzunligiga qarab kenglik avtomatik ravishda hisoblanadi
text-align: center - bu faqat matn ichidagi matnni markazlashtirish uchun
balandlik: 50px - balandlikni 50 pikselga o'rnating
Xo'sh, chegara-o'ng - bu faqat o'ngdagi chegara, elementlar uchun ajratuvchi

Hozircha menyu yoqimsiz ko'rinadi, lekin bu yaxshi, buni yodda tutish vaqti keldi.

Oxirgi narsa - elementlarning ichidagi havolalarni shakllantirish. Mana menda ushbu kod bor:

R-menyu li a(
matn-bezak: yo'q;
kengligi: 1000px;
balandligi: 50px;
vertikal tekislash: o'rta;
displey: jadval-hujayra;
rang: #fff;
shrift: normal 14px Verdana;
}

Va endi menyu shunday ko'rinadi:

Yana ba'zi qatorlarni tushuntirib beraman:

text-decoration xususiyati havolalar uchun birlamchi tagiga chizishni bekor qiladi
kengligi: 1000px, ehtimol, eng muhim qatordir. Siz havolalarni taxminan shu kenglikka o'rnatishingiz kerak, ehtimol kamroq, lekin eng keng menyu elementidan kattaroqdir. Havolalar 1000 piksel kengligida bo'lmaydi, chunki kengligi li menyu elementi bilan cheklanadi, uning kengligi avtomatik ravishda o'rnatiladi, lekin bu menyudagi istalgan miqdordagi elementlar uchun har doim 100 bo'lishini ta'minlashga imkon beradi. kengligining foizi.
vertikal tekislash: o'rta va displey: jadval-hujayra - birinchisi matnni vertikal ravishda markazga to'g'rilaydi, ikkinchisi havolalarni ham hujayralar sifatida ko'rsatadi. Ikkala xususiyat ham kerak.
shrift - bu shunchaki shrift uchun sozlamalar to'plami. Ushbu maqolada shriftlar uchun CSS xususiyatlari haqida o'qing.

4-qadam (ixtiyoriy) Siz interaktivlikni qo'shishingiz mumkin

Masalan, sichqonchani olib kelganda menyu elementining rangi o'zgarishi uchun. Bu hover psevdo-sinfidan foydalanib, juda sodda tarzda amalga oshirilishi mumkin:

R-menyu li: suring (
fon rangi: #6bba70;
}

Menyuni kauchuklik uchun sinovdan o'tkazish

Ajoyib, menyular tayyor, lekin biz eng muhim narsani tekshirmadik - sizga va'da qilganimdek, u qanchalik rezina ekanligini. Xo'sh, men menyuga yana 2 ta narsani qo'shaman:

Menyu 600 piksel kengligida qoladi. Qolgan narsalar 2 ta yangisini joylashtirish uchun biroz qisqartirildi.

Men yana bir uzun nuqta qo'shaman:

Ko'rib turganingizdek, menyu biroz qisqardi va uzun element odatdagidek ko'rsatiladi. Agar men sizga aytgan vertical-align: bottom xususiyati bo‘lmaganida, menyu yomonroq ko‘rinardi.

Menyuni uchta elementga qisqartiraman.

Elementlar ancha erkinlashdi, ammo menyuning o'zi kenglikda o'zgarmadi. Shunday qilib, biz 100% kauchuk menyu qildik!

Uni qanday moslashtirish kerak?

Printsipial jihatdan, agar siz o'rash blokini qat'iy emas, balki maksimal kenglikka o'rnatgan bo'lsangiz, u holda uni moslashtirish ham shart emas. Mening holatimda men maksimal kenglik xususiyatiga egaman: 600px va kengligi 600 pikseldan kam bo'lganda, blok gorizontal aylantirishni hosil qilmasdan oddiygina ekran bilan birga qisqaradi.

Xo'sh, agar siz mobil qurilmalar yoki keng ekranlardagi menyuni qandaydir tarzda o'zgartirmoqchi bo'lsangiz yoki to'g'rilamoqchi bo'lsangiz, media so'rovlari sizga yordam beradi! Veb-sayt yaratishda omad tilaymiz!

Biz ketma-ketlikni ochiladigan menyular bo'yicha dars bilan davom ettiramiz. Keyingi - CSS-dan foydalanib, o'z-o'zidan ishlaydigan gorizontal ochiladigan menyu.

Agar siz bu erga tasodifan kelgan bo'lsangiz yoki ochiladigan menyuning boshqa ilovasini qidirayotgan bo'lsangiz, men sizga ota-ona bo'limiga o'tishingizni maslahat beraman.

Ushbu bo'lim CSS va HTML-da gorizontal ochiladigan menyuni tasvirlaydi.

Sahifani navigatsiya qilish:

Shunday qilib, bizning vazifamiz:

jQuery va Javascriptdan foydalanmasdan, shuningdek jadvallardan foydalanmasdan ochiladigan ro'yxat CSS (ul li ro'yxatlarda) bilan gorizontal menyu yarating

kodda.

Ochiladigan gorizontal menyu html

Avvalo, kod yozishni boshlashdan oldin menyu uchun html shablonini yasashimiz kerak.

Biz universal menyu yaratayotganimiz sababli, men uni iloji boricha WordPress menyusi chiqishiga o'xshash qilishni xohlayman. Menimcha, bu eng oddiy va ko'p qirrali Html menyu kodlaridan biridir. Bu shunday ko'rinadi:

uy
Biz haqimizda
Bizning xizmatlarimiz
- Bizning №1 xizmatimiz
- Bizning xizmat № 2
- Bizning xizmatimiz № 3
- Bizning xizmatimiz № 4
- Xizmat 5
Yangiliklar
Kontaktlar

Koddan ko'rinib turibdiki, bizning ochiladigan menyumiz ul va li ro'yxatlarida amalga oshiriladi. Menyu CSS uslublarisiz shunday ko'rinadi:

To‘g‘risini aytaylik, oddiy ro‘yxat kabi xunuk ko‘rinadi. Keyin biz ushbu menyuni CSS uslublari yordamida bezashimiz kerak.

CSS-da gorizontal ochiladigan menyu

Ochiladigan menyular va boshqalar uchun CSS uslublari havo kabi zarur. Oxir oqibat, ochiladigan yorliq psevdo-sinf: hover asosida yaratilgan.

Gorizontal ochiladigan menyu uchun bizga quyidagi uslublar kerak bo'ladi:

#menu1(pozitsiya:nisbiy; displey:blok; kenglik:100%; balandlik:avtomatik; z-indeks:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100 %; balandlik: avtomatik; ro'yxat uslubi: yo'q; fon: #F3A601; ) #menu1 > ul::after(displey:blok; kenglik:100%; balandlik:0px; aniq:ikkalasi; kontent:" "; ) # menu1 ul li(pozitsiya:nisbiy; displey:blok; float:chap; en:avto; balandlik:avto; ) #menu1 ul li a(displey:blok; to‘ldirish:9px 25px 0px 25px; shrift o‘lchami:14px; shrift- oila:Arial, sans-serif; rang: #ffffef; chiziq balandligi: 1,3em; matn-bezatish: yo'q; shrift-og'irligi: qalin; matnni o'zgartirish: katta harf; balandlik: 36 piksel; quti o'lchami: chegara qutisi; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fon:#EBBD5B; rang:#2B45E0; )

Bu hali oxiri emas, faqat asosiy gorizontal menyu uchun CSS-ning bir qismi. Keyin ochiladigan menyu ro'yxati uchun uslublarni yozamiz:

#menu1 ul li ul(pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yo'q; kenglik:200px; fon:#EBBD5B; ) #menu1 ul li:hover ul(displey:blok;)/*bu qator amalga oshiradi tushirish mexanizmi*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( displey:blok; matnni o'zgartirish:yo'q; balandlik:avto; to'ldirish:7px 25px; kengligi: 100%; box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:birinchi bola a(border-top:0px;) #menu1 ul li ul li a: hover (fon:#FDDC96; rang:#6572BC; )

Hozir shunday. Chiqib ketish mexanizmining o'zi bir qatorda amalga oshiriladi.

Ushbu menyu bilan terini ko'ring:

Guruch. 2 (gorizontal ochiladigan menyu)

Quyida ochiladigan menyu qanday ishlashining namoyishi, shuningdek, manbalarni yuklab olish uchun havola mavjud. (Namoyish ushbu sahifaning tepasida ochiladigan oyna bilan ochiladi, yangi oynada ochish 🙂 yoki sichqoncha g'ildiragini bosish shart emas)

To'liq kenglikdagi gorizontal ochiladigan menyu

Ko'pchiligingiz men yuqorida ko'rsatgan menyular o'tmishdagi salom va qisman siz haqsiz, deb meni qoralashingiz mumkin, garchi men yaqinda bunday menyular bilan tuzilgan maketlarni ko'rgan bo'lsam ham.

Umid qilamanki, siz yuqoridagi misolni yuklab oldingiz. Bizning Html o'zgarishsiz qoladi, lekin biz CSS-ni butunlay o'zgartiramiz. Siz shunchaki CSS kodini bu yerdan olib, yuklab olingan misolga joylashtirishingiz yoki uning qanday ishlashini demo rejimida tomosha qilishingiz mumkin.

#container( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozitsiyasi :nisbiy; displey: inline-blok; kenglik: avtomatik; balandlik: avtomatik; vertikal tekislash: tepada; matnni tekislash: chap; ) #menu1 ul li a( displey:blok; to‘ldirish:9px 35px 0px 35px; shrift o‘lchami :14px; shrift oilasi:Arial, sans-serif; rang: #ffffef; chiziq balandligi: 1.3em; matn bezagi: yoʻq; shrift ogʻirligi: qalin; matnni oʻzgartirish: katta harf; balandlik: 36px; quti oʻlchami :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fon:#EBBD5B; rang:#2B45E0; ) #menu1 ul li ul( pozitsiya:mutlaq; tepa:36px; chap :0px; ko'rsatish: yo'q; kenglik: avtomatik; fon:#EBBD5B; oq bo'sh joy:nowrap; ) #menu1 ul li:so'nggi bola ul(/*oxirgi element o'ng chetiga biriktiriladi*/ chap:avto; o'ngga:0px; ) #menu1 ul li:hover ul(displey:blok;)/*bu chiziq mexanizmini amalga oshiradi dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width:100% ;box-sizing:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:birinchi bola a(border-top:0px;) #menu1 ul li ul li a: hover (fon: #FDDC96; rang: #6572BC; )

Ushbu misol, shuningdek, birinchisidan farq qiladi, chunki ochiladigan menyu, ochiladigan menyuning o'zi barcha menyu elementlarining kengligiga qarab cho'ziladi.

Juda uzoq menyu elementlari uchun bu parametr unchalik qulay bo'lmasligi mumkin, chunki ular chegaradan tashqariga chiqadi. Ushbu xususiyatni o'chirish uchun "white-space:nowrap;" xususiyatini toping. selektorda #menu1 ul li ul va uni o'chiring.

Quyida siz demo tomosha qilishingiz yoki gorizontal ochiladigan menyu manbalarini yuklab olishingiz mumkin:

Ajratgichlarsiz ushbu menyu shunday ko'rinadi. Ajratuvchilarni HTML-ga qo'lda qo'shish mumkin, ammo agar sizda WordPress kabi CMS bo'lsa, ularni qo'lda qo'shish unchalik qulay emas.

Ajratuvchilar bilan gorizontal ochiladigan menyu

Sof CSS-dan foydalangan holda menyu elementlari orasiga chiziq qo'shishning o'nlab variantlari mavjud. Men ::oldin yoki::after yoki ancha sodda chegara-chap, chegara-o‘ngdan foydalanadigan variantlarni takrorlamayman.

Shunday vaziyatlar mavjudki, tartib shu qadar ajoyib tarzda qurilganki, jQuerysiz qilolmaysiz.

Bizning HTML kodimiz bir xil bo'lib qoladi, biz faqat jQuery kutubxonasini va boshidan foydalanadigan faylni o'z ichiga olamiz:

Keyin darhol .

Siz tushunganingizdek, fayl yaratishingiz kerak script-menu-3.js va u erda bu kichik kodni qo'shing:

$(hujjat).ready(function())( $("#menu1 > ul > li:not(:oxirgi bola)").after(" "); ));

Bunday menyu uchun CSS uslublari avvalgidek qoldirilishi kerak, + bu qismni oxiriga qo'shing:

#menu1 ul li.razd( balandlik: 28px; kenglik: 1px; fon: #ffffff; margin-top: 4px; )

JQuery-da chegaralovchilar bilan gorizontal ochiladigan menyu quyidagicha ko'rinadi:

Siz demo rejimida ko'rishingiz yoki quyidagi gorizontal menyu shablonini yuklab olishingiz mumkin:

Ushbu yechimning afzalliklari quyidagilardan iborat:

menyu dinamik ravishda chiziladi;
ajratuvchidan paragrafgacha bo'lgan chekinishlar hamma joyda bir xil;
yanada chiroyli va moslashuvchan dizayn.

Gorizontal ko'p darajali ochiladigan menyu CSS+HTML

Ko'p darajali ochiladigan menyular haqida gapirayotganimiz sababli, ularni kichik guruhlarga bo'lish kerak:

yon tomonga ishora qilganda vip pad bilan

uchinchi darajali qalqib chiquvchi menyu bilan

Mening misollarimda men 3 darajali ko'p darajali CSS menyusini ko'rsataman, keyin nima qilish kerakligini taxmin qilish qiyin bo'lmaydi deb o'ylayman.

Ko'p darajali ochiladigan menyu, kursor ustidagi yon panel bilan

Birinchidan, HTML-ni biroz tuzatishimiz kerak. U erda 3-daraja uchun bir nechta qatorlar qo'shiladi:

uy
Biz haqimizda
Bizning xizmatlarimiz
- Bizning №1 xizmatimiz
  - Xizmatga qo'shimcha 1
  - Xizmatga qo'shimcha 2
- Bizning xizmat № 2
  - Xizmatga qo'shimcha 3
  - Xizmatga qo'shimcha 4
- Bizning xizmatimiz № 3
- Bizning xizmatimiz № 4
- Xizmat 5
Yangiliklar
Kontaktlar
- Yo'l xaritasi
  - Xarita qo'shimchasi
  - Xarita uchun qo'shimcha 2
- Fikr-mulohaza shakli

#container( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozitsiyasi :nisbiy; displey: inline-blok; en: avtomatik; balandlik: avtomatik; vertikal tekislash: tepada; matnni tekislash: chap; ) #menu1 ul li.razd( balandligi: 28 piksel; kenglik: 1 piksel; fon: #ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height:1.3 em;matn-bezatish:yo‘q;shrift-og‘irligi:qalin;matn-transform:katta;balandlik:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a (fon: #EBBD5B; rang:#2B45E0; ) #menu1 ul li ul(pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yo'q; en:avto; fon:#EBBD5B; oq bo'shliq:nowrap; ) #menu1 > ul > li:so'nggi bola > ul(/*oxirgi element o‘ng chetiga biriktiriladi*/ chap:avto; o‘ng:0px; ) #menu1 ul li:hover > ul(displey:blok;)/*bu satr o‘chirish mexanizmini amalga oshiradi* / #menu1 ul li ul li( displey:blok; width:auto; ) #menu1 ul li ul li a( displey:blok; matnni o‘zgartirish:yo‘q; balandlik:avto; to‘ldirish:7px 45px; en:100%; quti -sizing:border-box ; border-top:1px solid #ffffff; ) #menu1 ul li ul li:birinchi bola > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( fon:#FDDC96; rang:#6572BC; ) #menu1 ul li ul li ul( top:0px; chap:100%; displey:yo'q; fon:#fddc96; ) #menu1 > ul > li:so‘nggi bola > ul ul(chap:avto; o‘ngda:100%;) #menyu1 ul li ul li ul a(rang:#F38A01;)

Biz jQuery uchun fayllarni avvalgi misoldagidek nusxalaymiz. Menyu hech bo'lmaganda biroz yaxshiroq ko'rinishi uchun men ajratgichlarni tark etishga qaror qildim. Albatta, siz ularsiz ham qila olasiz.

Bu shunday bo'ldi:
Men tomchining o'ng va o'rtada qanday ko'rinishini ko'rsatish uchun bittasida 2 ta teri yasadim.

Quyida siz demo tomosha qilishingiz va misolni yuklab olishingiz mumkin:

Hoverda qalqib chiquvchi panel bilan ko'p darajali ochiladigan menyu

Sarlavhada ozgina yog' bor, lekin u ishlaydi, asosiysi kod.

Ushbu misolning mohiyati to'liq kenglikdagi ochiladigan + ko'p darajali to'liq kenglikdagi gorizontal ochiladigan menyuni yaratishdir.

Men HTML kodini o'zgartirmayman, uni oldingi misoldan olish mumkin. Biz jQuery-da ajratuvchilarni ham qoldiramiz.

Faqat CSS butunlay o'zgaradi:

#container( width:1000px; height:avto; margin:0px auto; padding-top:10px; ) #menu1(pozitsiya:nisbiy; displey:blok; width:100%; balandlik:avto; z-index:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; kenglik:100%; balandlik:avto; ro‘yxat uslubi:yo‘q; fon:#F3A601; ) #menu1 > ul( matnni tekislash: justify; font-size:1px; line-height:1px; ) #menu1 > ul::after( display:inline-block; width:100%; height:0px; content:" "; ) #menu1 ul li( pozitsiyasi :nisbiy; displey:inline-blok; en:avto;balandlik:avto;vertikal tekislash:yuqori; matnni tekislash:chap; ) #menu1 > ul > li(pozitsiya:statik;) #menu1 ul li.razd( balandlik :28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a(displey:blok; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- serif; rang:#ffffef; chiziq balandligi: 1,3em; matn-bezatish: yo‘q; shrift-og‘irligi: qalin; matnni o‘zgartirish: katta harf; balandlik: 36 piksel; quti o‘lchami: chegara qutisi; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fon:#EBBD5B; rang:#2B45E0; ) #menu1 ul li ul( pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yo'q; kenglik:100%; fon:#EBBD5B; ) #menu1 > ul > li > ul::after( clear:both; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(displey:block;)/*bu qator o‘chirish mexanizmini amalga oshiradi*/ #menu1 ul li ul li( displey :blok; eni:30%; float:chap; ) #menu1 ul li ul li a( displey:blok; matnni o‘zgartirish:yo‘q; balandlik:avto; to‘ldirish:7px 45px; en:100%; quti- o'lcham:border -box; ) #menu1 ul li ul li:birinchi bola > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( fon: #FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( top:0px; chap:100%; displey:yo‘q; fon:#fddc96; z-index:15; ) #menu1 ul li ul li ul li (displey: blok; float: yo'q; kenglik: 100%;) #menyu1 ul li ul li ul a( rang:#F38A01; chegara tepasi:1px qattiq #ffffff; )

Menyu shunday ko'rinadi: yagona nuqta shundaki, saytda etarli joy bo'lishi kerak, chunki o'ngdagi oxirgi elementda ochiladigan menyu uchun joy yo'q. Bu muammoni: nth-child yordamida hal qilish mumkin, lekin men bezovta qilmadim.

Gorizontal ko'p darajali ochiladigan menyuning demosini ko'ring:

Siz sezganingizdek: pastki qolip ham to'liq kenglikda. Bir nechta bloklardagi tomchilar shunday tayyorlanadi.

Hammasi men uchun, umid qilamanki, hech bo'lmaganda bitta misolim sizga mos keladi. E'tiboringiz uchun rahmat.

bu ularga ham, menga ham foyda keltiradi :)

Agar siz butun postni o'qib chiqsangiz, lekin CSS-da o'zingizning gorizontal ochiladigan menyuni qanday qilishni topa olmasangiz, sharhlarda savol bering yoki sayt qidiruvidan foydalaning.

Shuningdek, men sizga https://site/vypadayushhee-menu/ ota-sahifasiga tashrif buyurishingizni maslahat beraman, u erda ochiladigan menyularning barcha misollari va turlari to'plangan.

Gorizontal menyu - bu veb-sayt bo'limlari ro'yxati, shuning uchun uni element ichiga joylashtirish mantiqiyroq

Odatiy bo'lib, barcha ro'yxat elementlari vertikal ravishda joylashtirilgan bo'lib, konteyner elementining butun kengligini egallaydi, bu esa o'z navbatida konteyner blokining butun kengligini egallaydi.

Gorizontal navigatsiya uchun HTML belgilash

Menyu elementi
Menyu elementi
Menyu elementi

Teg ichida joylashgan gorizontal menyu qo'shimcha ravishda ... va/yoki ... elementi ichiga joylashtirilishi mumkin. Buning yordamida HTML belgisi semantik ma'noga ega bo'ladi va menyu blokini formatlash uchun qo'shimcha imkoniyat beradi.

Ularni gorizontal ravishda joylashtirishning bir necha yo'li mavjud. Birinchidan, navigatsiya elementlari uchun standart brauzer uslublarini tiklashingiz kerak:

Ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ chekka: 0; /*1em ga teng yuqori va pastki chetni olib tashlash*/ padding-left: 0; /*40px ga teng chap toʻldirishni olib tashlash*/ ) a (matnni bezash: yo'q; /* havola matnining tagiga chizishni olib tashlash*/)

Ro'yxat elementlarini kichik harflar bilan yozish. Natijada, ular gorizontal ravishda joylashtiriladi, ular orasidagi o'ng tomonda 0,4em bo'sh joy qo'shiladi (shrift o'lchamiga nisbatan hisoblangan). Uni olib tashlash uchun li li uchun manfiy o'ng chekka qo'shing (chet-o'ng: -4px;) . Keyinchalik, biz havolalarni o'zimiz xohlagan tarzda shakllantiramiz.

Ro'yxat elementlarini suzuvchi qilish. Natijada, ular gorizontal holatda joylashgan. Konteyner blokining balandligi ul nolga aylanadi. Ushbu muammoni hal qilish uchun biz ul ga (overflow: hidden;) qo'shamiz, uni kengaytiramiz va shu bilan suzuvchi elementlarni o'z ichiga olishiga imkon beramiz. Havolalar uchun (displey: blok;) qo'shing va ularni xohlaganingizcha uslublang.

Ro'yxat elementlarini inline-blok qilish. Ular gorizontal holatda joylashganki, birinchi holatda bo'lgani kabi, o'ng tomonda bo'shliq hosil bo'ladi. Havolalar uchun (displey: blok;) qo'shing va ularni xohlaganingizcha uslublang.

yordamida ul ro'yxatini moslashuvchan konteyner qilish. Natijada, ro'yxat elementlari gorizontal ravishda joylashtirilgan. Biz havolalar uchun (displey: blok;) qo'shamiz va ularni xohlagancha uslublaymiz.

O'qing:

Mixail Men “Qurilish ekspertizasi institutini rivojlantirish” xalqaro konferensiyasini ochdi Axborot tizimlarining davlat axborot tizimlarining normativ hujjatlari ro'yxati Plastilin multfilmi "loyihasi" taqdimoti U erda Ninochka ismli kichkina qiz yashar edi Alla Dovlatova: tarjimai holi, shaxsiy hayoti, oilasi, eri, bolalari, homiladorlik - fotosurat