Kaip padėti maketuoti:

• Gumos dviejų stulpelių išdėstymas
• šoninės juostos fiksuotas plotis 300 pikselių
• turinys išplečiamas iki viso pločio.
• poraštė nuspausta iki apačios (kuriems urociams nerodoma kaip reikia bijoti).

Štai keletas priekaištų dėl Css problemų, kai išdėstomas toks išdėstymas:

1 būdas

Kaip plėšiate blokus plūdėmis (plūde), jūs skolingi nustatyti fiksuotą plotį(Negalima nustatyti 1 šoninės juostos iki 300 pikselių ir turinio iki 100 %). Tokiu būdu turinys slenka žemyn arba rodomas horizontalus 300 pikselių slinkimas į kairę. Na, šlykštu suprasti, kad toks būdas mums netinka.

2 būdas

Per daug verstalnikų taip ištarti, apie kokį smarvę galvoti? Metodo esmė slypi tame, kad galite nustatyti 300 pločio slankiąją funkciją, bet nejudinkite turinio ir nustatykite margin-left: 300px. Garniy būdas ir gera taip gerai išeiti. Sąžiningai, matyt, maniau, kad tai geriausias būdas, bet šiuo metodu aš turiu savo povandeninius akmenis. Priežastys, kodėl taip pat visada galima turinyje išdėstyti meniu su plūduriuojančiais li, arba plūduriuojančiais blokais, o tada norime juos išvalyti, kad padėtų clear:abi, tada apatinė bloko kraštinė turėtų būti puse žemyn ant apatinės juostos krašto. ir nenuostabu, kad šukės išvalytos nustatykite plūduriuojamą bloką į fiksuotą aukštį, bet ne dešinėje, uždėkite fiksuotą aukštį).

3 būdas

Galite mirksėti už šoninės juostos padėtis absoliuti, ale tilki yakshcho vie Esu tikras, kad šoninės juostos turinys bus didesnis kitu atveju visa šoninė juosta yra poraštėje (net jei padėtis visiškai nepatenka į pagrindinį srautą).

ale jak man tse tezh net ne geras būdas!

4 būdai

"Nuostabus būdas, bet naujajame, prašau šiek tiek pakomentuoti. Bet aš manau, kad tai geriausias būdas."

• Be to, šis metodas: pirmiausia DOMe turinyje eisite anksčiau nei sidebara, kuri tinka poke sistemoms.
• nieko nedėkite ant poraštės
• ar galima nuvalyti blokus ir iki apatinės ribos niekas nelips (Taigi problemas išsprendėme kitu būdu).

Vzagali kaip vynas pratsyuє: pirmiausia stebisi kodu, o po jo šoninėje juostoje. nustatykite plūdę į du blokus (natūralu, kad šoninė juosta juda žemyn). po kurio nustatome šoninės juostos galios marža-kairė: -100%. maloniai vіn įjungtas vietoje, ir robimo įveskite turinį margin-lerft: 300px.

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ų;
}

Sveiki, šiandien pakalbėsime apie tai, kaip sukurti gerą svetainės naršymo skydelį. Tai praktiškai vikoristovuetsya ant odos interneto išteklių, todėl odos mažmenininkas gali sukurti elementą.

Paaiškinimas prieš straipsnį:

1. „Šoninė juosta / šoninė juosta“ – svetainės naršymo juosta.
2. „Pozicija“ – CSS galia.
3. „Viršus“, „kairė“, „dešinė“, „apačioje“ – judėjimo galia CSS.
4. „WordPress“ yra svetainės turinio valdymo sistema / TVS.
5. Webix – vartotojo sąsajos biblioteka. Leidžia kurti lentelės elementus.
6. View – JavaScript funkcija.

Šis straipsnis parodys Skirtingi keliai navigacinių skydelių kūrimas tiek rankomis, tiek specialių aikštelės konstruktorių pagalba. Tuo pačiu metu pateikiama ir „WordPress“.

Kaip rankiniu būdu apiplėšti šoninę juostą? CSS ir HTML

