Helló, ma arról fogunk beszélni, hogyan hozhat létre saját navigációs sávot a webhelyhez. Szinte minden internetes forrásban használatos, így minden fejlesztőnek képesnek kell lennie arra, hogy létrehozza ezt az elemet.

Magyarázatok a cikkhez:

1. "Sidebar / sidebar" - webhely navigációs sáv.
2. A "pozíció" egy tulajdonság a CSS-ben.
3. A "Felső", "bal", "jobb", "alul" a CSS mozgás tulajdonságai.
4. A WordPress egy weboldal tartalomkezelő rendszer/CMS.
5. Webix - UI könyvtár. Lehetővé teszi táblázatelemek létrehozását.
6. A View egy JavaScript függvény.

Ez a cikk megmutatja különböző módokon navigációs panelek készítése manuálisan és speciális site-konstruktorok segítségével. Példánk a WordPress-t használja.

Hogyan készítsünk oldalsávot kézzel? CSS és HTML

Most bemutatjuk a fejlesztés hagyományos módját, nevezetesen a kód beírását szöveg szerkesztő. Ehhez meg kell nyitnia a HTML és CSS dokumentumokat egy kódszerkesztőben.

Oldalsáv létrehozása a jobb oldalon. HTML és CSS

Leggyakrabban a navigációs sáv vagy a webhely fejlécében, vagy annak jobb oldalán található. A második esetben általában 2 oszlopos elrendezést használnak.

Jó, ha előre kész elrendezéssel rendelkezik, hiszen ismeri a szélességet navigációs blokk. Ha az elrendezés hiányzik, akkor ez nem zavarja a fejlesztést.

Figyelem! Oldalsávok és egyéb webhelyelemek létrehozásakor előre készítsen egy kész elrendezést. Ha erre összpontosít, leegyszerűsíti a fejlesztési folyamatot.

A navigációs sáv listák és normál blokkok segítségével hozható létre. Ha listákat használ, tiltsa le számukra a "text-decoration" tulajdonságot.

Példánkban div blokk konstrukciót használunk.

Először létrehozunk egy közös div blokkot, amelyben az oszlopok elhelyezkednek. Készítsünk hozzá valamilyen osztályt, példánkban a layout osztályt használjuk, de ez nem befolyásolja különösebben a fejlesztési folyamatot.

A fő blokkot a pozicionálás és a méretezés létrehozására fogják használni.

Kezdjük a pozicionálással. Az általános konténerhez beállítjuk a relatív pozicionálás - tulajdonságot (pozíció: relatív). Oszlopoknál a tulajdonság (pozíció: abszolút) be van állítva.

Ha ezt a típust használja, könnyebb lesz az oszlopok elhelyezése a blokkon belül. Ehhez az eltolási tulajdonságokat fogjuk használni: , , és .

Példánkban a kód így néz ki:

HTML

Másolat

css

elrendezés (

pozíció: relatív;

háttér: rgba(119, 115, 115, 0,58);

}

Sidebar , .content ( pozíció: abszolút ; )

