Qanday qilib vikoristan skriptlarisiz CSS-da moslashtirilgan yorliqlar (yorliqlar) yaratiladi.

Golovna / Ishni optimallashtirish

Tabi menimcha, ulardan biri eng yaxshi yechimlar ma'lumotlarning tematik tuzilishi, shuningdek, kontentni bir sahifada ixcham taqdim etish uchun.

Bugun biz faqat HTML va CSS3-dan foydalanib Javascript-dan foydalanmasdan bunday funktsional narsani qanday yaratishni aniqlaymiz. Eshik uchun tabiv biz vikorystuvati teg bo'ladi kiritish va CSS selektori:tekshirildi

. Kelajakda biz HTML-da sahifa tartibini yaratish imkoniyatiga ega bo'lamiz Birinchi tab

Ikkinchi tab biz vikorystuvati teg bo'ladi Uchinchi tab Radio oynasini bosish qo'shimcha yorliqlarni faollashtiradi. Pershomu atributni belgilash mumkin checked="cheklangan" Keling, tayyorgarlik uchun birinchi yorliq ustida ishlaylik. Biz radio qutilarini o'zimiz yaratishimiz mumkin va ularni bosish uchun biz tegdan foydalanamiz

yorliq

Eshik oldida atributni belgilash mumkin.tabs_cont Bizda kontent (matn, rasmlar va boshqalar) joylashtiriladigan yorliqlari bo'lgan bloklar bo'ladi. Hozircha hamma narsa oddiy. biz vikorystuvati teg bo'ladi Keling, CSS uslublariga o'tamiz