Iš karto parodome tradicinį kūrimo būdą ir parašomas pats kodas teksto redaktorius. Tam reikia įvesti HTML ir CSS dokumentus į kodų rengyklę.

Šoninės juostos kūrimas iš dešinės pusės. HTML ir CSS

Dažniausiai naudojama naršymo juosta yra svetainės antraštėje arba dešinėje svetainės pusėje. Kitame vipad skambinkite 2 stulpelių išdėstymu.

Gerai iš anksto – paruoštas išdėstymas, kad žinotumėte navigacijos bloko plotį. Na, jei išdėstymas yra kasdienis, jūs negalite pradėti rozrobtsі.

Pagarba! Kurdami šonines juostas ir kitus svetainės elementus, paruoškite paruoštą maketą. Sutelkdami dėmesį į naują, supaprastinsite kūrimo procesą.

Naršymo juosta gali būti sukurta papildomiems sąrašams ir puikiems blokams. Kai laimite sąrašus, įjunkite „teksto dekoravimo“ galią.

Prie užpakalio yra dizainas su div blokeliais.

Burbuolei sukuriame paryškintą div bloką, kuriame bus išdėstytos kolonos. Kuriame naujai klasei, mūsų užpakalis turi klasės išdėstymą, bet tai ne itin veikia kūrimo procesą.

Vikoristų galvos blokas gali būti naudojamas pozicionavimui, taip pat išplėtimų projektavimui.

Rankos nugara yra svarbi pozicionavimui. Laukiniam konteineriui nustatome akivaizdžią padėtį - galią (pozicija: santykinė). Stulpeliams priskiriama galia (pozicija: absoliuti).

Naudodami tokio tipo variantus galėsite lengvai išplėsti stulpelius bloko viduryje. Kam mano vikaristai laiko perkėlimo galią: , , і .

Mūsų programoje 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

Pagarba! Apskritai, nurodykite naršymo taško odos kraštinės plotį. Dešinėje, nes jie gali būti absoliučiai išdėstyti, todėl jų plotis yra lygus vidinio turinio pločiui.

Taigi, būtų pageidautina nurodyti, kad gale yra dar vienas stulpelis, o tada mes pirmiausia. Kai laimi duotas metodas Nesvarbu, todėl stulpelius galima lengvai prisiminti atliekant misijas.

Tam taip pat galite naudoti plūduriuojančią jėgą. Šis būdas yra daug paprastesnis, šukės yra paremtos aplinkiniais elementais. Zavdyaki youmu mūsų sidebat bus roztashovuvatisya z dešinioji pusė.

Dešinėje pusėje sulankstomas naršymo skydelis. HTML ir CSS

Tokios plokštės sukūrimui galima papuošti tą patį ženklą, kuris yra pirmame užpakalyje. CSS kodas taip pat nereikalauja specialių pakeitimų.

Turite atlikti nedidelius CSS kodo pakeitimus. Būtina, kad meniu būtų dešiniarankis. Pločio galia ir ta padėtis nesikeičia!

Kaip sukurti šoninę juostą „WordPress“?

Dabar pažiūrėkime į kelią, kuris dar labiau matomas iš priekio. Skirtumas slypi tame, kad panašią navigaciją galite sukurti praktiškai nenaudodami CSS ir HTML kodo.

Nereikės viso kodo rašyti ranka, visus darbus atliks pats konstruktorius.

Kai naudojate „WordPress“, turėsite užregistruoti naršymo juostą ir pridėti valdiklio valdiklį.

Norėdami užregistruoti šoninę juostą naudodami „WordPress“, turėsite užsirašyti keletą funkcijų PHP failai. Iš esmės jums reikia duomenų masyvų, kurie bus taikomi valdikliams ir „div“ žymoms.

Mūsų užpakalis turi dešinę šoninę juostą, taip pat poraštės šoninę juostą.

Keletas žodžių apie webix

Dar viena speciali sistema, leidžianti susikurti savo šoninę juostą. Pagrindinis yra tie, kurie leidžia sukurti gerą skydelį parašydami tik šiek tiek kodo.