oldalsáv(

háttér: #C6DD7D;

Tartalom(

háttér: #F4ECCE;

Másolat

Figyelem! Ügyeljen arra, hogy minden egyes navigációs elemhez adjon meg egy szélességet. A lényeg, hogy van abszolút pozicionálás, ami azt jelenti, hogy a szélességük megegyezik a belső tartalom szélességével.

Azt is szeretnénk megjegyezni, hogy a -ban a második oszlop kerül először, majd az első. Használata ez a módszer mindegy, hiszen az oszlopok könnyen cserélhetők.

Az úszó tulajdonságot is használhatja erre. Ez a módszer sokkal egyszerűbb, mivel elemcsomagoláson alapul. Neki köszönhetően oldalütőnk a jobb oldalon lesz.

Navigációs sáv létrehozása a jobb oldalon. HTML és CSS

Egy ilyen panel létrehozásához ugyanazt a jelölést használhatja, mint az első példában. A CSS-kódon sem kell sokat változtatni.

Kisebb módosításokat kell végrehajtania a CSS-kódon. Erre azért van szükség, hogy a menü a jobb oldalon legyen. A szélesség és a pozíció tulajdonságait nem változtatjuk!

Hogyan lehet oldalsávot létrehozni a WordPressben?

Most nézzünk egy módszert, amely nagyon különbözik az előzőtől. A különbség az, hogy jobb navigációt hozhat létre kevés CSS- vagy HTML-kóddal vagy egyáltalán nem.

Nem kell az összes kódot kézzel megírnia, minden munka magában a konstruktorban történik.

Nál nél WordPress használatával regisztrálnia kell a navigációs sávot, és hozzá kell adnia néhány widgetet.

Ahhoz, hogy oldalsávot regisztrálhasson a WordPressben, be kell írnia néhány funkciót PHP fájlok. Alapvetően adattömbökre lesz szüksége, amelyek a widgetekre és azok div címkéire hivatkoznak.

Példánkban a jobb oldali sáv, valamint a lábléc oldalsávja szerepel.

Néhány szó a webixről

Van egy másik speciális keretrendszer, amely lehetővé teszi ennek az oldalsávnak a létrehozását. Fő előnye, hogy lehetővé teszi, hogy jó irányítópultot készítsen néhány sornyi kóddal.

Először le kell töltenie ezt a keretrendszert. Ezt követően adjon meg hivatkozásokat a stílusokhoz és szkriptekhez a HTML-dokumentumban.

Ezt követően megkezdheti az oldalsáv létrehozását. A keretben való elhelyezéséhez van egy speciális funkció - nézet. Amely hely az elemek elhelyezésére.

Ennek a keretnek a hátránya a korlátai. Használata során nem tud igazán egyedi alkotást létrehozni, hiszen a panelnek nem a fantáziája szab határt, csupán néhány funkció.

Következtetés

Ebben a cikkben bemutattunk néhány alapvető módszert a navigációs sáv létrehozására, de sok más is létezik. Tapasztalataink alapján akár saját módszert is kitalálhat.

Ezekben a példákban egy egyszerű navigációs sáv látható. Ha dolgozol egy kicsit forráskód, akkor igazi remekművet kaphat.

Címkék:

Mik az elrendezési követelmények?

• Gumi kétoszlopos elrendezés
• oldalsáv fix szélessége 300px
• a tartalom a szélesség többi részéig ki van feszítve.
• lábléc az aljára nyomva (ebben az oktatóanyagban nem mutatom be, hogyan kell ezt csinálni).

Milyen CSS-problémák merülnek fel egy ilyen elrendezés elrendezése során:

1 út.

Ha lebegtesz blokkokat, akkor rögzített szélességet kell adni nekik(1 oldalsávot nem lehet 300 képpontra, a tartalmat 100%-ra állítani.) Ebben az esetben vagy lecsúszik a tartalom, vagy megjelenik egy 300 képpontos vízszintes görgetés balra. Nos, a legfontosabb, hogy megértsük, hogy ez a módszer nem felel meg nekünk.

2 út.

Sok szedő ajánlja ezt a módszert, mire gondolnak?! A módszer lényege, hogy beállíthatjuk, hogy az oldalsáv 300-as szélességben lebegjen, és ne lebegjen a tartalom, és a margó balra: 300px. Jó útés úgy tűnik, minden olyan jól működik. Őszintén szólva, azt hittem, ez a legjobb módszer, de ennek a módszernek megvannak a maga buktatói. A módszer elhagyásának az az oka, hogy ha hirtelen pótolunk a tartalomban például egy menüt lebegtetett li-vel vagy bármilyen más lebegő blokkal, majd törölni akarjuk a clear:bottal, akkor ennek a blokknak az alsó szegélye elcsúszik. le az oldalsáv alsó szegélyéig (Mi és ez nem furcsa, mivel a hab kitisztul, ezt elkerülheti, ha állítson be egy úszó blokkot egy rögzített magasságba, de egyáltalán nem célszerű fix magasságot beállítani).

3 út.

Használható oldalsáv pozíció abszolút de csak ha te biztosak vagyunk benne, hogy a tartalom magasságban nagyobb lesz, mint az oldalsáv különben az oldalsáv teljes tartalma elfér a láblécben (elvégre az abszolút pozicionálás kilóg az általános áramlásból).

De ami engem illet, ez sem túl jó módszer!

4 irányú.

"Remek módszer, ha bármilyen hibája van, kérjük, írja meg véleményét. De szerintem ez a legjobb módszer."

• A módszer előnyei: először is a DOM tartalom az oldalsáv elé kerül, ami jó a keresőmotoroknak.
• a láblécbe semmi sem fog beleférni
• Bármely blokk törölhető, és semmi sem fog lecsúszni az alsó szegélyre (Tehát a második módszer problémáin túljutottunk).

Általában hogyan működik: nézd meg a kódot, először jön a tartalom, majd az oldalsáv. erre a két blokkra úszót állítottunk be (persze az oldalsáv lecsúszik). ezután beállítjuk az oldalsáv tulajdonság margin-left:-100%. nagyszerű, visszakerült a helyére, és a tartalom behúzása a margó-leir:300 képponttal.

html

css

.oldalsáv(
szélesség: 300 képpont;
display:block;
balra lebeg;
árrés: 0 0 0 -100%;
}
.tartalom(
min-szélesség: 723 képpont;
display:block;
balra lebeg;
margó: 0 0 0 220 képpont;
}

A legegyszerűbb példa egy rögzített lebegő oldalsávra HTML+CSS+JS-ben.

Mi a sajátossága - görgetéskor az oldalsáv az ablak tetejére tapad, ugyanakkor amikor az oldalsáv a láblécig gördül, akkor lejön a képernyő tetejéről és a sajátjához tapad alsó a lábléchez, ezáltal nem fedi át a láblécet (a láblécnek magasnak kell lennie). Ha érted mire gondolok.

A példa egy oldalról származik, és nagyon primitív (és erkölcsileg elavult), csak erre az elrendezésre alkalmas. Több univerzális kód található ebben a cikkben, és máris megírhatja saját kódját a projekthez.

HTML jelölés egy egyszerű oldalhoz

CSS-stílusok tartalomblokkokhoz

.header ( szélesség: 100%; háttér: lila; magasság: 80 képpont; ) .content ( szélesség: 80%; háttér: kék; magasság: 800 képpont; lebegés: balra; ) .sidebar ( szélesség: 20%; háttér: zöld; magasság: 100px; lebegés: jobb; ) .sidebar.fix ( pozíció: fix; jobb: 50%; margó-jobb: -50%; ) .footer (szélesség: 100%; háttér: szürke; magasság: 500px; tiszta: mindkét; )

JS-szkript a rögzített oldalsávhoz az oldal görgetésénél

Ne felejtse el hozzáadni a jQuery-t

$(function() ( var $ablak = $(ablak); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $lábléc = $(".láb"); var $láblécTop = $lábláb.pozíció().top; $ablak.scroll(function(event) ( $sidebar.addClass("fixed"); 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); )); ));

Lebegő blokk (vagy ahogy más néven mozgó, rögzített, beragadt) szükséges az oldalon, hogy a felhasználó az oldal görgetése során egy rögzített elemet lásson, amelyben a leggyakrabban a reklámok vannak elhelyezve (teaserek, bannerek vagy kontextus).

Jaj, az adsense szabályai ezt tiltják nekünk. Sok webhelytulajdonos azonban saját felelősségére figyelmen kívül hagyja a szabályokat. Lehet, hogy nem is büntetik ezért, de nem tanácsolom a kockázatvállalást.

Ilyen blokkokban helyezem el a YAN-t, a teasereimet/bannereimet, és olykor reklám helyett hasonló bejegyzéseket, vagy valamilyen hasznos információt jelenítek meg a látogató számára.

Elmondjuk, hogyan készíthetsz lebegő blokkot a webhelyeden.

Egy feladat: az oldalsáv (oldalsáv) utolsó blokkját lebegővé tenni. Sőt, hogy csak abban a pillanatban ragadjon meg, amikor a felhasználó görgetéssel eléri, és ne azonnal az oldal megnyitásakor. Ezenkívül a blokknak „le kell ragadnia”, el kell érnie a láblécet (azaz nem kell átfednie azt).

A leginkább működő mód

A ragadós blokknak számos megvalósítása létezik, de nem mindegyik működik megfelelően. Megmondom tőle személyes tapasztalat: Ugyanaz a blokktelepítési módszer működhet az egyik oldalon, de a jambok megjelennek egy másik oldalon.

Az alábbiakban egy példa látható egy lebegő blokkra, amely szinte minden olyan webhelyen működött, amelyre telepítettem. Nem voltak kecskék. A motor sem fontos (DLE, WordPress, LiveStreet stb.).

Illessze be a következő HTML-kódot az oldalsáv kívánt helyére:

$(window).scroll(function() (
var sb_m = 20 ; /* felső és alsó párnázás */
var mb = 300; /* pincemagasság margóval */
varst = $(ablak).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;

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) ) ;
}
más(
sb.css(( "paddingTop" : 0 ) );
}
}
} ) ;

