Dobrý deň, dnes sa s vami porozprávame o tom, ako vytvoriť vlastný navigačný panel pre stránku. Používa sa takmer na každom internetovom zdroji, takže každý vývojár by mal byť schopný vytvoriť tento prvok.
Vysvetlivky k článku:
- "Sidebar / sidebar" - navigačná lišta na stránke.
- "Pozícia" je vlastnosť v CSS.
- „Hore“, „vľavo“, „vpravo“, „dole“ sú vlastnosti pohybu CSS.
- WordPress je redakčný systém/CMS webových stránok.
- Webix – knižnica používateľského rozhrania. Umožňuje vytvárať prvky tabuľky.
- Zobrazenie je funkcia JavaScript.
Tento článok ukáže rôznymi spôsobmi vytváranie navigačných panelov, ručne aj pomocou špeciálnych site-constructorov. Náš príklad používa WordPress.
Ako vytvoriť bočný panel ručne? CSS a HTML
Teraz si ukážeme tradičný spôsob vývoja, a to písanie kódu in textový editor. Ak to chcete urobiť, musíte otvoriť dokumenty HTML a CSS v editore kódu.
Vytvorenie bočného panela na pravej strane. HTML a CSS
Najčastejšie sa navigačná lišta nachádza buď v hlavičke stránky, alebo na jej pravej strane. V druhom prípade sa zvyčajne používa 2-stĺpcové rozloženie.
Je dobré, ak máte vopred pripravené rozloženie, pretože poznáte šírku navigačný blok. Ak rozloženie chýba, nebude to narúšať vývoj.
Pozor! Pri vytváraní bočných panelov a iných prvkov lokality si vopred pripravte pripravený layout. Ak sa naň zameriate, zjednodušíte si proces vývoja.
Navigačný panel je možné vytvoriť pomocou zoznamov a bežných blokov. Ak používate zoznamy, vypnite pre ne vlastnosť „text-decoration“.
V našom príklade je použitá konštrukcia div bloku.
Na začiatok vytvoríme spoločný blok div, v ktorom budú umiestnené stĺpce. Vytvorme pre to nejakú triedu, v našom príklade je použitá trieda rozloženia, ale to nijako zvlášť neovplyvňuje proces vývoja.
Hlavný blok bude slúžiť na vytváranie polohovania, ako aj dimenzovania.
Začnime polohovaním. Pre všeobecný kontajner nastavíme relatívne umiestnenie - vlastnosť (pozícia: relatívna). Pre stĺpce je nastavená vlastnosť (pozícia: absolútna).
Pri použití tohto typu bude pre vás jednoduchšie umiestniť stĺpce do bloku. Na tento účel použijeme vlastnosti posunu:
V našom príklade kód vyzerá takto:
HTML
Kopírovať
css
rozloženie (
poloha: relatívna;
pozadie: rgba(119, 115, 115, 0,58);
}Bočný panel , .content (pozícia: absolútna; )
bočný panel (
pozadie: #C6DD7D;
Obsah(
pozadie: #F4ECCE;
Kopírovať
Pozor! Nezabudnite zadať šírku každej jednotlivej položky navigácie. Ide o to, že majú absolútne umiestnenie, čo znamená, že ich šírka sa bude rovnať šírke vnútorného obsahu.
Chceme tiež poznamenať, že v , je druhý stĺpec umiestnený ako prvý a potom prvý. Použitím túto metódu nevadí, keďže stĺpce sa dajú jednoducho prehodiť.
Na to môžete použiť aj vlastnosť float. Táto metóda je oveľa jednoduchšia, pretože sa spolieha na obalenie prvkov. Vďaka nemu bude náš sidebat umiestnený na pravej strane.
Vytvorenie navigačnej lišty na pravej strane. HTML a CSS
Na vytvorenie takéhoto panelu môžete použiť rovnaké označenie ako v prvom príklade. CSS kód tiež netreba veľmi meniť.
V kóde CSS musíte vykonať malé úpravy. Je to potrebné, aby sa ponuka nachádzala na pravej strane. Vlastnosti šírky a polohy nemeníme!
Ako vytvoriť bočný panel vo WordPress?
Teraz sa pozrime na metódu, ktorá je veľmi odlišná od predchádzajúcej. Rozdiel je v tom, že môžete vytvoriť lepšiu navigáciu s malým alebo žiadnym kódom CSS alebo HTML.
Nebudete musieť písať celý kód ručne, všetka práca prebehne v samotnom konštruktore.
O pomocou WordPress budete musieť zaregistrovať navigačný panel a pridať doň nejaké miniaplikácie.
Ak chcete zaregistrovať bočný panel vo WordPress, budete musieť napísať niekoľko funkcií PHP súbory. V zásade budete potrebovať polia údajov, ktoré budú odkazovať na widgety a ich značky div.
V našom príklade sa berie do úvahy pravý bočný panel, ako aj bočný panel päty.
Pár slov o webixe
Existuje ďalší špeciálny rámec, ktorý vám umožní vytvoriť tento bočný panel. Jeho hlavnou výhodou je, že vám umožňuje vytvoriť dobrý dashboard len s niekoľkými riadkami kódu.
Najprv si musíte stiahnuť tento framework. Potom poskytnite odkazy na jeho štýly a skripty v dokumente HTML.
Potom môžete začať vytvárať bočný panel. Na jeho umiestnenie do rámca existuje špeciálna funkcia - pohľad. Ktoré bude miesto pre umiestnenie prvkov.
Nevýhodou tohto rámca sú jeho obmedzenia. Pri jeho použití sa vám nepodarí vytvoriť skutočne jedinečný výtvor, keďže panel nie je obmedzený vašou fantáziou, ale iba niekoľkými funkciami.
Záver
V tomto článku sme sa zaoberali niekoľkými základnými spôsobmi vytvorenia navigačného panela, ale existuje mnoho ďalších. Dokonca si na základe našich skúseností môžete prísť na svoj vlastný spôsob.
V týchto príkladoch je zobrazený jednoduchý navigačný panel. Ak budete málo pracovať zdrojový kód, potom môžete získať skutočné majstrovské dielo.
Značky:Aké sú požiadavky na usporiadanie?
- Gumové rozloženie v dvoch stĺpcoch
- bočný panel pevná šírka 300px
- obsah je natiahnutý na zvyšok šírky.
- päta stlačená nadol (v tomto návode neukážem, ako sa to robí).
Aké problémy Css vznikajú pri usporiadaní takéhoto rozloženia:
1 spôsob.
Ak plávate bloky, vy musí im dať pevnú šírku(nemôžete nastaviť 1 bočný panel na 300 pixelov a obsah na 100 %). V tomto prípade sa obsah posunie nadol alebo sa zobrazí horizontálne posúvanie o 300 pixelov doľava. No, hlavná vec, ktorú treba pochopiť, je, že táto metóda nám nevyhovuje.
2 spôsobom.
Mnoho sadzačov ponúka túto metódu, o čom premýšľajú?! Podstatou metódy je, že môžete nastaviť postranný panel tak, aby sa vznášal so šírkou 300, a nie plávať obsah a nastaviť mu margin-left: 300px. Dobrý spôsob a zdá sa, že všetko funguje tak dobre. Aby som bol úprimný, myslel som si, že je to najlepší spôsob, ale táto metóda má svoje vlastné úskalia. Dôvody na opustenie tejto metódy sú, že ak náhle v obsahu vytvoríme napríklad menu s floated li alebo akýmkoľvek iným float blokom a potom ich chceme vyčistiť s clear:both, tak sa spodná hranica tohto bloku posunie až po úroveň spodného okraja bočného panela (Čo a nie je to divné, pretože je vymazaná, môžete sa tomu vyhnúť, ak nastavte plávajúci blok na pevnú výšku, ale vôbec nejde o nastavenie pevnej výšky).
3 spôsob.
Môže byť použitý pre absolútna poloha bočného panela ale iba ak ty sme si istí, že obsah bude na výšku väčší ako bočný panel v opačnom prípade sa celý obsah bočného panela zmestí na pätu (napokon absolútne umiestnenie vytrháva zo všeobecného toku).
Ale pokiaľ ide o mňa, toto tiež nie je veľmi dobrý spôsob!
4 spôsobom.
"Skvelý spôsob, ak má nejaké nedostatky, prosím komentujte. Ale myslím si, že toto je najlepší spôsob."
- Výhody tejto metódy: po prvé, obsah DOM pôjde pred bočný panel, čo je dobré pre vyhľadávače.
- na pätu sa nič nezmestí
- akékoľvek bloky sa dajú vyčistiť a nič sa neposunie na spodnú hranicu (Takže sme prekonali problémy druhej metódy).
Vo všeobecnosti, ako to funguje: pozrite sa na kód ako prvý príde obsah a potom bočný panel. na tieto dva bloky nastavíme float (samozrejme bočná lišta sa posúva dole). potom nastavíme vlastnosť bočného panela margin-left:-100%. skvelé, je to späť na svojom mieste a odsadenie obsahu pomocou margin-lerft:300px.
html
css
.sidebar(šírka: 300px;
displej:blok;
plavák: vľavo;
marža: 0 0 0 -100 %;
}
.content(
min-width:723px;
displej:blok;
plavák: vľavo;
okraj: 0 0 0 220px;
}
Najjednoduchší príklad pevného plávajúceho bočného panela v HTML+CSS+JS.
Aká je jeho zvláštnosť - pri posúvaní sa bočný panel prilepí na hornú časť okna, ale zároveň, keď sa bočný panel posunie k päte, potom sa z hornej časti obrazovky prilepí dno k päte, čím sa päta neprekrýva (päta musí byť vysoká). Ak vieš čo myslím.
Príklad bol prevzatý z nejakej stránky a je veľmi primitívny (a morálne zastaraný), vhodný len pre toto usporiadanie. Univerzálnejší kód nájdete v tomto článku a už si môžete napísať vlastný kód pre svoj projekt.
HTML značky pre jednoduchú stránku
CSS štýly pre bloky obsahu
.header ( šírka: 100 %; pozadie: fialové; výška: 80px; ) .obsah ( šírka: 80 %; pozadie: modré; výška: 800px; plávajúca plocha: vľavo; ) .bočný panel ( šírka: 20 %; pozadie: zelené; výška: 100px; float: right; ) .sidebar.fixed (pozícia: pevná; pravá: 50%; okraj-vpravo: -50%; ) .footer (šírka: 100%; pozadie: sivá; výška: 500px; jasné: oboje ;)JS skript pre pevný bočný panel pri posúvaní stránky
Nezabudnite zahrnúť jQuery
$(function() ( var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height() ; var $footer = $(".footer"); var $footerTop = $footer.position().top; $window.scroll(funkcia(udalosť) ( $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); )); ));
Na stránke je potrebný plávajúci blok (alebo ako sa tiež nazýva pohyblivý, pevný, uviaznutý), aby používateľ pri posúvaní stránky videl jeden pevný prvok, v ktorom je najčastejšie umiestnená reklama (upútavky, bannery alebo kontext).
Bohužiaľ, pravidlá adsense nám to zakazujú. Mnohí majitelia stránok však pravidlá ignorujú na vlastné riziko. Možno za to nie sú ani potrestaní, ale neradil by som riskovať.
Do takýchto blokov umiestňujem YAN, svoje teasery/bannery a občas namiesto reklamy zobrazím podobné príspevky alebo nejaké užitočné informácie pre návštevníka.
Povedzme si, ako môžete na svojej stránke vytvoriť plávajúci blok.
Úloha: urobte posledný blok v bočnom paneli (bočnom paneli) plávajúcim. Navyše tak, aby sa nalepil až v momente, keď sa k nemu užívateľ dostane rolovaním, a nie hneď pri otvorení stránky. Blok by sa mal tiež „odlepiť“ a dosiahnuť pätu (t. j. neprekrývať ho).
Najpracovnejší spôsob
Existuje mnoho implementácií lepiaceho bloku, ale nie všetky fungujú správne. Poviem od osobná skúsenosť: Rovnaký spôsob inštalácie bloku môže fungovať na jednom mieste, ale na inom sa objavia zárubne.
Nižšie je uvedený príklad plávajúceho bloku, ktorý fungoval takmer na každej stránke, na ktorú som ho nainštaloval. Neboli tam žiadne kozy. Engine tiež nie je dôležitý (DLE, WordPress, LiveStreet atď.).
Prilepte nasledujúci kód HTML na požadované miesto na bočnom paneli:
$(okno).scroll(funkcia() (
var sb_m = 20 ; /* horné a spodné čalúnenie */
var mb = 300; /* výška suterénu s okrajom */
varst = $(okno).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) );
}
inak(
sb.css(( "paddingTop" : 0 ) );
}
}
}
)
;
V tomto kóde si môžete nastaviť vrch, spodok a výšku vašej päty, t.j. výška, v ktorej sa má blok zastaviť.
Teraz zahrnieme JS. Ak to chcete urobiť, napíšte do sekcie HEAD:
Teraz poďme priamo k tomuto kódu. Ukazuje sa, že po 10 pixeloch zhora je relatívne umiestnenie nahradené pevným umiestnením (pozri článok na vyššie uvedenom odkaze). Ak je to potrebné, v súlade s else môžete pre hornú časť vybrať inú hodnotu ako nulu a potom sa ponuka v hornej časti odsadí od horného okraja výrezu o túto hodnotu pixela (podľa môjho názoru je to zbytočné) .
Na rozdiel od pôvodného kódu som musel pridať aj šírku: "100%", pretože inak by sa veľkosť menu na šírku zmenšila, čo pokazilo celý obraz.
Pozrite sa, pre jasnosť dám Html kód, ktorý tvorí hornú ponuku v mojej šablóne blogu WordPress (nachádza sa v mojom súbore header.php z ):
Vo vašej šablóne bude s najväčšou pravdepodobnosťou výstup položiek menu nastavený napríklad pomocou takejto konštrukcie (funkcie), ale o to nejde.
Funkcia wp_list_pages je samozrejme dobrá (umožňuje konfigurovať triedenie, nastavovať výnimky atď.), ale je lepšie robiť všetko ručne cez obyčajný Html, ako je uvedené vyššie. PODĽA MÔJHO NÁZORU.
Tu je dôležité pochopiť, že celá záležitosť je uzavretá do kontajnerových divov a do tej najvyššej má atribút id="navi". Tu sa toho budeme držať. Vo vyššie uvedenom kóde JS vidíte, že sa vyskytuje dvakrát #navi? Namiesto #navi tam budete musieť uviesť svoje ID (alebo triedu, ktorá sa, ako si pamätáte, nepíše cez krížik, ale cez bodku, napríklad takto: .menu).
Potom by mala byť vaša ponuka pri posúvaní stránky o určitý počet pixelov zafixovaná v hornej pozícii. Mal som však problém s tým, že práve toto menu sa nie vždy objavilo na vrchu prvkov stránky, nad ktorými sa vznášalo.
Vidíte, toto nie je dobré. Preto som sa musel trochu dostať do kódu CSS a pridať s hodnotou 1000 pre id selektora #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 )
Faktom je, že keď nastavíte jeden z troch typov určovania polohy pomocou pozície, tento prvok prestane interagovať s bežnými prvkami kódu Html. Ale s ostatnými podobne umiestnenými bude súťažiť o pozíciu „nad alebo pod“. z-index:1000 nám umožňuje umiestniť naše menu zjavne nad všetky ostatné bloky. Podrobnosti nájdete v článku vyššie.
Ako vytvoriť plávajúci bočný panel vo WordPress bez doplnkov
Pomocou nižšie popísanej metódy môžete celý bočný panel alebo jeho časť nechať plávať (alebo inými slovami pripevniť na určité miesto vo výreze). Ak je táto oblasť dosť malá a zmestí sa na jednu obrazovku (dokonca aj na prenosné zariadenie), môžete ju nechať plávať.
Ale najčastejšie to tak nebude a spodnú časť bude možné prinútiť plávať. Ak je bočný panel, ako v mojom prípade, neoddeliteľným monolitom, môžete si sami vytvoriť plávajúci blok podľa princípov stanovených v téme dizajnu, ktorú používate, a umiestniť ho pod hlavný.
Urobil som to všetko rýchlo a bez toho, aby som sa skutočne trápil zbytočnosťami a hľadaním optimálneho riešenia, pretože z mojich bohatých skúseností z experimentov som sa naučil, že čím viac nádejí vkladáte do nejakého nápadu, tým je menej pravdepodobné, že „vystrelí“. No a naopak. Vo všeobecnosti ešte nemalo zmysel sa obťažovať, pretože pravdepodobnosť, že sa to všetko zakorení, nie je taká veľká.
Tak som len zobral na vytvorenie spodného bloku Posunul som hornú časť môjho hlavného bočného panela (v šablóne sidebar.php), potom som ho preniesol z horného do spodného bloku „Používam ho na zarábanie peňazí“ a na konci som vlepil koniec do hlavného blokovať. Ukázalo sa niečo takéto:
Teraz mám blok „Používam na zarábanie“ presunutý z horného bloku bočného panela do spodného. Ukázalo sa, že to nie je fontána, ale na "dočasné" to bude stačiť. Zostáva to všetko usporiadať do súboru JS s kódom a spodný blok sa začne vznášať. JS kód vyzerá takto:
$(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((top: "52px", position: "fixed", marginLeft: "760px")); ) else if ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });
Všimnite si, že namiesto .sidebar123 musíte nahradiť svoju triedu alebo ID vonkajšieho kontajnera, v ktorom sa nachádza spodný blok vášho bočného panela.
Nerozumiem tomuto kódu veľmi dobre (nepoznám JS), ale všetko funguje. Aspoň čiastočne. Keď nastavíte pevnú polohu, prehľad bude z ľavého horného bodu. Preto s marginLeft: "760px" umiestnim tento blok presne na úroveň bočného panela (číslo bolo získané "pokusom a omylom").
Hodnota top: "52px" nastavuje výplň už plávajúceho bloku bočného panela od horného okraja. Hodnota top Avšak mám Bol tu problém v prípade, že celková výška hlavného bočného panela bola menšia ako výška oblasti obsahu. Takáto vec sa dostala von napríklad pri prezeraní archívu nadpisov:
Z pohľadu CSS chápem, prečo sa to deje, ale bol som lenivý premýšľať o oprave. Len som musel odmietnuť zobraziť tento plávajúci blok bočného panela na takýchto stránkach (nie je tam potrebný).