Dėl burbuolės reikia patraukti visą karkasą. Po to turite pridėti tam tikrą stilių ir scenarijų prie savo HTML dokumento.

Tada galite pakeisti šoninės juostos kūrimą. Šiam diegimui sistema turi specialią funkciją – rodinį. Jakų ir rozmіschuvatime už rozmіschennya elementіv.

Šios sistemos minusas yra mainai. Naudodami šį variantą, jūs negalite sąžiningai sukurti unikalaus kūrinio, nes skydelį supa ne jūsų vaizduotė, o tik keletas funkcijų.

Visnovok

Šiame straipsnyje apžvelgėme kelis pagrindinius naršymo skydelio kūrimo būdus, tačiau jų yra daugiau. Galite sugalvoti autoritetingą būdą, pasikliaudami mūsų nurodymais.

Šiuose užpakaliuose bula rodo paprasčiausią naršymo skydelį. Jei šiek tiek pataisysite išėjimo kodą, pamatysite tinkamą šedevrą.

Žymos:

Sveiki, nauji tinklaraščio svetainės skaitytojai. Tai daugiau pastaba sau, tad nepamiršk, kad ir pati esi nedrąsi, jei noriu viską apversti. Viskas prasidėjo nuo to, kad vienas iš skaitytojų paprašė parašyti apie WordPress įskiepį pavadinimu Q2W3 Fiksuotas valdiklis(Sticky Widget), kuris gali būti slankiojantis šoninėje juostoje arba, kitaip tariant, fiksuotas.

Tobto. Slinkdami puslapiu žemyn įsitikinkite, kad pagrindinė šoninės juostos dalis kyla įkalnėn, o tada valdiklis, kad pačiame apačioje bus raukšlių, pasiklyskite peržiūros srityje, tarsi ji būtų toli ir neišsikištų. žemyn tekstu. tuoj pagalvosiu paskirstyti kontekstinė reklama jis aptvertas panasiu rangu ir uz tai gali buti nubaustas (kaip buvo sakyta komentaruose - YAN leistinas, o Adsense toks robiti).

Papildinys yra nuostabus, bet turiu jį įtrauktose temose, todėl Danės paskyrimas už daugybę javascript kodų, kuriuos žinau internete.

Dėl to mano viršutinis meniu pataisytas pačiame peržiūros srities viršuje (tiesą sakant, kam užteko naudoti tik CSS kodą, bet lengvų būdų nėra), ir fiksuota apatinė šoninės juostos dalis viršutinėje dešinėje ekrano dalyje, jei pasieksite ją valandą slinkdami šonu. Nežinau, kas bus, bet sprendimas tikrai paprastas.

Naujas taisymo meniu ir tvirtumo slankioji šoninė juosta

Reikia pataisyti viršutinį meniu, pamaitinti jus? Na, zagal, tse mažas eksperimentas "Sumažinimo" tema. Grynai hipotetiškai galima daryti prielaidą, kad galime prisiminti apžiūrėtų pusių skaičių per tą valandą, kurią koristuvach praleido svetainėje.

Iš kitos pusės, panašaus fiksuoto skydelio pasaulinis lygumas gali sukelti neigiamą skaitytojų reakciją, kuri skatina šio veiksmo koroziją. Reikės stebėtis rezultatu po kitos peržiūros – jei meniu nebefiksuos (prikalkime jį prie viršutinio peržiūrimos srities krašto), tada eksperimentas nevyks. Padarysiu ekrano kopiją apie kiekvieną pakeitimą, nes viskas gerai.

Plaukiojanti gerai šoninė juosta WordPress roar trohi dėl kitų priežasčių – atkreipkite daugiau pagarbos į maksimumą. Iš esmės čia galite įterpti antraščių sąrašą ir populiarių ar likusių įrašų sąrašą, kurie vėlgi gali padėti pagerinti elgesį. Ir dažniausiai reklama dedama į tokį plaukiojantį bloką (kontekstas neįmanomas, kaip jau spėjau), kas grynai hipotetiškai gali padidinti žiniatinklio valdytojo pajamas. Pažiūrėkime į tyzhden rezultatą.