Ebben a kódban beállíthatja a lábléc tetejét, alját és magasságát, pl. az a magasság, ahol a blokknak meg kell állnia.

Most a JS-t is beszámítjuk. Ehhez írja be a HEAD szakaszba:

Magát a header.php fájlt használhatja úgy, hogy ezt a kódot a nyitó és záró head tag közé helyezi, és script címkékbe csomagolja, így:

Ezt a kódot bárhol máshol is beírhatja szkriptcímkékbe. A lényeg, hogy a blog megfelelő oldalain töltsön be. Például megteheti a footer.php-ben a záró body címke előtt.

Most menjünk közvetlenül ehhez a kódhoz. Kiderült, hogy felülről 10 pixel után a relatív pozicionálást egy fix váltja fel (lásd a cikket a fenti linken). Ha szükséges, az else-vel sorban választhatunk felső értéket, nem nullát, majd a felül rögzített menü ezzel a pixelértékkel behúzódik a nézetablak felső szélétől (szerintem ez felesleges).

Az eredeti kóddal ellentétben hozzá kellett adnom a szélességet is: "100%", mert különben a menü mérete szélességben csökken, ami elrontotta az összképet.

Nézze, az egyértelműség kedvéért megadom a WordPress blogsablon felső menüjét alkotó HTML kódot (a header.php fájlomban él a címről):