Yorliqlar (joylashuv: nisbiy; chekka: 0 avtomatik; kenglik: 800px; ) .tablar yorligʻi (rang: #555; kursor: koʻrsatgich; displey: blok; float: chap; kenglik: 150px; balandlik: 45px; chiziq balandligi: 45px joy: nisbiy tepa: 2px; matnni tekislash: markaz) .tabs kiritish (pozitsiya: mutlaq; chap: -9999px; ) #tab_1:checked~ ~ #tab_l3 (fon: #fff; chegara rangi: #fff; tepa: 0; z-indeks: 3; .tabs_cont (fon: #fff; pozitsiya: nisbiy; z-indeks: 2; balandlik: 230px; ) va CSS selektori Bu yerda biz robimo yorlig'i uslublari bo'yicha yordam so'raymiz blok elementi va uning hajmini, joylashtirish joyini va o'rnatadi tashqi ko'rinish (fon va hoshiyalar uchun o'z uslublaringizni o'rnatishingiz mumkin) biz xohlagancha va biz xohlagancha 'va mutlaq joylashishni aniqlash yordami uchun. Quyida xuddi shu selektor mavjud (fon va hoshiyalar uchun o'z uslublaringizni o'rnatishingiz mumkin) biz xohlagancha va biz xohlagancha Ular biz nima haqida gaplashayotganimizni taxmin qilishdi. So'zlarni kechiring

, radio qutisi kabi

Avval barcha yorliqlarimizni yig'amiz. Eng oddiy yechim vikoristdir ko'rsatish: yo'q; , Agar bizga silliqlik kerak bo'lsa, oson marshrutlar biz uchun emas, shuning uchun bizga yordam kerak pozitsiyasi: mutlaq; Biz bloklarimizni ko'rish chegarasidan tashqariga o'tkazmoqdamiz va biz bu blokni kuch chegarasidan tashqarida ko'rish ehtimoli ko'proq. shaffoflik: 0; va muammosiz qiymatni bittaga oshiradi. Quvvat bizga silliqlikka erishishga yordam beradi va CSS selektori o'tish

, keyin tasvirlanganidek.

Keyin yana selektor tezlashadi

Yordam uchun faol radio qutilariga mos keladigan aniq ko'rinadigan bloklar mavjud. Ana xolos! Ushbu uslublarni o'zingiz sinab ko'rish orqali siz hozirgi ko'rinishingizni didingizga qarab o'zgartirishingiz mumkin. Quyida siz chiqish yozuvlaringizni ko'rishingiz mumkin.

Tanlangan elementlarning stilizatsiyasi haqida oldingi post bilan davom eting, garchi biz buni qanday qilishni batafsil bilishni xohlaymiz.

javascript wiki bo'lmagan adaptiv yorliqlar

, mutlaq joylashishni aniqlash va ko'rsatmalar bilan buzish.
Boshlash uchun shuni aytmoqchimanki, men JavaScript-ga CSS-dan boshqa narsa uchun ishonishni tavsiya etmayman, chunki yorliqlarni amalga oshirishning boshqa usuli bo'lmaydi. Vaziyat juda ko'p, agar bunday yondashuv sizga mos kelmasa va siz JSsiz qilolmaysiz, lekin ayni paytda bu haqda emas. Keling, ish natijasida nimani ko'rishni xohlayotganimizni va hozirgacha nimani ko'rishimiz mumkinligini tushunaylik:
JavaScriptsiz robot,
Bir nechta yorliqlarni bog'lash yo'q (biz bitta vidjetni tanlashimiz mumkin
turli sahifalarda
o'rtada turli mazmun bilan),

Moslashuvchanlik,

Maksimal o'zaro faoliyat brauzer va platformalararo muvofiqlik, Eng qulay va aqlli foydalanuvchi interfeysi, Yorliqlarning ichki tartibida cheklov yo'q, u matn, media kontenti yoki yorliqning o'rtasida joylashgan tartib bo'ladimi.

Vizual ravishda u shunday ko'rinishi mumkin:

Variantingizni ko'rsatishdan oldin

JSsiz yorliqlar

Men sizga ishlab chiqish jarayonida biladigan amalga oshirish variantlari haqida ma'lumot bermoqchiman.

Birinchi variant

Lyudina bu usul bilan chiqdi, chunki u aniq koristuvachlar bilan aloqada bo'lishni xohladi va u xuddi shu "qo'lda" volumetrik regulyatorlarni yaratgan Redditorlardan biri edi.

Yorliqni bosganimizda, sahifa o'tishni boshlaydi, shuning uchun brauzer bizni yuborilgan joyga yuboradi.
Albatta, noyob bo'lish mumkin, ammo JSsiz hech qanday yo'l yo'q.
Faol yorliq sarlavhasi ko'rinmaydi, shuning uchun siz u bilan ishlashingiz mumkin, aks holda bu yanada muammoli bo'ladi.
Hech qanday faol yorliq yo'q (ularning bir nechtasi xabarga hali bosilmagan) va biz hackga o'tishimiz va uchinchi yorliqni faol qilishimiz kerak, chunki birinchisini bu tarzda ko'rish mumkin emas.

Moslashuvchanlik yanada qiyinroq: masalan, ekran ovozi eshitilganda yorliqlar yangi qatorga ko'chiriladi va yorliqning mazmuni bir vaqtning o'zida eshitiladi, lekin u juda chiroyli ko'rinmaydi.

Bu muammo ommaviy axborot vositalarining xabarlari tufayli yuzaga kelishi mumkin va juda ko'p yorliqlarga aralashishni istamaydigan shifokorlar va har qanday displey o'lchamlarida muammo yo'qoladi.

O'zgarishlarni asoslashda ehtiyot bo'laylik: bu usul biz uchun mos emas, chunki biz ko'pchilikni qoniqtira olmadik. Amalga oshirish juda achinarli va men g'alaba qozonish kayfiyatida emasman. Boshqa variant

Bu usul

JavaScriptsiz yorliqlarni yaratish

Allaqachon amaliy, garchi turg'unlik bilan bog'liq ba'zi muammolar hali ham mavjud.

Usulning mohiyati tushunarli: yorliqlar sarlavhalari uchun tasdiqlash qutisi va yorliq elementlari qo'llaniladi va qo'shimcha psevdo-sinf orqasida: tekshirilgan va boshqa div elementi, biz faqat faol yorliqning mazmunini ko'rsatishimiz va quyidagilarni qo'shishimiz mumkin. :

Yorliq oʻramiga kiritish:belgilangan + yorliq + .tab-element(ekran: blok;)
Yorliq - o'rash kiritish: belgilangan + yorliq +. yorliq - element (ko'rsatish: blok;) Eksa quyidagicha ishlaydi:

Siz sezgan bo'lsangiz, ushbu ilova bir xil pozitsiyaga ega: mutlaq;

Yorliq sarlavhalarini yuqoriga va yorliq tarkibini pastki qismga joylashtirish uchun.

Uchinchi variant va yagona yechim - boshqa usulni o'zgartirish.

Bu shunchaki, lekin biz sarlavhalar uchun floatning mutlaq joylashuvi va kuchi haqida bahslashmaymiz. U bu usul

Yorliqlar va ularning mazmunini tartibga solish uchun biz yangi moda flexbox-dan foydalanmoqdamiz.

Bu erda flexboxning go'zalligi shundaki, biz birinchi navbatda qaysi elementlar ko'rsatilishini aniqlashimiz mumkin. Siz qo'shimcha xarajatlar buyurtmasi uchun to'lashingiz mumkin: 1;, Qadimgi nolning aqli orqasida Yake. Yorliqlarning moslashuviga, shuningdek, moslashuvchan quvvat strukturasi flex-grow orqali erishiladi: 1;, bu yorliqlarni tarkibning butun kengligi bo'ylab cho'zish imkonini beradi, buning uchun biz turli xil sonli yorliqlarni ko'rsatishdan tashvishlanmasligimiz mumkin.

Biz, shuningdek, teri yorlig'i o'rtasiga har qanday o'lchamdagi kontentni joylashtirishimiz mumkin, ulardan keyin kontentni ko'rsatishga xalaqit bermasdan.

Bu yondashuv hamma uchun ishlaydi
joriy brauzerlar , shu jumladan mobil telefonlar. Faqat boylar va hokimiyatdagilar uchun ahamiyatsiz bo'lgan Flexbox targ'ib qilinmoqda va u uzoq vaqt davomida keng qo'llab-quvvatlanmoqda.

U
FireFox brauzerlari , Chrome, Safari va Opera, men yorliqlar ishida hech qanday muammo aniqlamadim. Ushbu yondashuvni jsfiddle yoki o'z loyihalaringizda tekshirishingiz mumkin.
Izohlarda ushbu muammoga boshqa takliflarni qo'shishdan mamnunmiz. Yaqinda biz robotda bir xil standartlardan foydalangan holda JavaScript-ni ulamasdan, yorliqlarni (tablarni) joyida amalga oshirishni ko'rib chiqdik. to'g'ridan-to'g'ri, chakana sotuvchining veb-saytidan @import, vikorist va quyidagi qator orqali:

@import url( "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css") ;

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

Namoyish misolida, buni o'zingiz bajarganingizdan so'ng va natijalarga qarab, nima bo'lganini osongina aniqlashingiz mumkin.
Html-dagi yorliqlarning tuzilishi oddiy. Asosiy div konteyner, deb ataladi

va o'rta bo'limlarsiz , qo'shiq soatigacha bunday intilishlarda, qo'shiq mazmuni. Bo'ldi shu! Hech qanday chiroyli narsa yo'q, js kutubxonalari yo'q, dizaynda qo'shimcha fayllar ko'rsatilmaydi, yorliqlarning yangi ko'rinishi, shuningdek, ularning funksionalligi CSS usullari yordamida shakllantiriladi.

Albatta, yangi CSS3 standartlarini qabul qilish barcha brauzerlarda xatosiz barqaror ishlashni kafolatlamaydi, ammo joriy versiyalarda yorliqlar muammosiz ishlaydi.

< div class = "tabs" > < input id= "tab1" type= "radio" name= "tabs" checked> < label for = "tab1" title= "IE 9-versiyadan boshlab yorliqlarni to'g'ri ko'rsatadi." >IE 9-versiyadan boshlab yorliqlarni to'g'ri ko'rsatadi. < input id= "tab2" type= "radio" name= "tabs" > < label for = "tab2" title= "Shunday qilib, sizda psixika yo'q va o'zingizni ushbu "brauzer" ning eski versiyalarida o'tirgandek his qilasiz." >Shunday qilib, sizda psixika yo'q va o'zingizni ushbu "brauzer" ning eski versiyalarida o'tirgandek his qilasiz. < input id= "tab3" type= "radio" name= "tabs" > < label for = "tab3" title= "Daniya usuli" >Daniya usuli < input id= "tab4" type= "radio" name= "tabs" > < label for = "tab4" title= "JQuery-dan foydalanish o'rniga yorliqlarni yaratish yaxshiroqdir." >JQuery-dan foydalanish o'rniga yorliqlarni yaratish yaxshiroqdir. < section id= "content-tab1" > < p> < section id= "content-tab2" > < p> < section id= "content-tab3" > < p>HTML < section id= "content-tab4" > < p>HTML

IE 9-versiyadan boshlab yorliqlarni to'g'ri ko'rsatadi. Shunday qilib, sizda psixika yo'q va o'zingizni ushbu "brauzer" ning eski versiyalarida o'tirgandek his qilasiz. Daniya usuli JQuery-dan foydalanish o'rniga yorliqlarni yaratish yaxshiroqdir.

1-tab

2-tab

.
Tab 3 4-tab Bu yerda siz har qanday joyni joylashtirasiz. Buning o'rniga bloklarni tashkil qilish uchun men tegdan foydalanaman
HTML5 fon rasmlari bilan, ular ko'p hollarda hujjatni bo'limlarga, turli joylarga va joylarga joylashtirish uchun, birinchi darajali yuqori sifatli sarlavhalarni o'zgartirish imkoniyati bilan foydalaniladi.

Yorliqlarni almashtirish sarlavhaning belgilangan atributi bilan qo'shimcha o'zaro ta'sir qilish uchun talab qilinadi

va psevdo-sinf: tekshirilgan, CSS identifikatorlari orqali diqqat bilan bog'langan. Ushbu usul misolida, taraqqiyot yo'qligi bilan mashhur bo'lgan kampir qoqilib ketadi Internet Explorer 8, 9-versiyadan boshlab hamma narsa yaxshiroq ishlaydi. Biz CSS sehridan foydalanib, yorliqlarimiz uslublarini shakllantirishimiz mumkin bo'lgan darajaga yetib keldik.- webkit-animatsiya-davomiyligi: 1s; animatsiya - davomiyligi: 1s;- webkit-animation-to'ldirish rejimi: ikkalasi ham; animatsiyani to'ldirish rejimi: ikkalasi ham;- webkit-animation-nomi: fadeIn; animatsiya nomi: fadeIn;) /* Quvvat shaffofligi animatsiyasini tavsiflaydi */@- webkit- keyframes fadeIn ( dan ( shaffoflik : 0 ; ) gacha ( shaffoflik : 1 ; ) ) @ kalit kadrlar fadeIn ( dan ( shaffoflik : 0 ; ) dan ( shaffoflik : 1 ; ) ) /* katakchani qanday belgilash kerak */. tablar> kiritish (displey: yo'q; pozitsiya: mutlaq; )/* Yorliqlarni qayta aralashtirish uchun uslublar */ . yorliqlar> yorliq (displey: inline-blok; hoshiya: 0 0 - 1px; toʻldirish: 15px 25px; shrift ogʻirligi: 600; matnni tekislash: markaz; rang: #aaa; chegara: 0px qattiq #ddd; chegara kengligi: 1px 1px 1px 1px;fon: #f1f1f1 chegara-radius: 3px 3px 0 0 ; /* Unicode formatidagi Font Awesome-dagi shrift belgilari */; } . tabs> label: before ( font-family: fontawesome; shrift-weight: normal; chet-o'ng: 10px; ) . tablar> label[ for *= "1" ] : oldin (kontent: "\f 19a" ; ). tablar> label[ for *= "2" ] : oldin (kontent: " \f 17a"; ). tablar> label[ for *= "3" ] : oldin (kontent: "

/* Asosiy yorliq konteyneri */ .tablar (min. kengligi: 320px; maksimal kenglik: 800px; toʻldirish: 0px; chekka: 0 avtomatik; ) /* ofsetli boʻlim uslublari */ .tabs>boʻlim ( displey: hech biri; : 15px; fon: #fff; chegara: 1px qattiq #ddd; webkit-animation-fill-rejimi: ikkalasi ham animatsiya-to'ldirish rejimi: ikkalasi ham quvvat shaffofligi */ @-webkit-keyframes fadeIn ( dan ( opacity: 0; ) dan ( opacity: 1; ) ) @keyframes fadeIn ( from (); opacity: 0; ) to ( opacity: 1; ) ) /* Belgilash katagidan qanday foydalanish kerak * / .tabs>kiritish ( displey: none; position: mutlaq; ) /* Yorliqlarni o'zgartirish uchun uslublar */ .tabs>label ( displey : inline-block: 0 0 -1px font-weight: 0px solid #ddd : #f1f1f1 ) /* Font Awesome formatida; format */ .tabs>label:befor ( font-family: fontawesome; font-weight: normal; chekka o'ng: 10px; ) .tabs>label:befor (kontent: "\f19a"; ) .tabs>label:befor (kontent: "\f17a"; ) .tabs>label:befor (kontent: "\f13b"; ) .tabs>label :befor (kontent: "\f13c"; ) /* sichqonchani ko‘tarilganda yorliqlar uslubini o‘zgartirish */ .tabs>label:hover (rang: #888; kursor: ko‘rsatgich; ) /* Faol yorliq uchun uslublar */ .tabs >kiritish :checked+yorliq (rang: #555; hoshiya -tepasi: 1px qattiq #009933; hoshiya-pastki: 1px qattiq #fff; fon: #fff; kontent-tab2, #tab3:checked~#content-tab3, # tab4: checked~#content-tab4 (displey: blok; ) /* Remikslardan matn oladi * va kichik ekranlardagi piktogrammalarni olib tashlaydi */ @media ekrani va (maksimal kenglik: 680px) ( .tabs>label ( shrift oʻlchami: 0; ) .tabs>label:befor (margin: 0; font-size: 18px; ) ) /* Oʻzgaruvchan media vositalari * kichik ekranlar uchun */ @media ekrani va (maksimal kenglik: 400px) (.tabs>label ( to'ldirish: 15px);

Siz yorliqlarni () xohlaganingizcha tartibga solishingiz mumkin, dumbadagi hamma narsa, faqat dumba, mening qo'lqop mahsulotim, boshqa hech narsa yo'q.
E'tibor bering, brauzer oynasining o'lchamini o'zgartirganda, yorliqlar avtomatik ravishda maksimal qiymatgacha (ilovada 680px) aniq o'lchamga moslashtiriladi, shundan so'ng yorliqlarning matn sarlavhalari yo'qoladi va piktogrammalar o'chiriladi.

Timning o'zi butun yorliqlar blokining maksimal ixchamligiga erishadi va yorliqlar o'rtasida taqdim etilgan tarkibni almashtirish uchun piktogrammalarni to'g'ri tanlay olmaydi.

Ishchi yorliqlarning jonli harakatini tomosha qiling, chiqish qurilmalaridan foydalaning, parametrlar bilan tajriba o'tkazing va yaratish, yaratish, yaratish... Agar siz ingliz tilidagi shablonlar bilan ishlashdan charchagan bo'lsangiz va ruslashtirilgan shablonlardan foydalanish imkoniyatini intiqlik bilan kutayotgan bo'lsangiz, unda siz ajoyib yangi narsadan bahramand bo'lishingiz aniq. TemplateMonster bozorida sizga kerak bo'lgan tayyor echimlar mavjud.

Xo'sh, saytda siz endi eng qiziqarlilari bilan tanishishingiz mumkin.

Agar siz o'zingizning onlayn loyihangizni minimal vaqt ichida ishga tushirmoqchi bo'lsangiz, mahalliylashtirilgan andozalar sizga kerak bo'ladi.

Shablonlar uchun matnlar qo'lda yozilganiga qo'shimcha ravishda, hid bor

zarur vositalar

professional veb-sayt yaratish uchun

Hurmat bilan Andrey

Agar siz o'zingizning onlayn loyihangizni minimal vaqt ichida ishga tushirmoqchi bo'lsangiz, mahalliylashtirilgan andozalar sizga kerak bo'ladi.

Kod haqida

Nav tab

Ikki shakl uchun navigatsiya yorliqlari.

Javob: yo'q