Tartibga qanday yordam berish kerak:

• Gumning ikki ustunli tartibi
• yon panel qattiq kengligi 300px
• kontent toʻliq kenglikgacha kengaytiriladi.
• altbilgi pastki qismga bosiladi (bu uroki uchun qanday qo'rqish kerakligi ko'rsatilmagan).

Bunday tartibni yaratishda Css muammolari uchun ba'zi ayblar:

1 yo'l

Bloklarni floats (float) bilan qanday talon-taroj qilasiz, siz qattiq kenglik o'rnatish kerak(1 ta yon panelni 300px va kontentni 100 ga oʻrnatib boʻlmaydi). Shunday qilib, kontent pastga aylanadi yoki chapga 300px gorizontal aylantirish paydo bo'ladi. Xo'sh, bu yo'l biz uchun mos emasligini tushunish noaniq.

2 yo'l

Bu tarzda talaffuz qilish uchun juda ko'p verstalniklar, qanday yomon hid haqida o'ylash kerak? Usulning mohiyati shundan iboratki, siz 300 kenglikdagi floatni o'rnatishingiz mumkin, ammo tarkibni suzmang va chapga chekka: 300px o'rnatmang. Garniy yo'li va juda yaxshi chiqib ketish yaxshi. Rostini aytsam, men buni eng yaxshi yo'l deb o'yladim, lekin bu usulda o'zimning suv osti toshlarim bor. Sabablari, xuddi shu tarzda, tarkibda har doim suzuvchi li yoki float bloklari bilan menyularni joylashtirish mumkin va keyin biz ularni aniq yordam uchun tozalashni xohlaymiz: ikkalasi ham, keyin blokning pastki chegarasi bo'lishi kerak. pastki satrning chegarasida tomon pastga. va shards foat tozalanadi ajablanarli emas suzuvchi blokni belgilangan balandlikka o'rnating, lekin o'ngda emas, qattiq balandlikni qo'ying).

3 yo'l