A sablonodban nagy valószínűséggel a menüelemek kimenete például egy ilyen konstrukcióval (függvénnyel) lesz beállítva, de nem ez a lényeg.

A wp_list_pages függvény természetesen jó (lehetővé teszi a rendezés beállítását, a kivételek beállítását stb.), de jobb, ha mindent kézzel csinálunk sima HTML-en keresztül, ahogy fentebb is látható. IMHO.

Itt fontos megragadni, hogy az egész ügy lezárult konténer div-ekbe, és a legfelsőbe rendelkezik egy id="navi" attribútummal. Itt fogunk ragaszkodni hozzá. A fenti JS-kódban látható, hogy kétszer fordul elő #navi? Ott kell letenned az azonosítódat a #navi helyett (vagy egy osztályt, ami, mint emlékszel, nem rácson, hanem ponton keresztül van kiírva, pl. így: .menu).

Ezt követően a menüt a legfelső pozícióban kell rögzíteni, amikor bizonyos számú képponttal görgeti az oldalt. Viszont az volt a bajom, hogy éppen ez a menü nem mindig jelent meg azon oldalelemek tetején, amelyek fölött lebegett.

Ez, látod, nem jó. Ezért egy kicsit bele kellett nyúlnom a CSS kódba, és hozzá kellett adnom egy 1000-es értéket a #navi választó azonosítójához:

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