Kaip pataisyti viršutinį „WordPress“ meniu

Na, aš žinau savo sprendimą. Norint naudoti šį metodą, jQuery biblioteka gali būti įtraukta į kalbą. Kaip tse robiti, apibūdinęs straipsnį, skirtą turinio reklamai.

Kaip prisimenate, straipsnyje apie pusių susidomėjimo greičio optimizavimą reikia pabandyti sujungti visus CSS ir JS į vieną didelį (tai yra du - vienas stiliams, o kitas scenarijus). Axis, vlasne, tokiame faile po kodo eilėmis pridėjau troch nurodymus. Jei galite juos pridėti ir be tarpininkų html kodas, paryškintas scenarijaus žymomis. Pavyzdžiui, header.php šabloną galite įtraukti į header žymų vidurį.

Viršutinio meniu fiksavimą galite įgyvendinti naudodami gryną CSS - mums padėti. Na, čia galite laimėti poziciją dėl CSS galios, bet tai taip pat parodo galimybę beveik įsivaizduoti fiksuotas meniu ne iš eilės, o iki metų po slinkimo burbuolės (dainuojančiame vіdstanі vіd viršuje).

Į mano žvilgsnio tašką viršutinio meniu pataisos kodas ašis atrodo taip:

$(function()( $(langas).scroll(function() ( var top = $(document).scrollTop()); if (viršuje< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Atspėk, į ką galite įterpti šį kodo fragmentą:

1. Failas su plėtiniais.js, kuris yra aplanke su dizaino tema (/wp-content/themes/theme). Jus apgauna tai, kad naujame faile header.php kartu su jūsų svetainės tinklalapiais yra reklamų eilutė, kuri gali atrodyti taip:
2. Galite pakoreguoti patį header.php failą pridėdami Danijos kodas tarp lenkimo ir lenkimo naudojant žymas head ir įrėminti scenarijaus žymose, pavyzdžiui, taip:
3. Ar galite parašyti kodą kitoje vietoje scenarijaus žymės. Golovnya, schob reikalingos pusės dienoraštį. Pavyzdžiui, footer.php prieš body žymą galite ją uždaryti.

Dabar žvėriškai judu be kodo. Išeik, po 10 pikselių viršuje matosi, kad padėtis keičiama fiksuojant (straipsnis dėl siūlomos jėgos). Jei reikia, tada 3 eilutėje kitur, kaip viršuje reikšmę, galite pasirinkti ne nulį, o net fiksuotame meniu viršuje viršutiniame srities krašte, žiūriu į pikselių reikšmę (mano nuomonė, tse zayve).

Pradinio kodo vaizde turėjau galimybę pridėti plotį: "100%", kitu atveju buvo pakeistas meniu plotis, kuris parodytų visą vaizdą.

Įdomu, tikslumo dėlei nurodysiu HTML kodą, kurio pagalba susidaro viršutinis meniu WordPress šablonas tinklaraštis (gyja mano header.php faile):

Jūs, geriau viskam, pagalboje turite šabloną meniu elementams rodyti, pavyzdžiui, tokio dizaino (funkcijos) ašį, bet jis neturi reikšmės.

Funkcija wp_list_pages, aišku, yra gera (ji leidžia reguliuoti rūšiavimą, nustatyti kaltę), bet dar geriau, aš vis tiek darau viską rankiniu būdu per specialų HTML, kaip parodyta daugiau. IMHO.

Čia svarbu sugauti tuos, kurie visi sukrauti dešinėje konteineriuose divuose ir jų radėjas gali priskirti id="navi". Ašis į naują mi ir chіplitimemosya. Pakeiskite ant uždėto JS kodo #navi? Ten reikės pasidėti #navi savo ID (kitaip klasė, kuri, kaip pamenate, rašoma ne pro vartus, o per tašką, pvz. taip: .menu).

Kito turimo meniu ašis gali būti užfiksuota viršutinėje padėtyje, kai pusė slenkama į kairę nuo pikselių skaičiaus. Tiesa, turėjau bėdą dėl to, kad pats meniu ne visada atsirasdavo ant ramių šono elementų, virš kurių jis pūtė.

Tse, palauk, tai nėra gerai. Tomas atsitiktinai užpildė CSS kodą ir pridėjo 3 reikšmes 1000 ID parinkikliui #navi:

#navi(background:#03658e url(https://website/wp-content/themes/Organic/images/spriteme2.png) repeat-x;background-position:0px -10px;height:31px;z-index:1000 )

Dešinėje, jei papildomai pozicijai nurodysite vieną iš trijų pozicijų tipų, šis elementas nustos sąveikauti su svarbiausiais HTML kodo elementais. Ir vis dėlto su kitais tokiais pat jie varžosi dėl stovyklos „virš arba aukščiau“. z-index:1000 leidžia išplėsti mūsų meniu visiems kitiems blokams. Skaitykite daugiau savo straipsnio gairėse.

Kaip „WordPress“ turi slankiąją šoninę juostą be papildinių

Žemiau aprašyta, galite išmokti plaukti (arba, kitaip tariant, fiksuoti regiono dainavimo zonoje) kaip visą šoninę juostą, taigi pirmoji dalis. Kadangi jūsų plotas yra gana mažas ir telpa viename ekrane (kad galėtumėte sukurti nešiojamąjį įrenginį), galite plaukti visame kame.

Bet dažniausiai taip nebus ir galima maudytis apatinėje dalyje. Jei šoninė juosta, kaip aš matau, yra neatskiriamas monolitas, tada galite patys sukurti plaukiojantį bloką, vicorist hipotekas tais pačiais dizaino principais ir įdėti jį žemiau pagrindinio.

Nepaisant to, aš dirbu greitai ir ne itin įtemptai į save ir ieškau optimalaus sprendimo, nes turiu turtingos patirties reguliariai eksperimentuojant su vynais, o tai suteikia daugiau vilčių idėjai, mažiau imovirniškas ką „parodyti“. “ Na, navpak. Žagalom, kvailioji, kol nėra sensacijos, nes gebėjimas įsišaknyti nėra toks didelis.

Taigi aš tik imu apatinio bloko sulankstymui viršutinę savo pagrindinės šoninės juostos dalį (šablone sidebar.php), tada perkelkite iš viršutinio į apatinį bloką „Vicorist for pelning“ ir, pavyzdžiui, priklijuokite tuos, kurie buvo užpildyti pagrindiniame bloke. Tai vyko maždaug taip:

Na, o dabar aš turiu bloką „Vicorist for pelning“, iš viršutinio šoninės juostos bloko perkėlus į apatinį. Viyshlo yra ne fontanas, o skirtas "valandos" ziyde. Liko tik užpildyti JS failą kodu ir apatinis blokas greičiausiai plauks. JS kodas atrodo taip:

$(document).ready(function()( var br = $.browser; $(window).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"}); } }); });

Turite pateikti savo klasę arba išorinio konteinerio, kuriame yra jūsų šoninės juostos apatinis blokas, ID.

Kieno kodo nesu, tad labai suprantu (JS ne volody), bet viskas veikia. Vartokite dažnai. Jei nurodysite fiksuotą padėtį, ji skambės viršutiniame kairiajame taške. Tada, kad padėtų paraštėKairė paraštė: "760px" įdedu šį bloką ant šoninės juostos krašto (skaičius pašalintas "bandymo ir atleidimo" būdu).

Vertė viršuje: „52 pikseliai“ nustato įrašą šoninės juostos slankiajame bloke ties viršutine riba. Tačiau aš turiu vyno problema Tokiu atveju pagrindinės šoninės juostos aukštis buvo mažesnis nei turinio srities aukštis. Toks dalykas buvo vilazila, pvz., valandėlę peržiūrėsiu antraščių archyvą:

Žvelgiant iš CSS pusės, suprantu, kodėl taip atrodo, bet ašis galvoti apie pataisą buvo tirpsta. Ką tik turėjau galimybę pažvelgti į plūduriuojančio šoninio bloko ekraną panašiose pusėse (vyno ten nereikia).