Sveiki, šiandien kalbėsime su jumis apie tai, kaip sukurti savo svetainės naršymo juostą. Jis naudojamas beveik visuose interneto šaltiniuose, todėl kiekvienas kūrėjas turėtų turėti galimybę sukurti šį elementą.
Straipsnio paaiškinimai:
- "Šoninė juosta / šoninė juosta" - svetainės naršymo juosta.
- „Pozicija“ yra CSS nuosavybė.
- „Viršuje“, „kairėn“, „dešinėje“, „apačioje“ yra CSS judėjimo savybės.
- WordPress yra svetainės turinio valdymo sistema/TVS.
- Webix – vartotojo sąsajos biblioteka. Leidžia kurti lentelės elementus.
- View yra JavaScript funkcija.
Šis straipsnis parodys įvairių būdų navigacinių skydelių kūrimas tiek rankiniu būdu, tiek pasitelkus specialius svetainės konstruktorius. Mūsų pavyzdyje naudojama „WordPress“.
Kaip rankiniu būdu pasidaryti šoninę juostą? CSS ir HTML
Dabar parodysime tradicinį kūrimo būdą, ty kodo įrašymą teksto redaktorius. Norėdami tai padaryti, kodo rengyklėje turite atidaryti HTML ir CSS dokumentus.
Šoninės juostos kūrimas dešinėje pusėje. HTML ir CSS
Dažniausiai naršymo juosta yra svetainės antraštėje arba dešinėje jos pusėje. Antruoju atveju dažniausiai naudojamas 2 stulpelių išdėstymas.
Gerai, jei iš anksto turite paruoštą išdėstymą, nes žinote plotį navigacijos blokas. Jei išdėstymo trūksta, tai netrukdys plėtrai.
Dėmesio! Kurdami šonines juostas ir kitus svetainės elementus, iš anksto paruoškite paruoštą maketą. Sutelkdami dėmesį į tai, supaprastinsite kūrimo procesą.
Naršymo juosta gali būti sukurta naudojant sąrašus ir įprastus blokus. Jei naudojate sąrašus, išjunkite jiems skirtą ypatybę „text-decoration“.
Mūsų pavyzdyje naudojama div bloko konstrukcija.
Pirmiausia sukuriame bendrą div bloką, kuriame bus stulpeliai. Sukurkime jai kokią nors klasę, mūsų pavyzdyje naudojama maketavimo klasė, tačiau tai kūrimo procesui ypač nedaro įtakos.
Pagrindinis blokas bus naudojamas padėties nustatymui ir dydžiui nustatyti.
Pradėkime nuo padėties nustatymo. Bendrajam konteineriui nustatome santykinę padėties nustatymą - savybę (pozicija: santykinė). Stulpeliams nustatoma savybė (pozicija: absoliuti).
Naudojant šį tipą, jums bus lengviau išdėstyti stulpelius bloko viduje. Norėdami tai padaryti, naudosime poslinkio savybes:
Mūsų pavyzdyje kodas atrodo taip:
HTML
Kopijuoti
css
išdėstymas (
padėtis: santykinė;
fonas: rgba(119, 115, 115, 0,58);
}Šoninė juosta , .content ( padėtis: absoliuti ; )
šoninė juosta (
fonas: #C6DD7D;
Turinys(
fonas: #F4ECCE;
Kopijuoti
Dėmesio! Būtinai nurodykite kiekvieno atskiro naršymo elemento plotį. Esmė ta, kad jie turi absoliutus pozicionavimas, o tai reiškia, kad jų plotis bus lygus vidinio turinio pločiui.
Taip pat norime atkreipti dėmesį, kad , antrasis stulpelis dedamas pirmas, o tada pirmasis. Naudojant šis metodas nesvarbu, nes stulpelius galima nesunkiai sukeisti.
Tam taip pat galite naudoti plūduriuojančią nuosavybę. Šis metodas yra daug paprastesnis, nes jis priklauso nuo elementų apvyniojimo. Jo dėka mūsų šoninis batas bus dešinėje pusėje.
Naršymo juostos kūrimas dešinėje pusėje. HTML ir CSS
Norėdami sukurti tokį skydelį, galite naudoti tą patį žymėjimą, kaip ir pirmame pavyzdyje. CSS kodo taip pat daug keisti nereikia.
Turite šiek tiek pakoreguoti savo CSS kodą. Tai būtina, kad meniu būtų dešinėje pusėje. Mes nekeičiame pločio ir padėties savybių!
Kaip sukurti šoninę juostą „WordPress“?
Dabar pažvelkime į metodą, kuris labai skiriasi nuo ankstesnio. Skirtumas tas, kad galite sukurti geresnę naršymą nenaudodami arba visai nenaudodami CSS ar HTML kodo.
Nereikės viso kodo rašyti rankiniu būdu, visas darbas vyks pačiame konstruktoriuje.
At naudojant WordPress turėsite užregistruoti naršymo juostą ir pridėti prie jos keletą valdiklių.
Norėdami užregistruoti šoninę juostą „WordPress“, turėsite įrašyti keletą funkcijų PHP failai. Iš esmės jums reikės duomenų masyvų, kurie bus susiję su valdikliais ir jų „div“ žymomis.
Mūsų pavyzdyje nagrinėjama dešinioji šoninė juosta, taip pat poraštės šoninė juosta.
Keletas žodžių apie webix
Yra dar viena speciali sistema, kuri leis jums sukurti šią šoninę juostą. Pagrindinis jo pranašumas yra tai, kad jis leidžia jums sukurti gerą prietaisų skydelį su keliomis kodo eilutėmis.
Pirmiausia turite atsisiųsti šią sistemą. Po to savo HTML dokumente pateikite nuorodas į jo stilius ir scenarijus.
Po to galite pradėti kurti šoninę juostą. Norėdami jį įdėti į karkasą, yra speciali funkcija - vaizdas. Kuri bus skirta elementų išdėstymui.
Šios sistemos trūkumas yra jo apribojimai. Naudodami jį negalėsite sukurti tikrai unikalaus kūrinio, nes skydelį riboja ne jūsų vaizduotė, o tik keletas funkcijų.
Išvada
Šiame straipsnyje aptarėme kelis pagrindinius naršymo juostos kūrimo būdus, tačiau yra daug daugiau. Jūs netgi galite sugalvoti savo būdą, remdamiesi mūsų patirtimi.
Šiuose pavyzdžiuose parodyta paprasta naršymo juosta. Jei dirbate šiek tiek pirminis kodas, tada galite gauti tikrą šedevrą.
Žymos:Kokie yra išdėstymo reikalavimai?
- Guminis dviejų stulpelių išdėstymas
- šoninės juostos fiksuotas plotis 300 pikselių
- turinys ištemptas iki likusio pločio.
- poraštė prispausta prie apačios (šioje pamokoje neparodysiu, kaip tai daroma).
Kokios Css problemos kyla dėl tokio išdėstymo:
1 būdas.
Jei plūduriuojate kaladėles, jūs turi suteikti jiems fiksuotą plotį(negalite nustatyti 1 šoninės juostos 300 pikselių, o turinio – 100 %). Tokiu atveju turinys slenka žemyn arba rodomas 300 pikselių horizontalus slinkimas į kairę. Na, svarbiausia suprasti, kad šis metodas mums netinka.
2 būdas.
Daugelis rinkėjų siūlo šį metodą, apie ką jie galvoja?! Metodo esmė yra ta, kad galite nustatyti, kad šoninė juosta būtų slankioji 300 pločio, o ne slankiojanti turinį ir nustatykite jai margin-left: 300 pix. Geras būdas ir atrodo, kad viskas taip gerai. Tiesą sakant, maniau, kad tai yra geriausias būdas, tačiau šis metodas turi savų spąstų. Šio metodo atsisakymo priežastys yra tai, kad jei turinyje staiga sudarome, pavyzdžiui, meniu su floated li ar bet kokiais kitais plūduriuojančiais blokais, o tada norime juos išvalyti su clear:abi, tada šio bloko apatinė kraštinė slysta. iki apatinės šoninės juostos kraštinės lygio (kas ir nieko keisto, nes nuvalyta pėda, to galite išvengti, jei nustatykite plūduriuojamą bloką į fiksuotą aukštį, bet fiksuoto aukščio nustatyti visai negalima).
3 būdas.
Gali būti naudojamas šoninės juostos padėtis absoliuti bet tik jei tu esame tikri, kad turinys bus didesnis nei šoninės juostos aukštis kitu atveju visas šoninės juostos turinys tilps ant poraštės (juk absoliuti padėties nustatymas ištraukia iš bendro srauto).
Bet man tai taip pat nėra labai geras būdas!
4 būdas.
"Puikus būdas, jei yra kokių nors trūkumų, pakomentuokite. Bet aš manau, kad tai yra geriausias būdas."
- Šio metodo privalumai: pirma, DOM turinys bus prieš šoninę juostą, o tai naudinga paieškos sistemoms.
- niekas netilps ant poraštės
- bet kokius blokus galima išvalyti ir niekas nenuslys iki apatinės ribos (Taigi mes įveikėme antrojo metodo problemas).
Apskritai, kaip tai veikia: pažiūrėkite į kodą, pirmiausia pateikiamas turinys, po kurio eina šoninė juosta. mes nustatome plūdę prie šių dviejų blokų (žinoma, šoninė juosta slysta žemyn). po to nustatome šoninės juostos nuosavybės maržą-left:-100%. puiku, jis grįžo į savo vietą ir įtraukite turinį su paraštės kairiuoju kampu: 300 pikselių.
html
css
.sidebar(plotis: 300 pikselių;
ekranas: blokas;
plūdė: kairė;
marža: 0 0 0 -100 %;
}
.turinys(
minimalus plotis: 723 pikseliai;
ekranas: blokas;
plūdė: kairė;
paraštė: 0 0 0 220 taškų;
}
Paprasčiausias fiksuotos slankiosios šoninės juostos HTML+CSS+JS pavyzdys.
Koks jos ypatumas - slenkant šoninė juosta prilimpa prie lango viršaus, bet tuo pačiu, kai šoninė juosta slenka iki poraštės, tada ji nulipa nuo ekrano viršaus ir prilimpa prie savo apačioje prie poraštės, taip neuždengiant poraštės (poraštė turi būti aukšta). Jeigu supranti apie ką aš.
Pavyzdys paimtas iš kažkokios svetainės ir labai primityvus (ir morališkai pasenęs), tinka tik šiam maketui. Šiame straipsnyje rasite universalesnį kodą ir jau galite parašyti savo kodą savo projektui.
HTML žymėjimas paprastam puslapiui
CSS stiliai turinio blokams
.header ( plotis: 100 %; fonas: violetinis; aukštis: 80 pikselių; ) .content ( plotis: 80 %; fonas: mėlynas; aukštis: 800 pikselių; plūduriuoti: kairėje; ) .šoninė juosta ( plotis: 20 %; fonas: žalias; aukštis: 100 tšk.; plūduriuoti: dešinėje; ) .šoninė juosta.fiksuota ( padėtis: fiksuota; dešinė: 50 %; paraštė-dešinė: -50 %; ) .footer (plotis: 100 %; fonas: pilkas; aukštis: 500 pikselių; skaidrus: abu ;)JS scenarijus, skirtas fiksuotai šoninei juostai slinkti puslapyje
Nepamirškite įtraukti jQuery
$(function() ( var $langas = $(langas); var $šoninė juosta = $(".šoninė juosta"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(.footer"); var $footerTop = $footer.position().top; $window.scroll(function(event) ( $sidebar.addClass("pataisyta"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight > $footerTop) ( var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); ) $sidebar.css("top", $topPosition); )); ));
Slankiojantis blokas (arba kaip dar vadinamas judantis, fiksuotas, užstrigęs) reikalingas svetainėje, kad vartotojas, slinkdamas puslapiu, matytų vieną fiksuotą elementą, kuriame dažniausiai talpinama reklama (anonsai, baneriai ar kontekstas).
Deja, adsense taisyklės mums tai draudžia. Tačiau daugelis svetainių savininkų nepaiso taisyklių savo pačių rizika. Galbūt jie už tai net nebaudžiami, bet rizikuoti nepatarčiau.
Tokiuose blokuose dedu YAN, savo anonsus/banerius, o kartais vietoj reklamos parodau panašius įrašus ar kokią lankytojui naudingą informaciją.
Papasakokime, kaip svetainėje galite sukurti slankią bloką.
Užduotis: kad paskutinis blokas šoninėje juostoje (šoninėje juostoje) būtų slankiojantis. Be to, kad jis priliptų tik tuo metu, kai vartotojas jį pasiekia slinkdamas, o ne iškart atidarius puslapį. Be to, blokas turėtų „prilipti“, pasiekti poraštę (t. y. jos neuždengti).
Labiausiai veikiantis būdas
Yra daug lipniojo bloko įdiegimų, tačiau ne visi jie veikia tinkamai. Pasakysiu iš Asmeninė patirtis: Vienoje svetainėje gali veikti tas pats bloko diegimo būdas, bet kitoje atsiranda staktos.
Toliau pateikiamas slankiojo bloko, kuris veikė beveik visose svetainėse, kuriose jį įdiegiau, pavyzdys. Ožkų nebuvo. Variklis taip pat nėra svarbus (DLE, WordPress, LiveStreet ir kt.).
Įklijuokite šį HTML kodą į norimą šoninės juostos vietą:
$(langas).scroll(function() (
var sb_m = 20 ; /* viršutinis ir apatinis kamšalas */
var mb = 300; /* rūsio aukštis su parašte */
varst = $(langas).scrollTop() ;
var sb = $(".lipnus blokas" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.aukštis () ;
If(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) );
}
Kitas(
sb.css(( "paddingTop" : 0 ) );
}
}
}
)
;
Šiame kode galite nustatyti savo poraštės viršų, apačią ir aukštį, t.y. aukštis, kuriame blokas turėtų sustoti.
Dabar įtraukiame JS. Norėdami tai padaryti, skiltyje HEAD parašykite:
Dabar eikime tiesiai į šį kodą. Pasirodo, po 10 pikselių nuo viršaus santykinė padėtis pakeičiama fiksuota (žr. straipsnį aukščiau esančioje nuorodoje). Jei reikia, eilutėje su kita galite pasirinkti ne nulį, o viršaus reikšmę, tada viršuje užfiksuotas meniu nuo viršutinio peržiūros srities krašto bus įtrauktas šia pikselio verte (mano nuomone, tai yra nereikalinga).
Skirtingai nuo originalaus kodo, teko pridėti ir plotį: „100%, nes kitu atveju meniu dydis pločio sumažėtų, o tai sugadino visą vaizdą.
Žiūrėkite, aiškumo dėlei pateiksiu HTML kodą, kuris sudaro viršutinį mano WordPress tinklaraščio šablono meniu (jis yra mano header.php faile iš ):
Greičiausiai jūsų šablone meniu elementų išvestis bus nustatyta naudojant, pavyzdžiui, tokią konstrukciją (funkciją), tačiau tai ne esmė.
Funkcija wp_list_pages, žinoma, yra gera (ji leidžia tinkinti rūšiavimą, nustatyti išimtis ir pan.), bet geriau viską daryti rankiniu būdu per paprastą HTML, kaip parodyta aukščiau. IMHO.
Čia svarbu suvokti, kad viskas baigta į konteinerio divus ir viršutinį turi atributą id="navi". Čia mes prie jo prikibsime. Aukščiau pateiktame JS kode matote, kad tai įvyksta du kartus #navi? Ten vietoj #navi (arba klasę, kuri, kaip pamenate, rašoma ne per maišą, o per tašką, parašyta, pvz., taip: .menu) reikės pasidėti savo ID.
Po to jūsų meniu turėtų būti užfiksuotas viršutinėje padėtyje, kai slenkate puslapį tam tikru pikselių skaičiumi. Tačiau turėjau problemų dėl to, kad šis meniu ne visada buvo rodomas virš puslapio elementų, virš kurių jis plūduriavo.
Tai, matai, nėra gerai. Todėl turėjau šiek tiek įsigilinti į CSS kodą ir pridėti 1000 reikšmę #navi parinkiklio ID:
#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )
Faktas yra tas, kad kai nustatote vieną iš trijų padėties nustatymo tipų naudodami poziciją, šis elementas nustoja sąveikauti su įprastais HTML kodo elementais. Tačiau su kitais panašiai išsidėsčiusiais jis varžysis dėl pozicijos „aukščiau arba žemiau“. z-index:1000 leidžia mums išdėstyti meniu akivaizdžiai aukščiau visų kitų blokų. Norėdami gauti daugiau informacijos, skaitykite aukščiau esantį straipsnį.
Kaip sukurti slankiąją šoninę juostą „WordPress“ be papildinių
Naudodami toliau aprašytą metodą, galite priversti visą šoninę juostą arba jos dalį plūduriuoti (arba, kitaip tariant, užfiksuoti tam tikroje peržiūros srities vietoje). Jei ši sritis yra gana maža ir telpa viename ekrane (net nešiojamame įrenginyje), tuomet galite priversti jį visą plūduriuoti.
Tačiau dažniausiai taip nebus, o apatinę dalį bus galima priversti plūduriuoti. Jei šoninė juosta, kaip ir mano atveju, yra neatsiejamas monolitas, tuomet plūduriuojančią kaladėlę galite susikurti patys, vadovaudamiesi savo naudojamoje dizaino temoje išdėstytais principais ir padėti ją žemiau pagrindinio.
Visa tai dariau greitai ir tikrai nesivargindamas dėl maivymasis ir nerasdamas optimalaus sprendimo, nes iš savo turtingos eksperimentų patirties išmokau šabloną, kad kuo labiau tikiesi kokia nors idėja, tuo mažesnė tikimybė, kad ji „iššaus“. Na, atvirkščiai. Apskritai vargintis dar nebuvo prasmės, nes tikimybė, kad visa tai prigis, nėra tokia didelė.
Taigi aš tiesiog paėmiau sukurti apatinį bloką Perkėliau viršutinę savo pagrindinės šoninės juostos dalį (šablone sidebar.php), tada perkėliau iš viršaus į apatinį bloką „Naudoju užsidirbti pinigų“, o pabaigoje įklijavau į pagrindinį blokas. Tai pasirodė maždaug taip:
Na, dabar bloką „Naudoju uždarbiui“ iš viršutinio šoninės juostos bloko perkėliau į apatinį. Paaiškėjo, kad ne fontanas, bet „laikinai“ tiks. Belieka visa tai sutvarkyti JS faile su kodu ir apatinis blokas pradės plaukti. JS kodas atrodo taip:
$(document).ready(function()( var br = $.browser; $(langas).scroll(function() ( var top = $(document).scrollTop(); if (viršuje< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(.sidebar123").css((viršuje: "52px", pozicija: "fiksuota", paraštėKairėje: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });
Atminkite, kad vietoj .sidebar123 turite pakeisti savo klasę arba išorinio konteinerio, kuriame yra jūsų šoninės juostos apatinis blokas, ID.
Nelabai suprantu šio kodo (nežinau JS), bet viskas veikia. Bent iš dalies. Kai nustatote fiksuotą padėties nustatymą, ataskaita pateikiama iš viršutinio kairiojo taško. Todėl su marginLeft: "760px" įdedu šį bloką tiksliai šoninės juostos lygyje (skaičius gautas naudojant "bandymą ir klaidą").
Vertė viršuje: „52px“ nustato jau slankiojo šoninės juostos bloko užpildymą nuo viršutinės kraštinės. Viršutinės vertės Tačiau aš turiu ten buvo problema tuo atveju, jei bendras pagrindinės šoninės juostos aukštis buvo mažesnis už turinio srities aukštį. Toks dalykas išlindo, pavyzdžiui, peržiūrint antraščių archyvą:
CSS požiūriu suprantu, kodėl taip nutinka, bet buvau per daug tingus, kad galvočiau apie pataisymą. Tiesiog turėjau atsisakyti tokiuose puslapiuose rodyti šį plaukiojantį šoninės juostos bloką (ten jo nereikia).
