Gorizontal menyuê sayt uchun bo'linmalar ro'yxati, uni elementning o'rtasiga joylashtirish mantiqiyroq
- , va keyin yogo elementlariga CSS-uslublarini zasosuvat. Menyuning bunday kengayishi veb-saytdagi o'z mavqeidagi aniq yutuqlar tufayli eng kengaytirilgan.
- Menyu elementi
- Menyu elementi
- Menyu elementi ...
- menyu uchun blok trim
- menyuning o'zi, belgilash ro'yxati orqali ko'riladi (ul teg)
- yaxshi, menyu elementlari o'rtada va ularda, shubhasiz, allaqachon xabar bor
- vertikal tekislash: pastki - bu kuch uni ajratib ko'rsatish uchun kerak bo'ladi, shunda menyu elementi matni 2 qatorni oladi va u bir tekisda paydo bo'ladi. Menyuni kengaytiradigan bo'lsak, siz quvvatni ko'rishingiz, o'lchovni oshirishingiz mumkin, shunda nuqtalar siqiladi va matn ikki qatorga o'tkaziladi va ko'rsatish muammosini hal qiladi. Quvvatni orqaga qaytaring va hamma narsa yaxshi bo'ladi.
- displey: jadval-hujayra - biz menyuning o'zini jadval qatori sifatida ko'rsatish uchun o'rnatdik, elementlardan birini jadval qatori sifatida ko'rsatishni o'rnatish mantiqan to'g'ri keladi. Tse obov'yazkovo.
- width: auto - paragrafdagi matn uzunligiga qarab kenglik avtomatik ravishda hisoblanadi
- text-align: markaz faqat matnni o'rtaga markazlashtirish uchun
- balandlik: 50px - balandlikni 50 pikselga o'rnating
- Xo'sh, chegara-o'ng - bu shunchaki o'ng qo'l chegarasi, ballar uchun bunday ajratuvchi
- kuch matn-bezak skasovuê podkrelennya posilan, yak umovchannyam orqasida qo'yish
- kengligi: 1000px - ehtimol eng muhim qator. Taxminan bir xil kenglikni o'rnatish kerak, ehtimol kamroq, lekin maksimal keng menyu elementidan ham ko'proq. Agar siz 1000 piksel kenglikka ega bo'lishni xohlamasangiz, li menyu elementining kengligini o'rnating, buning uchun kenglik avtomatik qilib o'rnatiladi, so'ngra menyudagi istalgan miqdordagi elementlar uchun o'rnatilishi uchun uni ishlashiga ruxsat bering. kengligi 100 pikselgacha.
- vertikal tekislash: o'rta va displey: jadval-hujayra - avval matnni vertikal ravishda markazda, ikkinchisida esa matnni o'rtada ko'rsatishga harakat qiling. Hokimiyat uchun jinoyatlar kerak.
- shrift - bu shunchaki shrift uchun sozlamalar to'plami. Ushbu maqolada shriftlar uchun CSS quvvati haqida o'qing.
- menyu dinamik ravishda kengayadi;
- chakana sotuvchidan farq nuqtasiga qadam qo'ying;
- Bu kichkina quyon yanada chiroyli bezatilgan.
- o'ldirishni maqsad qilganda vipadashkoy bilan
- uchinchi teng bir splicing vapadka bilan
- Ovoz kodi
- Sinf selektori orqali elementning faol holatini belgilashning mumkin emasligi. paragraflarda rozryv sív orqali Tse vídbuvaêtsya (yakscho bu bitta). Muammoni hal qilish ro'yxat elementlariga yana bitta konteyner qo'shishdir.
- Siz ko'rgan menyu uchun kodni salbiy oqim orqali kiritishingiz kerak.
Gorizontal menyuni qanday yaratish kerak: tartib va dizayn
HTML tartibi va gorizontal menyu uchun asosiy uslublar
Qulflash uchun ro'yxatning barcha elementlari joylashtirilgan vertikal, konteyner blokining butun kengligini o'z ichiga olgan konteyner elementining butun kengligini qamrab oladi.
Gorizontal navigatsiya uchun HTML belgilash
Tegning o'rtasida paydo bo'ladigan gorizontal menyu elementning o'rtasiga qo'shimcha ravishda joylashtirilishi mumkin yoki
ísnuê kílka yo'llari í̈x gorizontal. Kob uchun navigatsiya elementlari uchun reklama aktsiyalari uchun brauzer uslublarini o'chirish kerak:
Ul ( roʻyxat uslubi: yoʻq; /*roʻyxat belgilarini olib tashlash*/ hoshiya: 0; /*yuqori va pastki chetni olib tashlash, teng 1em*/ padding-left: 0; /*chap chetni olib tashlash, teng 40px*/ ) a ( matn dekoratsiyasi: yo'q; /*matn bezaklarini olib tashlash */)
1-usul. li (displey: inline;)
Robimo elementlar ro'yxati malimi. Natijada, hid gorizontal ravishda tarqaladi, o'ng tomon ularning orasiga qo'shimcha bo'sh joy qo'shiladi, bu 0,4em (shrift o'lchamiga qarab hisoblanadi). Yogadan foydalanish uchun li uchun li uchun salbiy o'ng maydonni qo'shing (chekka-o'ng: -4px;) . Biz vlasnym minoralari uchun stilistik so'rov berdik.
2-usul. li (suzuvchi: chap;)
Robimo elementlari ro'yxati suzuvchi. Natijada, hid gorizontal ravishda tarqaladi. Blok-konteyner ul balandligi nolga o'rnatiladi. Ushbu muammoni hal qilish uchun ul (toshib ketish: yashirin;) qo'shing, uni kengaytiring va suzuvchi elementlarni olishga ruxsat bering. Xabar uchun (displey: blok;) qo'shing va uni o'zingizning bajaningiz uchun uslublang.
Variant 3. li (displey: inline-block;)
Robimo elementlari qator-blok ro'yxati. Xushbo'y hid gorizontal ravishda tarqaladi, o'ng tomondan birinchi tomchi kabi bo'shliq bor. Xabar uchun (displey: blok;) qo'shing va uni o'zingizning bajaningiz uchun uslublang.
4-usul. ul (displey: flex;)
Robimo list ul qo'shimcha model uchun egiluvchan konteyner bilan. Natijada, ro'yxat elementlari gorizontal ravishda joylashtiriladi. Dodayomo yuborish (displey: blok;) va uni bajaningiz uchun uslublash.
1. Xabar ustiga sichqonchani olib borganingizda oshirish effektiga ega sezgir menyu
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (roʻyxat uslubi: yoʻq; hoshiya: 40px 0 5px; toʻldirish: 25px 0 5px; matnni tekislash: markaz; fon: oq; ) .menu-main li (displey: inline-block;) .menu- asosiy li: keyin (tarkib: "|"; rang: #606060; displey: inline-block; vertical-align:top; ) .menu-main li: last-child: after (kontent: hech biri;) .menu-main a (matn-bezatish: yo‘q; shrift oilasi: "Ubuntu Condensed", sans-serif; harflar oralig‘i: 2px; joylashuv: nisbiy; to‘ldirish-pastki: 20px; chekka: 0 34px 0 30px; shrift o‘lchami: 17px; matnni o'zgartirish: katta harf; displey: inline-block; o'tish: rang .2s; ) .menyu-asosiy a, .menyu-asosiy a: tashrif buyurilgan (rang: #9d999d;) asosiy a:hover(rang: #feb386;) .menu-main a:oldin, .menu-main a:so‘ng (tarkib: ""; pozitsiya: mutlaq; balandlik: 4px; tepa: avtomatik; : -5px; chap: 50%; fon: #feb386; o‘tish: . 8s; ) .menu-main a:hover:oldin; hover:so'ng, .menu-main .current:so'ng (o'ngda: 0; ) @media (maksimal kenglik: 550px) ( .menu-main (padding-tepa: 0;) .menu-main li (displey: blok; ) .menu-main li:so‘ng (tarkib: yo‘q;) .menyu- a ( to‘ldirish: 25px 0 20px; hoshiya: 0 30px; )2. Qiziqarli sayt uchun javob beruvchi menyu
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (pozitsiya: nisbiy; fon: #fff; quti-soya: inset 0 0 10px #ccc; ) .top-menu:oldin, .top-menu:keyin (kontent: ""; displey: blok; balandlik : 1px;chegara-yuqori: 3px qattiq #575350; hoshiya-pastki: 1px qattiq #575350; chekka-pastki: 2px; ) #575350;box-soya: 0 2px 7px #ccc; tepadan chet: 2px; ) .menu-main (roʻyxat uslubi: yoʻq; toʻldirish: 0 30px; markaz; joylashuv: nisbiy; ) .menu-main:oldin; ); . . (matn bezatish: yo‘q; displey: inline-blok; hoshiya: 2px 5px; to‘ldirish: 6px 15px; shrift oilasi: "PT Sans", sans-serif; shrift o‘lchami: 16px; rang: #777777; chegara pastki : 1px qattiq shaffof; n: .3s chiziqli; ) .menu-main .current, .menu-main a:hover (chegara-radius: 3px; fon: #f3ece1; rang: #313131; matn soyasi: 0 1px 0 #fff;@media (maksimal kenglik: 500px) ( .menu-main li (displey: blok;) )3. Qisqichbaqalar bilan sezgir menyu
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( roʻyxat uslubi: yoʻq; toʻldirish: 0 30px; hoshiya: 0; shrift oʻlchami: 18px; matnni tekislash: markaz; joy: nisbiy; fon: oq; ) .menu-main: keyin ( kontent: ""; pozitsiyasi: mutlaq; eni: 100%; balandlik: 20px; chap: 0; pastki: -20px; 255,255,255,0) 100%) 0 -10px; fon o'lchami: 20px 20px; fon-takrorlash: takrorlash-x; ). yo'q; displey: inline-block chegara: 0 15px; to'ldirish: 10px 30px; font-family: "PT Sans Caption", sans-serif; -main a:oldin, .menu-main a:after (tarkib: ""; pozitsiya: mutlaq; tepa: calc(50% - 3px); kenglik: 6px; balandlik: 6px; #F58262; shaffoflik: 0; oʻtish: .5s oson kirish; ). joriy:oldin, .menu-main a.cur ijarasi: keyin, . ) @media(maksimal kenglik:680px) ( .menu-main li (displey: blok;) )4. Sahifada sezgir menyu
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .top-menyu (chegara: 0 60px; joylashuv: nisbiy; fon: #5A394E; quti-soya: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,2) 0 150px -150 rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255.255.255,.12);.top-menu:oldin, .e z-index: 2; chap: 0; kengligi: 100% balandligi: 3px; ) .top-menu:oldin ( tepa: 0; menyu: keyin (pastki: 0; chegara tepasi: 1px chiziqli rgba(255,255,255,.2); ) .menu-main ( roʻyxat uslubi: yoʻq; toʻldirish: 0; hoshiya: 0; matnni tekislash: markaz; ) .menu-main:oldin, .menu-main:keyin (tarkib: ""; joy: mutlaq; en: 50px; balandlik: 0; tepa: 8px; 5A394E; transform: aylantirish(360deg); z-indeks: -1; ) .menyu-asosiy:oldin (chap: -30px; asosiy: keyin (oʻng: -30px; chegara-oʻng: 12px qattiq rgba(2 55, 255, 255, 0) ); ) .menu-main li (displey: inline-block; hoshiya-o‘ng: -4px; ) .menu-main a (matn-bezatish: yo‘q; displey: inline-blok; Sans Caption", sans-serif; rang : oq; o'tish: .3s chiziqli; ) .menyu-asosiy a.joriy, .menu-main a: hover @media (maksimal kenglik: 680px) ( .yuqori menyu (chegara: 0;) .menu-main li ( displey: blok; chekka-o'ng: 0; ) .menu-main:oldin, .menu-main:keyin (tarkib: yo'q;) .menu-main a (displey: blok;) )5. O'rtada logotipli sezgir menyu
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (pozitsiya: nisbiy; fon: rgba(34,34,34,.2); ) .menu-main (ro‘yxat uslubi: yo‘q; chekka: 0; to‘ldirish: 0; ) .menu-main:keyin (kontent: ""; displey: jadval; aniq: ikkalasi; ) .chap-element (suzuvchi: chap;) .o'ng-element (suzuvchi: o'ng;) .navbar-logo (pozitsiya: mutlaq; chap: 50%; yuqori : 50%; transform: translate(-50%,-50%); ) .menyu-main a (matn-bezatish: yoʻq; displayj: blok; ; harflar oraligʻi: 2px; shrift oilasi: “Arimo”, sans -serif; shrift og'irligi: oq; 0,0,.3);) @media (maksimal kenglik: 830px) (.menu-main (to'ldiruvchi-yuqori: 90px; matnni tekislash: markaz;)). ; yuqori: 10px; transform: translateX(-50%); ) .menyu-main li (float: yo‘q; displey: inline-block; ) -o‘lcham: 16px; ) ) @media (maksimal kenglik: 630px) ( .menu-main li (displey: blok;)) )6. Zliva logotipi bilan sezgir menyu
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu (fon: rgba(255,255,255,.5); quti soyasi: 3px 0 7px rgba(0,0,0,.3); toʻldirish: 20px; ) .top-menu: keyin (kontent: "" .display: jadval; aniq: ikkalasi; ) .navbar-logo (displey: inline-block;) . li (displey: inline-block;) .menu-main a (matn-bezatish: yo‘q; displey: blok; : 2px; shrift oilasi: "Arimo", sans-serif; shrift-og‘irligi: qalin; rang: #F73E24 ;o'tish:.3chiziqli; ). balandlik: 9px;fon:#F73E24;pozitsiya: mutlaq;chap:50%;transform: rotate(45deg) translateX(6.5px);shaffoflik:0;oʻtish:.3s chiziqli; (shaffoflik: 1;) @media (maksimal kenglik: 660px) ( .menu-main ( float: none; padding-top: 20px; ) .top-menu ( text-align: center; padding: 20px 0 0 0; ) .menu-main a (to‘ldirish: 0 10px;) .menu-main a:old bo‘lish (transform: rotate(45deg) translateX(-6px);) ) @media (maksimal kenglik: 600px) ( .menu-main li (ko'rsatish: blok;) )Vitanniya. Anchadan beri html/css haqida post yozmadim. Yaqinda yangi tartib yaratishni boshlagan va jarayonda foydalanilgan cicavia priyom, bu sizga gumovim menyusini kengaytirish imkonini beradi (yangisidan oldin siz yangi elementlarni qo'shishingiz mumkin va kengayish oshirilmaydi, lekin Batkiv blokining 100% bo'ladi). Bugungi kunda CSS gum menyusida ham amalga oshirildi.
Maqolani o'qish uchun kim g'amxo'rlik qiladi, siz videoni hayratda qoldirishingiz mumkin. Muallif ham hamma narsani juda yaxshi tushuntiradi:
CSS-dagi saqich menyusi - krok 1
Birinchi Croc - Tse Zavjdi html tartibi usiz qayerda. Ale, bizning vipadkada hamma narsa oddiy bo'ladi:
Hammasi aniq edi, eksa men uchun quyidagi koddir:
Har bir narsani standart deb hisoblasak, o'q quyidagicha:
Endi biz hamma narsani kerakli ko'rinishga keltiramiz, robot uchun CSS olinadi.
Krok 2 - asosiy uslublar
Keyinchalik, obgortsa blokiga uslublar qo'shaman. Va o'zim uchun maksimal kenglikni 600 pikselga o'rnataman (menyu mos kelishi uchun skrinshotni qo'lda olish uchun), shuningdek, blokni markazlashtiraman.
o'rash (
fon: #fff;
maksimal kenglik: 600px
chegara: 0 avtomatik;
}
Krok 3 - realistik gumanizm
Endi menyuning o'ziga o'ting. Yangisidan (ul tegidan) men markerlarni olib tashlayman, fonning chiziqli gradientini oshiraman va, eng muhimi, displeyni o'rnataman: menyu jadval qatori kabi harakat qilishi uchun jadval qatori quvvatini konteynerga o'rnataman. Masofaviy manipulyatsiyalar uchun ko'tarish muhimdir.
R-menyu(
fon: chiziqli-gradient (o'ngga, #b0d4e3 0%, #88bacf 100%);
displey:jadval-qator;
ro'yxat uslubi: yo'q;
}
Yak bachite, yo'l-yo'riq kodi mo'ylov bilan kesib o'tdi, bu haqda men yozdim. Bu haqda gapiradigan bo'lsak, Ultimate CSS Gradient Generator vositasi yordamida gradientlarni qo'lda yarating. Men yangisi haqida ko'proq yozaman.
R-menyu li(
vertikal tekislash: pastki;
displey:jadval-hujayra;
kenglik: avtomatik;
matnni tekislash: markaz;
balandligi: 50px;
chegara o'ng: 1px qattiq # 222;
}
Menyu noaniq ko'rinsa-da, lekin hech narsa yo'q, Yogoni shlakka olib keladigan vaqt keldi. 
Qoling, sizga kerak bo'lgan narsa - o'rta paragraflar uchun uslublarni o'rnating. Mana menda bu kod bor:
R-menyu li a (
matn-bezak: yo'q;
kengligi: 1000px
balandligi: 50px;
vertikal tekislash: o'rta;
displey:jadval-hujayra;
rang: #fff;
shrift: oddiy 14px Verdana;
}
I o'qi endi menyu quyidagicha ko'rinadi:
Xo'sh, men sizga aytaman, men qatorlarni tushuntiraman:
Krok 4 (minoralar orqasida) interaktivlikni qo'shish mumkin
Masalan, kursor ustidagi menyu elementining rangini o'zgartirish uchun. Realizuêtsya tse oddiyroq, psevdo-sinf yordami uchun.
R-menyusi: kursorni olib keling (
fon rangi: #6bba70;
}
Menyuda guminess uchun sinov
Aslida, menyu tayyor, lekin biz eng ahmoqona narsani tekshirmadik - men sizga aytganimdek, biz xirillaymiz. Xo'sh, men menyuga yana 2 ta narsani qo'shaman:
Menyu 600 pikselli chegarasini yo'qotdi. Qolgan nuqtalar bir-biriga siqib qo'yildi, shunda 2 ta yangi joy qo'yildi.
Men yana 1 ball qo'shaman:
Xuddi shunday, menyu biroz o'zgardi va boshqa element butunlay normal bo'lib ko'rinadi. Va yakby vertikal tekislash kuchiga ega emas edi: pastki, yak haqida, men sizga aytdim, menyu yaxshiroq ko'rinadi.
Menyuni uchta nuqtaga o'zgartiraman.
Ob'ektlar boyib ketdi, lekin menyuning o'zi kenglikda o'zgarmadi. Axis mi va zrobili 100% gum menyusi!
Yoga qanday moslashish kerak?
Asos sifatida, siz o'rash blokini qattiq emas, balki maksimal kenglikka o'rnatganingiz uchun uni moslashtirish shart emas. Mening afzal ko'rganim quvvatni maksimal kenglikka o'rnatish: 600px va kengligi 600 pikseldan kam bo'lsa, blok gorizontal aylantirishni oldini olish uchun ekranni kuzatib borish uchun shunchaki o'lchamini o'zgartiradi.
Xo'sh, agar siz biror narsani o'zgartirmoqchi bo'lsangiz yoki menyuni o'zgartirmoqchi bo'lsangiz mobil yordamchi binolar lekin keng ekranlarda, keyin ommaviy axborot vositalari sizga yordam beradi! Veb-saytga omad tilaymiz!
Biz seriyani siz ko'rgan narsalarga menyularni belgilash bo'yicha dars bilan davom ettiramiz. Gorizontal menyuda, ko'rgan narsangiz, o'z qo'llaringiz bilan CSS-da.
Yakshcho siz bu erda vipadkovoda ichdingiz yoki menyuni amalga oshirish haqida hazil qildingiz, nima ko'rsangiz, raja Batkivskiy filialiga boring.
Har bir bo'limda CSS va HTML da paydo bo'ladigan gorizontal menyu tavsifi bo'ladi.
Yon navigatsiya:
men shunday Bizning vazifamiz:
robiti gorizontal menyu css ro'yxati (ul li ro'yxatlarida) holda jQuery wiki deb Javascript, shuningdek zastosuvannya jadval holda
kodda.
Siz ko'rgan gorizontal menyu
Biz oldindamiz, kod yozishni boshlashdan oldin ishlashimiz kerak html shablon menyu uchun.
Shu munosabat bilan biz universal menyu yaratmoqchimiz, men uni iloji boricha WordPress menyusi ko'rinishiga o'xshash qilishni xohlayman. Menimcha, bu eng oddiy va universal Html menyu kodlaridan biridir. Bu kabi ko'rinish:
Koddan ko'rinib turibdiki, siz ko'rib turgan menyumiz ul va li ro'yxatlarida amalga oshiriladi. Eksa CSS uslublarisiz ushbu menyuga o'xshaydi:
Aytaylik, oldinga qarab, ajoyib ro'yxat kabi. Ular bizga menyuni qo'shimcha CSS uslublari bilan bezash zaruratini berdi.
CSS-ga tushadigan gorizontal menyu
Menyu uchun CSS uslublari, ko'rinadigan narsa va nafaqat - ko'proq narsa kerak. Siz ko'rib turgan yosh yorlig'i psevdo-sinf asosida kurashing: hover.
Siz ko'rgan gorizontal menyu uchun bizga shunday o'q kerak:
#menu1(pozitsiya:nisbiy; displey:blok; kenglik:100%; balandlik:avtomatik; z-indeks:10; ) #menu1 ul(pozitsiya:nisbiy; displey:blok; chekka:0px; to‘ldirish:0px; eni:100 %;height:auto;list-style:none;fon:#F3A601; menu1 ul li(pozitsiya:nisbiy; displey:blok; float:chap; width:auto; height:auto; ) #menu1 ul li a( displey: blok; to‘ldirish: 9px 25px 0px 25px; shrift o‘lchami: 14px; shrift oilasi:Arial, sans-serif;color:#ffffef;line-height:1.3em;matn-dekoratsiya:yo‘q;shrift-weight:bold;matn -transform:katta;height:36px;box-sizing:border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( fon:#EBBD5B; rang:#2B45E0; )
Bu oxiri emas, balki asosiy gorizontal menyu uchun CSS-ning faqat bir qismi. Menyu ro'yxati uchun uslublarni yozamiz:
#menu1 ul li ul (pozitsiya:absolute; tepa:36px; chap:0px; displey:yo'q; en:200px; fon:#EBBD5B; ) #menu1 ul li:hover ul(displey:blok;) hover mexanizmi*/ # menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li(displey:blok; text-transform:none; balandlik:avto; 100% box-sizing:border-box;border-top :1px qattiq #ffffff; ) #menyu1 fon:#FDDC96; rang:#6572BC;
O'q endi u. Amalga oshirishning pasayishi mexanizmining o'zi bir qatorda.
Menyudan terini ko'ring:
Guruch. 2 (gorizontal menyu, siz ko'rgan narsa)
Quyida robotlashtirilgan ochiladigan menyuning demo-sharhi, shuningdek, dam olish uchun ijaraga so'rov mavjud. (Demo o'rta tomonning tepasida o'ynaladi, yangi oynada ochishni bosishingiz shart emas 🙂 yoki juda ko'p ayiqlar mavjud)
To'liq kenglikdagi gorizontal menyu
Ko'pchiligingiz menga bu kabi menyularni aytib, ko'proq ko'rsatganimdek, menga kamroq aytib berishingiz mumkin, agar men bunday menyular bilan yangi maketlar yozmoqchi bo'lsam, o'tmishdan va sizning ratsioningizdagi qandaydir qismni payvand qilaman.
Menimcha, siz dumbadan foydalangansiz. Html o'zgarishsiz qoldiriladi va biz yana CSS o'qini eslaymiz. Siz shunchaki CSS kodini bu yerdan olib, uni dumba ichiga joylashtirishingiz mumkin yoki uni ishlayotgan demo rejimida ko'rishingiz mumkin.
#conteiner( width:1000px; height:auto; 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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 ul li a( display:block; :14px;font-family:Arial, sans-serif;color:#ffffef;line-height: 1.3em;matn-bezatish:yo‘q;shrift-og‘irligi:bold;matn-transform:katta;:border-box; ) #menu1 ul li > a:hover; :0px; ko'rsatish: yo'q; kenglik: avtomatik; fon:#EBBD5B; oq bo'sh joy:nowrap; ) #menu1 ul li:so'nggi bola ul(/*oxirgi element o'ngga yopishtiriladi*/ chap:avto; o'ng:0px; ) ochiladigan menyu*/ #menu1 ul li ul li(displey:blok; eni:avto; ) #menu1 ul li ul li(displey:blok; matnni o'zgartirish:yo'q; balandlik:avto; quti o'lchami:border-box;border-top:1px qattiq #ffffff;) #menu1 #FDDC96; rang:#6572BC;
Bundan tashqari, bu dumba birinchi marta kabi ko'rinadi, deb menyu, siz yiqilib, o'zi, kuzda cho'zilgan, barcha menyu ob'ektlar kengligidan.
Boshqa menyu elementlari uchun bu variant qulayroq bo'lmasligi mumkin, chunki hid chegaradan tashqarida bo'ladi. Quvvatni o'chirish uchun "white-space:nowrap;" quvvatini bilish kifoya. selektor #menyu1 ul li ul i yoga bor.
Quyida siz demoga qarashingiz yoki gorizontal menyu ko'rinishini olishingiz mumkin:
Chakana sotuvchilarsiz menyu shunday ko'rinadi. Siz html-ga kengaytmalarni qo'lda qo'shishingiz mumkin, lekin agar sizda CMS bo'lsa, masalan, WordPress, u erda qo'lda qo'sha olmaysiz.
Chakana sotuvchilar bilan gorizontal menyu
Shu kabi o'nlab variantlar mavjud toza CSS menyu elementlari o'rtasida er (rozdylyuvach) qo'shing. Twisting::before yoki::after kabi parametrlar, aks holda men chegara-chap, chegara-o‘ngni takrorlamayman.
Vaziyatlar mavjud, agar tartib juda ajoyib bo'lsa, jQuerysiz qilolmaysiz.
Bizda juda ko'p html kod bor, biz uni jQuery kutubxonasining o'ziga, ya'ni g'alaba qozongan faylga ulaymiz:
Bir paytlar.
Siz tushunganingizdek, fayl yaratish kerak script-menu-3.js va ushbu kichik kodni kiriting:
$(hujjat).ready(function()( $("#menu1 > ul > li:not(:oxirgi bola)").after(" "); ));
Bunday menyu uchun CSS uslublari qoldirilishi kerak, bu nima, + bu qismning o'qini oxirigacha tashlang:
#menu1 ul li.razd( balandlik: 28px; kenglik: 1px; fon: #ffffff; margin-top: 4px; )
JQuery-dagi variantlar bilan bunday gorizontal menyuni ko'rish uchun o'q quyidagicha bo'ladi:
Siz demoni ko'rishingiz yoki quyidagi gorizontal menyu shablonini olishingiz mumkin:
Bunday yechimning afzalliklari quyidagilardan iborat:
Gorizontal Baghatorivneve CSS+HTML menyusi
Bu bugatorivne haqida bo'lganligi sababli, kursorni o'tayotganda menyu yo'qoladi, ularni alohida kichik guruhlarga bo'lish mumkin:
Dumbamda ko'rsataman bagatorivneve menyusi 3 uchun CSS teng, menimcha, nima qilish kerakligini tushunish qiyin bo'lmaydi.
Agar kursorni bosganingizda kitobdagi yorliq bilan Bagatorivneve menyusi
Kob uchun bizga html-ni biroz o'zgartirish kerak. U erda siz 3-qator uchun bir nechta qatorlarni olasiz:
#conteiner( width:1000px; height:auto; 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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left;) #menu1 ul li.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a ( displey:blok; padding:9px 45px 0px 45px; em;matn-bezatish:yo'q;shrift-weight:bold;matn-transform:katta;height:36px;box-sizing:border-box;) #menu1 ul li ( fon: #EBBD5B; rang:#2B45E0; ) #menyu1 ul li ul(pozitsiya:mutlaq; tepa:36px; chap:0px; displey:yoʻq; kenglik:avtomatik; fon:#EBBD5B; oq boʻshliq:nowrap; ) # menyu1 > ul > li:oxirgi bola > ul(/*oxirgi element bo‘ladi o'ng chetidagi qo'shimchalar*/ chap:avto; o'ng: 0px; ) #menu1 ul li:hover > ul(displey:blok;)/*bu satr hover 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: avtomatik; toʻldirish: 7px 45px; kenglik: 100%; quti oʻlchami: chegara qutisi Chegara tepasi: 1px qattiq #ffffff; ) a( fon:#FDDC96; rang:# 6572BC ; ) #menu1 ul li ul li ul( top:0px; > ul ul(chap:avto; o‘ng:100%;) #menu1
jQuery fayllari xuddi oldingi qismdan ko'chiriladi. Vyrishiv chakana sotuvchilarni tark etdi, shunda menyu biroz yaxshiroq ko'rinadi. Albatta, ularsiz ham mumkin.
Eksa quyidagicha ko'rinardi:
Men o'ng qo'l va o'rtada qanday ko'rinishimni ko'rsatish uchun bittasida 2 ta teri yaratdim.
Quyida siz demoni ko'rishingiz va aktsiyani yuklab olishingiz mumkin:
Sichqoncha ustiga oʻtayotganda birlashtiruvchi ochiladigan menyu bilan paydo boʻladigan boy menyu
Troch yog'i sarlavhaga kiritilmagan, ammo smut kodini siqib chiqardi.
Ushbu dumbaning mohiyati gorizontal menyuni yaratishdan iborat bo'lib, u to'liq kenglikka tushadi va to'liq kenglik + boylikka tushadi.
Men html kodini o'zgartirmayman, uni old qismidan olishingiz mumkin. jQuery'dagi Razdylyuvachi ham to'lib-toshgan.
Faqat CSS-ni qayta-qayta o'zgartiring:
#conteiner( width:1000px; height:auto; 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; :relative; display:inline-block;width:auto ;height:auto;vertical-align:top;text-align:left; ) #menu1 > ul > li(position:static;) :28px;width:1px;fon:#ffffff;margin-top:4px;) # menu1 ul li a(displey:blok;to‘ldirish:9px 45px serif; rang:#ffffef;satr balandligi:1,3em;matn-bezatish:yo‘q;shrift-og‘irligi:bold;matn-transform:katta;balandlik:36px; a :hover, #menu1 ul li:hover > a( fon:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul(pozitsiya:absolute; top:36px; chap:0px; displey:yo‘q; eni:100%; fon:#EBBD5B; ) #menu1 > ul > li > ul::after( toza:ikkalasi; float: n bitta; kengligi: 100%; balandlik: 0px; tarkibi:" "; ) #menyu1 :blok; kengligi: 30%; float:chap; ) #menu1 ul li ul li a( displey:blok; -box ; rang:#6572BC; ; blok;float:hech;kenglik:100%;) #menu1
Menyuning o'qi shunday ko'rinadi: Yagona lahza - sayt etarli joy bo'lishi mumkin, shuning uchun o'ngdagi ekstremal nuqta uchun joy yo'q. Bu muammoni hal qilish mumkin: nth-child, lekin men shaharni to'smoqchi emasman.
Gorizontal menyu paneli demosiga qarang:
Esingizda bo'lganidek: pastki plastinka ham to'liq kenglikdir. O'q juda uyatchan bo'lib, bloklar nayzasidan yiqilib tushadi.
Men buning uchun hamma narsaga tayyorman, ishonchim komilki, men siz uchun bir dumba istayman. Hurmat uchun rahmat.
Tse melankolik va ím olib, va men 🙂.Agar siz postni yaxshilab o'qib chiqqan bo'lsangiz, lekin gorizontal menyuingizni qanday yaratishni bilmasangiz, CSS-da nimani ko'rishingiz mumkin, izohlarda ovqatni sozlang yoki tezda saytni qidiring.
Demak, raja ota tomonini ko‘radi https://website/vypadayushhee-menu/, barcha qo'llaniladigan va turli xil menyular tanlangan.
Sayt uchun menyuni joylashtirish sxemasini kengaytirish uchun, agar undan konteyner butun kenglikni egallasa, u yon tomonda mavjud. Shu bilan, birinchi nuqta chap chetida, qolgan qismi esa o'ng tomonda joylashgan va chekka elementlari orasida joylashgan. Bugun biz sizga qanday kurashish kerakligini aytib beramiz.
Biz sizga amalga oshirishni taklif qilamiz saqich menyusi da CSS-ga yordam bering resursingiz uchun. Ushbu menyu uchun elementlar bir qatorga joylashtirilgan. Javascript mavjud emas. Menyuda ajoyib ro'yxat uchun xonalar bo'ladi. Bunday menyuning bosh figurasi ko'p qirrali, chunki u raqam ekanligida o'zini namoyon qiladi, shuning uchun hatto dozhina ponksiyon bo'lishi mumkin.
Qanday amalga oshirish kerak?
Teri dasturchisi belgilangan vazifani bajarishning o'ziga xos usulini taklif qilishi mumkin. Har bir narsani o'zingizning tasavvuringiz nurida, professionallik va zdibnosti bilan tenglashtirish uchun. Muammoning eng keng ko'lamli versiyasi variant jadvalidir. Bu JavaScript-ni tezlashtirishga da'vat qilgan kishi uchun ham boy. Sokin, qadriyatlarni ko'rsatish uchun kuchni tezlashtirishga chaqirdi stol yoki stol katakchasi- Men uyaltirishga shoshilaman. Bu usul yetarlicha oʻzaro brauzer mos kela olmaydi.
Bizning yechimimiz
Bizning taklifimiz HTML5 va CSS3 bo'yicha chuqur bilimga asoslanadi.
Jarayonning mohiyati - qiymatlarni oqlash uchun matnni tekislash kuchi. Unutganlar uchun men taxmin qilaman: hokimiyat matnni konteynerning to'liq kengligiga yo'naltiradi.
Bizning qaror tanlash bilan, biz ikki obov'yazykovyh qoidalarini qo'shishingiz mumkin. Birinchi narsa, menyu elementi uchun idishning kengligi kichikroq, pastroq matn bo'lishi mumkin. Tobto bir qatorda emas. Yana bir muhim qoida shundaki, so'zlar bir-biridan qat'i nazar, yolg'on gapirish uchun bir nuqtaga qadar teng ravishda chiqariladi.
Quyida "hum" menyusini yaratishning asosiy qismi bo'lgan kod ko'rinishi keltirilgan:
HTML
< ul> < li>< a href= "#" >Golovna < li>< a href= "#" >Blog < li>< a href= "#" >Novini < li>< a href= "#" >mashhurroq < li>< a href= "#" >Yangi
ul (matnni tekislash: oqlash; to'ldirish: yashirin; /* yon in'ektsiyani usulga o'rnating */ balandligi: 20px; /* tezh usuvaê zayve */ kursor: standart; /* kursorga kob shaklini o'rnating */ chegara: 50px 100px 0 100px; fon: #eee; to'ldirish: 5px ) li (displey: inline; /* matnli menyu elementlarini o'g'irlash */) li a (displey: inline-block; /* menyu qatorini kengaytirish */ rang: #444; ) a: hover (rang: #ff0000; ) ul: keyin ( /* ishlov berish usuli uchun boshqa qatorni shakllantirish */ Tarkib: "1"; chap chekka: 100% balandligi: 1px; toshib ketish: yashirin; displey: inline-block )
Yaxshi eski Internet Explorer-da ishlash uchun CSS-ga quyidagi kodni qo'shishingiz kerak
ul ( z-index: express(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .oxirgi (chekka-chap: 100%; ) * html ul ( /* faqat ie6 kerak */ balandlik: 30px; )
Hokimiyat va kodning kerakli qiymatlarini ro'yxatdan o'tkazgandan so'ng, biz bunday menyuning o'qini olamiz:
Usulning kamchiliklari
Qaysi brauzerlar ishlaydi?
Planshetlar
6.0+ 6.0+ 10.5+ 5.0+ 3.6+ - -
