Dobrý den, dnes si s vámi povíme, jak vytvořit vlastní navigační lištu pro web. Používá se téměř na každém internetovém zdroji, takže každý vývojář by měl být schopen tento prvek vytvořit.

Vysvětlivky k článku:
  • "Postranní panel" - navigační panel webu.
  • "Pozice" je vlastnost v CSS.
  • "Nahoře", "vlevo", "vpravo", "dole" - vlastnosti pohybu v CSS.
  • WordPress je redakční systém/CMS webových stránek.
  • Webix – knihovna uživatelského rozhraní. Umožňuje vytvářet prvky tabulky.
  • Zobrazit je funkce JavaScriptu.

    • Tento článek ukáže různé cesty vytváření navigačních panelů, a to jak ručně, tak pomocí speciálních tvůrců webových stránek. Náš příklad používá WordPress.

    Jak vytvořit postranní panel ručně? CSS a HTML

    Nyní si ukážeme tradiční způsob vývoje, a to psaní kódu in textový editor. Chcete-li to provést, musíte otevřít dokumenty HTML a CSS v editoru kódu.

    Vytvoření postranního panelu na pravé straně. HTML a CSS

    Nejčastěji se navigační lišta nachází buď v záhlaví webu, nebo na jeho pravé straně. Ve druhém případě se obvykle používá 2-sloupcové rozložení.

    Je dobré, když máte předem připravené rozložení, protože znáte šířku navigační blok. Pokud neexistuje žádné rozvržení, nebude to narušovat vývoj.

    Pozornost! Při vytváření postranních panelů a dalších prvků webu si předem připravte připravený layout. Tím, že se na něj zaměříte, zjednodušíte proces vývoje.

    Navigační lištu lze vytvořit pomocí seznamů a běžných bloků. Pokud používáte seznamy, deaktivujte pro ně vlastnost "text-decoration".

    Náš příklad používá návrh bloku div.

    Nejprve vytvoříme společný blok div, ve kterém budou umístěny sloupce. Vytvořme pro to nějakou třídu, v našem příkladu je použita třída layout, ale to nijak zvlášť neovlivňuje proces vývoje.

    Hlavní blok bude použit k vytvoření polohování a také dimenzování.

    Nejprve se rozhodneme o umístění. Pro obecný kontejner nastavíme relativní umístění - vlastnost (position: relativní). Vlastnost (pozice: absolutní) je nastavena pro sloupce.

    Použití tohoto typu vám usnadní umístění reproduktorů uvnitř bloku. K tomu použijeme vlastnosti pohybu: , , a .

    V našem příkladu vypadá kód takto:


    HTML

    Testovací stránka

    Sloupec 1

    Sloupec 2

    kopírovat


    CSS

    Rozložení (

    poloha: relativní;

    pozadí: rgba(119, 115, 115, 0,58);

    }

    Postranní panel, .content (pozice: absolutní;)

    postranní panel (

    pozadí: #C6DD7D;

    Obsah (

    pozadí: #F4ECCE;

    kopírovat

    Pozornost! Nezapomeňte zadat šířku pro každou jednotlivou navigační položku. Jde o to, že mají absolutní umístění, což znamená, že jejich šířka bude rovna šířce vnitřního obsahu.

    Chceme také poznamenat, že v , je druhý sloupec umístěn jako první a poté první. Použitím tato metoda to nevadí, protože reproduktory lze snadno vyměnit.

    K tomu můžete také použít vlastnost float. Tato metoda je mnohem jednodušší, protože je založena na obtékání prvků. Díky ní bude náš sidebat umístěn na pravé straně.

    Vytvořte navigační panel na pravé straně. HTML a CSS

    K vytvoření takového panelu můžete použít stejné označení jako v prvním příkladu. Ani v kódu CSS nemusíte provádět žádné speciální změny.

    Musíte provést nějaké drobné úpravy v kódu CSS. To je nutné, aby se nabídka nacházela na pravé straně. Šířku a vlastnosti polohování neměníme!


    Jak vytvořit postranní panel ve WordPressu?

    Nyní se podíváme na metodu, která je velmi odlišná od té předchozí. Rozdíl je v tom, že můžete vytvořit lepší navigaci prakticky bez kódu CSS nebo HTML.

    Nebudete muset psát celý kód ručně, veškerá práce proběhne v samotném konstruktoru.

    Na pomocí WordPressu budete muset zaregistrovat navigační panel a přidat do něj nějaké widgety.

    Chcete-li zaregistrovat postranní panel ve WordPress, budete muset napsat několik funkcí soubory PHP. V zásadě budete potřebovat pole dat, která budou odkazovat na widgety a jejich tagy div.


    V našem příkladu uvažujeme pravý postranní panel a také postranní panel zápatí.

    Pár slov o webixu

    Existuje další speciální rámec, který vám umožní vytvořit tento postranní panel. Jeho hlavní výhodou je, že vám umožňuje vytvořit dobrý panel napsáním jen několika řádků kódu.

    Nejprve si musíte stáhnout tento framework. Poté poskytněte odkazy na jeho styly a skripty v dokumentu HTML.

    Poté můžete začít vytvářet postranní panel. Pro jeho umístění do rámce existuje speciální funkce - pohled. Které bude umisťovat umístění prvků.

    Nevýhodou tohoto rámce jsou jeho omezení. Při jeho použití nebudete moci vytvořit skutečně jedinečný výtvor, protože panel není omezen vaší představivostí, ale pouze několika funkcemi.

    Závěr

    V tomto článku jsme se podívali na několik základních způsobů, jak vytvořit navigační panel, ale existuje mnoho dalších. Na základě naší práce si dokonce můžete vymyslet vlastní metodu.

    Tyto příklady ukázaly jednoduchý navigační panel. Pokud budete trochu pracovat s zdrojový kód, pak můžete získat skutečné mistrovské dílo.

    Štítky:

    Jaké jsou požadavky na rozložení:

    • Gumové dvousloupcové rozložení
    • postranní panel pevná šířka 300px
    • obsah se roztáhne na celou zbývající šířku.
    • zápatí stisknuté dolů (v této lekci nebudu ukazovat, jak se to dělá).
    Jaké problémy Css vznikají při uspořádání takového rozložení: 1. metoda.

    Pokud bloky necháte plavat, musíte jim dát pevnou šířku (nemůžete nastavit 1 postranní panel na 300 pixelů a obsah na 100 %). V tomto případě se obsah buď posune dolů, nebo se zobrazí horizontální rolování 300 pixelů doleva. No, hlavní věcí je pochopit, že tato metoda nám nevyhovuje.


    Metoda 2.

    Mnoho designérů rozložení nabízí tuto metodu, o čem vůbec přemýšlí?! Podstatou metody je, že můžete nastavit postranní panel tak, aby plovoucí s šířkou 300, ale obsah by neměl být plovoucí a dát mu margin-left:300px. Dobrá cesta a zdá se, že vše funguje tak dobře. Abych byl upřímný, myslel jsem si, že je to nejlepší způsob, ale tato metoda má svá úskalí. Důvody pro opuštění této metody jsou, že pokud náhle v obsahu rozložíme například nabídku s floated li nebo jinými bloky float a pak je chceme vymazat pomocí clear:both, pak spodní hranice tohoto bloku sklouzne dolů na úroveň spodního okraje postranní lišty (Což a není to divné, protože patka je uvolněná, tomu se lze vyhnout, pokud je plovoucímu bloku dána pevná výška, ale to vůbec není případ nastavení pevné výška).


    3 způsobem.

    Pro postranní panel můžete použít absolutní pozici, ale pouze pokud jste si naprosto jisti, že obsah bude větší na výšku než postranní panel, jinak celý obsah postranního panelu vyleze do zápatí (ostatní absolutní umístění jej vyjme z obecný tok).

    ale pro mě to taky není moc dobrá cesta!


    4 způsob.

    "Skvělý způsob, pokud jsou v něm nějaké nedostatky, prosím komentujte. Ale myslím, že je to nejlepší způsob."

    • Výhody této metody: za prvé, obsah DOMe bude před postranním panelem, což je dobré pro vyhledávače.
    • do zápatí se nic nevejde
    • všechny bloky lze vymazat a nic se neposune ke spodnímu okraji (Takto jsme překonali problémy druhé metody).

    Obecně, jak to funguje: podívejte se na kód, obsah je na prvním místě, za ním postranní panel. nastavte plovák na tyto dva bloky (postranní lišta se přirozeně posune dolů). poté nastavíme vlastnost postranního panelu margin-left: -100%. skvělé, je zpět na svém místě a obsah odsazujeme pomocí margin-lerft:300px.


    html css .sidebar(
    šířka:300px;
    displej: blok;
    plavat vlevo;
    marže: 0 0 0 -100 %;
    }
    .obsah(
    min-width:723px;
    displej: blok;
    plavat vlevo;
    okraj: 0 0 0 220px;
    }

    Nejjednodušší příklad pevného plovoucího postranního panelu v HTML+CSS+JS.

    Jaká je jeho zvláštnost - při rolování se postranní panel přilepí k horní části okna, ale zároveň se při posunutí postranního panelu do zápatí odlepí od horní části obrazovky a přilepí se k vlastnímu dno do zápatí, čímž nepřekrývá zápatí (zápatí by mělo být vysoké). Jestli víš, co tím myslím.

    Příklad byl převzat z nějakého webu a je velmi primitivní (a morálně zastaralý), vhodný pouze pro toto uspořádání. V tomto článku se můžete podívat na univerzálnější kód a napsat si vlastní kód pro svůj projekt.

    HTML označení jednoduché stránky HLAVIČKA OBSAH OPRAVNÝ ZÁPAD POBOČNÍHO PANEL Styly CSS pro bloky obsahu .header ( šířka: 100 %; pozadí: fialová; výška: 80px; ) .content ( šířka: 80 %; pozadí: modré; výška: 800px; plovoucí : left; ) .sidebar ( width: 20%; background: green; height: 100px; float: right; ) .sidebar.fixed ( position: fixed; right: 50%; margin-right: -50%; ) .footer ( šířka: 100 %; pozadí: šedé; výška: 500px; jasné: obojí; ) JS skript pro pevný postranní panel při posouvání stránky

    Nezapomeňte připojit 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(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); )); ));

    Na webu je potřeba plovoucí blok (nebo jak se také nazývá pohyblivý, pevný, lepivý), aby uživatel při rolování stránky viděl jeden stacionární prvek, ve kterém je nejčastěji umístěna reklama (teasery, bannery nebo kontext) .

    Pravidla AdSense nám to bohužel zakazují. Mnoho majitelů webových stránek však pravidla ignoruje na vlastní nebezpečí. Možná za to ani nejsou trestáni, ale nedoporučoval bych riskovat.

    Do takových YAN bloků umisťuji své upoutávky/bannery a občas tam místo reklamy zobrazím podobné příspěvky nebo nějaké informace užitečné pro návštěvníka.

    Pojďme si říct, jak můžete na svém webu vytvořit plovoucí blok.

    Úkol: udělejte plovoucí poslední blok v bočním sloupci (sidebar). Navíc tak, aby se přilepila až v okamžiku, kdy se k ní uživatel posunem dostane, a ne hned při otevření stránky. Blok by se měl také „přilepit“, když dosáhne zápatí (tj. nepřekrývat jej).

    Nejpracovnější způsob

    Existuje mnoho možností pro implementaci lepivého bloku, ale ne všechny fungují správně. Řeknu vám to od osobní zkušenost: stejná metoda instalace bloku může fungovat na jednom webu, ale zárubně se objeví na jiném.

    Níže je uveden příklad plovoucího bloku, který fungoval téměř na všech webech, kam jsem jej nainstaloval. Nebyly tam žádné zárubně. Engine také není důležitý (DLE, WordPress, LiveStreet atd.).

    Na požadované místo do postranního sloupce vložte následující HTML kód:

    $(okno).scroll(funkce() (
    var sb_m = 20 ; /* výplň nad a pod */
    var mb = 300; / * výška suterénu s okrajem */
    var st = $(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.výška();

    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) );
    }
    jiný(
    sb.css(( "paddingTop" : 0 ) );
    }
    }
    } ) ;

    V tomto kódu si můžete nastavit odsazení nahoře, dole a také výšku vašeho zápatí, tzn. výška, ve které se blok musí zastavit.

    Nyní připojíme JS. Chcete-li to provést, napište do sekce HEAD:

    Nejjednodušší způsob (pro WordPress)

    Také metoda zabezpečená proti selhání, ale instalací pluginu. Funguje to bez zárubní.

    výhody:

    • není třeba rozumět/rozumět HTML;
    • jednoduchost a rychlost instalace.

    nedostatky:

  • není flexibilní. Celý widget (včetně jeho názvu a designu) se stane plovoucím. Řekněme, že bude obtížné vyrobit tento blok jiné barvy nebo velikosti.

    • Jak používat:

  • Stáhněte si plugin.
  • Instalujeme.
  • Pojďme to aktivovat.
  • Přejděte na panel správce na kartě: Návrh -> Widgety. Otevřete widget, který chceme opravit.
  • Zaškrtněte políčko vedle položky „Opravit widget“ a klikněte na tlačítko „Uložit“.
    • Další způsoby implementace posuvných bloků

    Zdály se mi méně pohodlné a ne tak jasné jako dvě výše uvedené metody. Ale stejně vám o nich řeknu.

    Možnost #1 (bez jQuery)

    Vložit do postranního panelu:

    Styly píšeme v HTML (je lepší je přidat přímo do CSS):


    .lepkavý(
    poloha: pevná;
    z-index: 101;
    }
    .stop(
    poloha: relativní;
    z-index: 101;
    }

    Nyní přidáme na stránku samotný skript (je lepší jej vložit do samostatného souboru, jako v „Nejpracovnější metodě“):


    (funkce() (
    var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // pokud je nula nahrazena číslem, blok se přilepí dříve, než horní okraj okna prohlížeče dosáhne horního okraje prvku. Může být záporné číslo
    window.addEventListener("scroll" , Ascroll, false) ;
    document.body.addEventListener("scroll" , Ascroll, false) ;
    funkce Ascroll() (
    if (b == null) (
    var Sa = getComputedStyle(a, "" ) , s = "" ;
    for (var i = 0; i< Sa.length; i++) {
    if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 || Sa[ i].indexOf("vycpávka" ) == 0 || Sa[ i].indexOf("hranice" ) == 0 || Sa[ i].indexOf("obrys" ) == 0 || Sa[ i].indexOf("box-shadow" ) == 0 || Sa[ i].indexOf("pozadí" ) == 0 ) (
    s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
    }
    }
    a.innerHTML = "" +a.innerHTML+"" ;
    b = a.děti[ 0 ] ;
    a.style .height = b.getBoundingClientRect() .height + "px" ;
    a.style .padding = "0" ;
    a.style .border = "0" ;
    }
    var Ra = a.getBoundingClientRect() ,
    R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // selektor bloků, při dosažení horního okraje je třeba uvolnit lepivý prvek; Math.round() je pouze pro IE; pokud je nula nahrazena číslem, blok se přilepí dříve, než spodní okraj prvku dosáhne zápatí
    if ((Ra.top - P)

    Vezměte prosím na vědomí, že pokud jsou v kódu jednoduché uvozovky uzavřené v echo "" , bude nutné je zakódovat, tj. vložte před každý z nich zpětné lomítko (\"), samozřejmě bez závorek.

    Obecně to dopadlo, jak to dopadlo. Budete se muset sami rozhodnout, jak to konkrétně připojit ke svému tématu - když máte čas, je dokonce zábavné „rozbít mozek“. Děkuji.

    Hodně štěstí! Brzy se uvidíme na stránkách blogu

    Mohlo by vás to zajímat

    WebPoint PRO je responzivní téma WordPress se širokou funkčností a kompetentní technickou optimalizací pro vyhledávače
    Share42 - skript pro přidávání tlačítek a záložek sociálních sítí na web (existuje možnost plovoucího panelu)