A helyzet az, hogy amikor a Position segítségével beállítja a három helymeghatározási típus egyikét, ez az elem nem működik együtt a HTML-kód szokásos elemeivel. De más hasonló pozíciójúkkal versenyezni fog a „felül vagy lent” pozícióért. A z-index:1000 lehetővé teszi, hogy étlapunkat nyilvánvalóan az összes többi blokk fölé helyezzük. Olvassa el a fenti cikket a részletekért.

Hogyan készítsünk lebegő oldalsávot a WordPress-ben bővítmények nélkül

Az alább leírt módszerrel az egész oldalsávot, vagy annak egy részét lebegtetheti (vagy más szóval rögzítheti a nézetablakban egy bizonyos helyen). Ha ez a terület elég kicsi és elfér egy képernyőn (akár egy hordozható eszközön is), akkor az egészet lebegtetheti.

De leggyakrabban ez nem így lesz, és az alsó részt lebegni lehet kényszeríteni. Ha az oldalsáv, mint az én esetemben, egy elválaszthatatlan monolit, akkor saját maga is létrehozhat egy lebegő blokkot a használt tervezési témában lefektetett elvek alapján, és elhelyezheti a fő alá.

Mindezt gyorsan és anélkül tettem meg, hogy komolyan zaklattam volna magam sallangokkal és az optimális megoldás megtalálásával, mert gazdag kísérleti tapasztalataimból megtanultam azt a mintát, hogy minél jobban reménykedsz egy-egy ötletben, annál kisebb az esély a „lövésre”. Nos, fordítva. Általánosságban elmondható, hogy még nem volt értelme vesződni, mert nem olyan nagy a valószínűsége, hogy mindez gyökeret ver.

Szóval csak vettem az alsó blokk létrehozásához A fő oldalsávom felső részét áthelyeztem (a sidebar.php sablonban), majd felülről átraktam az alsó „Pénzszerzésre használom” blokkba, és a végére beragasztam a főbe, ami volt a vége. Blokk. Valami ilyesmi lett belőle:

Nos, most áthelyeztem a „bevételre használom” blokkot az oldalsáv felső blokkjából az alsóba. Kiderült, hogy nem egy szökőkút, de egy "ideiglenes" megteszi. Csak mindezt egy JS-fájlba kell rendezni kóddal, és az alsó blokk lebegni kezd. A JS kód így néz ki:

$(document).ready(function()( var br = $.browser; $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ( $(.sidebar123").css((felső: "52px", pozíció: "fix", marginBal: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

Kérjük, vegye figyelembe, hogy a .sidebar123 helyett az osztályát vagy annak a külső tárolónak az azonosítóját kell helyettesítenie, amelyben az oldalsáv alsó blokkja található.

Nem nagyon értem ezt a kódot (nem ismerem a JS-t), de minden működik. Legalábbis részben. Ha fix pozicionálást ad meg, a jelentés a bal felső ponttól indul. Ezért a marginLeftnél: "760px" ezt a blokkot pontosan az oldalsáv szintjére helyezem (a számot "próba és hiba" útján kaptam).

A felső érték: "52px" beállítja a már lebegő oldalsáv blokk kitöltését a felső szegélytől. A felső értéke Azonban van volt egy probléma abban az esetben, ha a fő oldalsáv teljes magassága kisebb volt, mint a tartalomterület magassága. Ilyen dolog derült ki például a címsorok archívumának megtekintésekor:

CSS-szempontból megértem, miért történik ez, de lusta voltam a javításon gondolkodni. Csak meg kellett tagadnom, hogy ilyen oldalakon mutassam ezt a lebegő oldalsávblokkot (ott nincs rá szükség).