Ko'z qisib qo'yishingiz mumkin yon panel holati mutlaq, ale tilki yakshcho vie Ishonchim komilki, kontent balandligi yon panelda kattaroq bo'ladi aks holda, butun yon panel altbilgida bo'ladi (holat asosiy oqimdan butunlay tashqarida bo'lsa ham).

ale yak meni tse tezh ham yaxshi yo'l emas!

4 usul

"Ajoyib yo'l, lekin yangisida, iltimos, biroz izoh qoldiring. Lekin menimcha, bu eng yaxshi yo'l."

• Bundan tashqari, ushbu usul: birinchi navbatda DOMe kontentida siz sidebaradan oldinroq borasiz, bu poke tizimlari uchun yaxshi.
• altbilgiga hech narsa qo'ymang
• bloklarni tozalash mumkinmi va hech narsa pastki chegaraga chiqmaydi (Shunday qilib, biz muammolarni boshqa yo'l bilan hal qildik).

Vzagali sharob pratsyuê kabi: birinchi navbatda kodga hayron bo'ling, undan keyin yon panelda. floatni ikkita blokga o'rnating (tabiiy ravishda yon panel pastga siljiydi). shundan so'ng biz yon paneldagi quvvat chegarasini chapga o'rnatamiz: -100%. mehribon vín joyida aylandi, va robimo kontent margin-lerft kiriting: 300px.

html

css

yon panel(
kengligi: 300px;
displey: blok;
float: chap;
chegara: 0 0 0 -100%;
}
.content(
min. kengligi: 723px;
displey: blok;
float: chap;
chegara: 0 0 0 220px;
}

Salom, bugun biz siz bilan sayt uchun qanday qilib yaxshi navigatsiya panelini yaratish haqida gaplashamiz. Bu teri Internet-resursda amalda vikoristovuetsya, shuning uchun teri sotuvchisi elementni yaratishi mumkin.

Maqola oldidan tushuntirish:

1. "Yon panel/yon panel" - sayt navigatsiya paneli.
2. "Position" - CSS-ning kuchi.
3. "Yuqori", "chap", "o'ng", "pastki" - CSS-da harakatlanish kuchi.
4. WordPress bu veb-sayt uchun kontentni boshqarish tizimi/CMS.
5. Webix - UI kutubxonasi. Jadval elementlarini yaratish imkonini beradi.
6. Ko'rish - JavaScript funktsiyasi.

Ushbu maqola ko'rsatiladi turli yo'llar bilan qo'lda ham, maxsus sayt-konstruktorlar yordamida ham navigatsiya panellarini yaratish. Shu bilan birga, WordPress taqdim etiladi.

Qanday qilib yon panelni qo'lda o'g'irlash mumkin? CSS va HTML

Darhol biz an'anaviy rivojlanish yo'lini ko'rsatamiz va kodning o'zi yoziladi matn muharriri. Buning uchun HTML va CSS hujjatlarini kod muharririga kiritishingiz kerak.

O'ng tomondan yon panelni yaratish. HTML va CSS

Eng keng tarqalgan navigatsiya paneli saytning sarlavhasida yoki saytning o'ng tomonida joylashgan. Boshqa vipadda 2 ustunli sxemada jiringlaning.

Oldindan yaxshi - tayyor tartib, shuning uchun siz navigatsiya blokining kengligini bilasiz. Xo'sh, agar tartib kundalik bo'lsa, siz rozrobtsí boshlay olmaysiz.

Hurmat! Yon panellar va saytning boshqa elementlarini yaratishda tayyor tartibni tayyorlang. Yangilikka e'tibor qaratib, siz rivojlanish jarayonini soddalashtirasiz.

Navigatsiya paneli qo'shimcha ro'yxatlar va ajoyib bloklar uchun yaratilishi mumkin. Ro'yxatlarni yutganingizda, "matn-bezatish" quvvatini yoqing.

Dumba qismida div bloklari bo'lgan dizayn mavjud.

Kob uchun biz qalin div blokini yaratamiz, unda ustunlar joylashtiriladi. Biz yangi sinf uchun yaratamiz, bizning dumbamiz sinf tartibiga ega, ammo bu rivojlanish jarayoniga ayniqsa ta'sir qilmaydi.

Vikoristlarning bosh bloki joylashishni aniqlash uchun, shuningdek kengayishlarni loyihalash uchun ishlatilishi mumkin.

Qo'lning orqa qismi joylashishni aniqlash uchun muhimdir. Yovvoyi konteyner uchun biz aniq pozitsiyani o'rnatdik - quvvat (lavozim: nisbiy). Quvvat ustunlarga tayinlanadi (pozitsiya: mutlaq).

Ushbu turdagi o'zgarishlar bilan siz blokning o'rtasida joylashgan ustunlarni kengaytirishingiz oson bo'ladi. Kim uchun mening vikaristlar ko'chish kuchi uchun vaqt bor: , , і .

Bizning ilovamizda kod quyidagicha ko'rinadi:

HTML

Nusxalash

css

tartib (

pozitsiya: nisbiy;

fon: rgba(119, 115, 115, 0,58);

}

Yon panel , .kontent (pozitsiya: mutlaq ; )

yon panel (

fon: #C6DD7D;

Tarkib(

fon: #F4ECCE;

Nusxalash

Hurmat! Umuman olganda, navigatsiya nuqtasi uchun teri chegarasining kengligini belgilang. O'ng tomonda, ular mutlaqo joylashishi mumkin, shuning uchun ularning kengligi ichki tarkibning kengligiga teng.

Shunday qilib, orqa tomonda yana bir ustun qo'yilganligini ko'rsatish maqsadga muvofiq bo'ladi, keyin biz birinchi bo'lib qilamiz. G'alaba qozonganda berilgan usul Bu muhim emas, shuning uchun ustunlar topshiriqlar tomonidan osongina eslab qolinadi.

Buning uchun siz float kuchidan ham foydalanishingiz mumkin. Bu yo'l ancha sodda, shardlar atrofdagi elementlarga asoslangan. Zavdyaki youmu sidebatimiz roztashovuvatisya z bo'ladi o'ng tomon.

O'ng tomonda katlanadigan navigatsiya paneli. HTML va CSS

Bunday panelni yaratish uchun birinchi dumbada joylashgan bir xil belgini yopishtirish mumkin. CSS kodi ham maxsus o'zgarishlarni talab qilmaydi.

CSS kodingizga kichik o'zgarishlar kiritishingiz kerak. Menyu o'ng qo'lda bo'lishi kerak. Kenglikning kuchi va bu pozitsiya o'zgarmaydi!

WordPress-da yon panelni qanday yaratish mumkin?

Keling, old tomondan yanada ko'proq ko'rinadigan yo'lni ko'rib chiqaylik. Farqi shundaki, siz shunga o'xshash navigatsiyani CSS va HTML kodidan foydalanmasdan amaliy tarzda yaratishingiz mumkin.

Barcha kodni qo'lda yozishingiz shart emas, barcha ishlarni konstruktorning o'zi bajaradi.

WordPress-dan foydalanganda siz navigatsiya panelini ro'yxatdan o'tkazishingiz va vidjet vidjetini qo'shishingiz kerak bo'ladi.

Yon panelni WordPress bilan ro'yxatdan o'tkazish uchun siz bir nechta funktsiyalarni yozishingiz kerak bo'ladi PHP fayllari. Asosan sizga vidjetlar va div teglar uchun qo'llaniladigan ma'lumotlar massivlari kerak.

Bizning dumba o'ng yon panelga ega, shuningdek, pastki qismning yon paneli.

Webix haqida bir necha so'z

O'zingizning yon panelingizni yaratishga imkon beruvchi yana bir maxsus ramka. Asosiysi, ozgina kod yozish orqali yaxshi panel yaratishga imkon beradiganlar.

Kob uchun siz butun ramkani olishingiz kerak. Shundan so'ng siz HTML hujjatingizga qandaydir uslub va skript qo'shishingiz kerak.

Keyin yon panelni yaratishni o'zgartirishingiz mumkin. Ushbu joylashtirish uchun ramka maxsus funktsiyaga ega - ko'rish. Yak va rozmíschuvatime rozmíschennya elementív uchun.

Ushbu ramkaning minuslari almashinuv hisoblanadi. Ushbu o'zgarish bilan siz adolatli tarzda noyob ijod yarata olmaysiz, chunki panel sizning tasavvuringiz bilan o'ralgan emas, balki faqat bir nechta funktsiyalar bilan o'ralgan.

Visnovok

Ushbu maqolada biz navigatsiya panelini yaratishning bir nechta asosiy usullarini ko'rib chiqdik, ammo ularning soni ko'proq. Bizning ko'rsatmalarimizga tayanib, siz obro'li yo'lni topishingiz mumkin.

Bu buttlarda bula eng oddiy navigatsiya panelini ko'rsatadi. Agar siz chiqish kodi bilan biroz tuzatsangiz, to'g'ri asarni ko'rishingiz mumkin.

Teglar:

Salom, blog saytining yangi o'quvchilari. Bu o'zingiz uchun ko'proq eslatma, shuning uchun agar men hamma narsani aylantirmoqchi bo'lsam, o'zingizni qo'rqoq ekanligingizni unutmang. Hammasi o'quvchilardan biri WordPress uchun plagin nomi ostida yozishni so'raganidan boshlandi Q2W3 Ruxsat etilgan vidjet(Yopishqoq vidjet), uni yon panelda suzuvchi qilib qo'yish yoki boshqacha qilib aytganda, mahkamlash mumkin.

Tobto. Sahifani pastga aylantirib, yon panelning asosiy qismi tepaga ko'tarilishiga ishonch hosil qiling, so'ngra vidjet eng pastki qismida burmalar bo'lishiga ishonch hosil qiling, ko'rib chiqish maydonida yo'qoling, go'yo u uzoqda va tashqariga chiqmagandek. matnni pastga tushiring. Men buni darhol o'ylayman tarqatish kontekstli reklama u xuddi shunday darajadagi panjara bilan o'ralgan va buning uchun jazolanishi mumkin (sharhlarda aytilganidek - YANga ruxsat berilgan va Adsense juda robiti).

Plagin ajoyib, lekin menda u kiritilgan mavzularda bor, shuning uchun Danening uchrashuvi Internetda men biladigan bir qator javascript kodlari yordami uchun.

Natijada, mening yuqori menyu tuzatildi ko'rib chiqish maydonining eng yuqori qismida (aslida, kim uchun faqat CSS kodini ishlatish kifoya edi, ammo oson yo'llar yo'q) va yon panelning pastki qismi o'rnatiladi ekranning yuqori o'ng qismida, agar siz uni bir soat davomida yon tomonga aylantirsangiz. Nima bo'lishini bilmayman, lekin yechim juda oddiy.

Yangi tuzatish menyusi va mustahkam suzuvchi yon panel

Yuqori menyuni tuzatish kerak, sizni ovqatlantirish kerakmi? Xo'sh, zagal, tse "Kamaytirish" mavzusida kichik tajriba. Sof faraziy ravishda, biz koristuvachning saytda o'tkazgan bir soat ichida ko'zdan kechirilgan tomonlar sonini eslashimiz mumkin deb taxmin qilish mumkin.

Boshqa tomondan, shunga o'xshash sobit panelning haddan tashqari tekisligi o'quvchilarning salbiy reaktsiyasiga olib kelishi mumkin, bu esa bu harakatning korrozivligini oziqlantiradi. Keyingi qayta ko'rib chiqishdan keyin natijadan hayratga tushish kerak bo'ladi - agar menyu endi tuzatilmasa (keling, uni qayta ko'rib chiqilgan maydonning yuqori chetiga mixlaymiz), unda tajriba davom etmaydi. Men har bir o'zgarish haqida skrinshot olaman, chunki hammasi joyida.

Boshqa sabablarga ko'ra WordPress roar trohi-da suzuvchi quduq yon paneli - maksimal darajada hurmat qiling. Aslida, bu erda siz sarlavhalar ro'yxatini va mashhur yoki qolgan xabarlar ro'yxatini qo'shishingiz mumkin, ular yana xatti-harakatni yaxshilash vazifasini bajaradi. Va ko'pincha, reklama shunday suzuvchi blokga joylashtiriladi (men taxmin qilganimdek, kontekst mumkin emas), bu faqat faraziy ravishda veb-ustaning daromadini oshirishi mumkin. Keling, tyzhden uchun natijani ko'rib chiqaylik.

WordPress-da yuqori menyuni qanday tuzatish mumkin

Xo'sh, men o'lchovdagi o'z yechimimni bilaman. Ushbu usuldan foydalanish uchun jQuery kutubxonasi tilga kiritilishi mumkin. Qanday qilib tse robiti, xabarlarga ko'ra, kontentni targ'ib qilish uchun maqolani tasvirlab berdi.

Yodingizda bo'lsa, tomonlarning qiziqish tezligini optimallashtirish haqidagi maqolada barcha CSS va JS-larni bitta katta (ikkitasi - biri uslublar uchun, ikkinchisi esa skriptlar uchun) birlashtirishga harakat qilish kerak. Axis, vlasne, bunday faylda men kod satrlari ostidagi trochning yo'riqnomasini qo'shdim. Agar siz ularni vositachisiz qo'shsangiz html kodi, skript teglari bilan aniqlangan. Misol uchun, siz header.php shablonini bosh teglarining o'rtasiga qo'shishingiz mumkin.

Bizga yordam berish uchun sof CSS yordamida yuqori menyuni tuzatishni amalga oshirishingiz mumkin. Xo'sh, bu erda siz CSS kuchi yordamida pozitsiyani yutib olishingiz mumkin, ammo bu deyarli tasavvur qilish imkoniyatini ham ko'rsatadi. belgilangan menyu emas, balki ketma-ket, lekin (qo'shiq vydstaní vyd tepasida) aylantirish kobi keyin yil tomonidan.

Mening ustunlik nuqtasiga yuqori menyu tuzatish kodi eksa quyidagicha ko'rinadi:

$(funksiya()( $(oyna).scroll(funksiya() ( var top = $(document).scrollTop()); if (yuqori)< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Ushbu kod parchasini nimaga kiritishingiz mumkinligini taxmin qiling:

1. Dizayn mavzusi (/wp-content/themes/theme) bilan jildda joylashgan extensions.js fayli. Sizni faqat yangi header.php fayli uchun saytingiz veb-sahifalari bilan bir vaqtning o'zida quyidagi kabi ko'rinishi mumkin bo'lgan bir qator reklama aksiyalari mavjudligiga aldandingiz:
2. Siz qo'shish orqali header.php faylini o'zingiz sozlashingiz mumkin Daniya kodi Bosh teglari bilan egri va egilish va uni skript teglarida ramkalash o'rtasida, masalan, quyidagicha:
3. Kodni boshqa joyga yoza olasizmi? skript teglari. Golovnya, shob zarur tomonlar blog. Masalan, footer.php da tana tegidan oldin uni yopishingiz mumkin.

Endi men kodga hech qanday muammosiz yirtqich tarzda harakat qilyapman. Chiqib chiqing, tepada 10 pikseldan so'ng, siz pozitsiyani mahkamlash orqali o'zgartirilganligini ko'rishingiz mumkin (tavsiya etilgan kuch uchun div. maqola). Agar kerak bo'lsa, 3-qatorda boshqa qiymat sifatida siz nolni tanlashingiz mumkin emas va hatto menyuning yuqori qismidagi maydonning yuqori chetida o'rnatilgan bo'lsa, men piksellar qiymatiga qarayman (mening qatorda). fikr, tse zayve).

Asl kod ko'rinishida men kenglikni qo'shish imkoniyatiga ega bo'ldim: "100%", aks holda menyuning kengligi o'zgartirildi, bu butun rasmni ko'rsatadi.

Ajablanarlisi, aniqlik uchun men Html kodini ko'rsataman, uning yordami uchun mening sahifamda yuqori menyu hosil bo'ladi. wordpress uchun shablon blog (mening header.php faylimda jonli):

Siz, hamma narsa uchun yaxshiroq, yordam uchun menyu elementlarini ko'rsatish uchun shablonga egasiz, masalan, bunday dizaynning (funktsiyaning) o'qi, lekin uning ma'nosi yo'q.

Shubhasiz, wp_list_pages funksiyasi yaxshi (bu saralashni sozlash, aybni to'g'ri belgilash imkonini beradi), lekin bundan ham yaxshisi, men hamma narsani maxsus Html orqali qo'lda qilaman, chunki u ko'proq ko'rsatilgan. MENING ODDIYGINA FIKRIMCHA.

Bu erda hamma o'ng tomonda joylashganlarni qo'lga olish muhimdir konteyner divlarida va ularni topuvchi id="navi" atributini berishi mumkin. Yangi mi va chíplitimemosya uchun o'qi. Ko'rsatilgan JS kodida to'plam #navi? U yerda ID #navi qo'yish kerak bo'ladi (aks holda, sinf, siz eslaganingizdek, darvoza orqali emas, balki nuqta orqali yoziladi, masalan: .menu).

Sizda mavjud bo'lgan keyingi menyuning o'qi yon tomoni piksellar sonining chap tomoniga aylantirilganda yuqori holatda o'rnatilishi mumkin. Men uchun bu to'g'ri, menda muammo bor edi, menyuning o'zi har doim yon tomonning sokin elementlari tepasida ko'rinmasdi, uning ustiga u pufladi.

Tse, kuting, bu yaxshi emas. Tom tasodifan CSS kodini to'ldirdi va id selektori #navi uchun 1000 3 ta qiymat qo'shdi:

#navi(fon:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) takrorlash-x;fon-pozitsiya:0px -10px;balandlik:31px;z-indeks:1000 )

O'ng tomonda, agar siz qo'shimcha Position uchun uchta pozitsiyadan birini belgilasangiz, bu element Html kodining eng muhim elementlari bilan aloqani to'xtatadi. Va shunga qaramay, xuddi shu turdagi boshqalar bilan ular lager uchun "yuqorida yoki yuqorida" raqobatlashadilar. z-index:1000 boshqa barcha bloklar uchun menyumizni kengaytirish imkonini beradi. Maqolangizning ko'rsatmalarida ko'proq o'qing.

Qanday qilib WordPress plaginlarisiz suzuvchi yon panelga ega

Quyida tasvirlangan, siz suzishni o'rganishingiz mumkin (yoki boshqacha qilib aytganda, mintaqaning qo'shiq maydonida tuzatish) butun yon panel, shuning uchun birinchi qism. Hududingiz juda kichik bo'lgani uchun va bitta ekranga (ko'chma qurilma qurish uchun) to'g'ri keladi, siz hamma joyda suzishingiz mumkin.

Lekin ko'pincha bunday bo'lmaydi va siz pastki qismida suzishingiz mumkin. Agar yon panel, men ko'rganimdek, ajratilmaydigan monolit bo'lsa, unda siz o'zingiz suzuvchi blokni yaratishingiz mumkin, vikorist ipoteka bir xil dizayn tamoyillarida va uni asosiy qismdan pastga qo'yishingiz mumkin.

Shunga qaramay, men tez ishladim va o'zimga unchalik qattiq emasman va eng maqbul echimni izladim, tajribalar bo'yicha boy tajribam tufayli men muntazamlik uchun aybdorman, bu g'oyaga ko'proq umid bog'laydi, u kamroq imovirnisdir. nima qilish kerak. Xo'sh, navpak. Zagalom, hech qanday sensatsiya bo'lmaguncha aldash, chunki ildiz otish qobiliyati unchalik katta emas.

Shunday qilib, men shunchaki olaman pastki blokni katlama uchun asosiy yon panelingizning yuqori qismini (sidebar.php shablonida), so'ngra yuqoridan pastki blokga "Vikorist daromad uchun" o'tkazing va, masalan, asosiy blokda to'ldirilganlarni yopishtiring. Bu shunday bo'ldi:

Xo'sh, endi menda yon panelning yuqori blokidan pastki qismiga o'tib, "Daromad uchun vikorist" bloki bor. Viyshlo favvora emas, “soat” ziyde uchun. Faqat JS-faylni kod bilan to'ldirish qoldi va pastki blokning suzish ehtimoli ko'proq. JS kodi quyidagicha ko'rinadi:

$(document).ready(function()( var br = $.brauzer; $(window).scroll(function() ( var top = $(document).scrollTop(); if (yuqori)< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(".sidebar123").css((yuqori: "52px", pozitsiyasi: "fiksatsiyalangan", marginLeft: "760px")); ) else if ((br.msie) && (br.version)<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Siz o'z sinfingizni yoki yon panelning pastki bloki joylashgan tashqi konteyner identifikatorini taqdim etishingiz kerak.

Men kimning kodi emasman, shuning uchun men juda tushunaman (JS volody emas), lekin hamma narsa ishlaydi. Tez-tez olib boring. Agar siz belgilangan joyni belgilasangiz, u yuqori chap nuqtada jiringlaydi. Keyin, marginLeft margin yordami uchun: "760px" men bu blokni yon panelning chetiga qo'yaman (raqam "sinov va kechirim" usuli bilan olib tashlandi).

Yuqori qiymat: "52px" yuqori chegaradagi yon paneldagi suzuvchi blok ichidagi yozuvni o'rnatadi. Biroq, menda bor vinik muammo Bunday holda, asosiy yon panelning balandligi kontent maydonining balandligidan kichikroq edi. Bunday narsa vilazila edi, masalan, men bir soat davomida sarlavhalar arxivini ko'rib chiqaman:

CSS nuqtai nazaridan, men nima uchun shunday ko'rinishini tushunaman, lekin tuzatish haqida o'ylash o'qi molting edi. Men shunchaki o'xshash tomonlardagi suzuvchi yon panel blokining displeyini ko'rish imkoniyatiga ega bo'ldim (u erda sharob kerak emas).