Jak vytvořit přizpůsobivé menu? Příklady

Adaptivní nabídka moderního místa není jen luxusem, nýbrž nutností. Množství moderních zařízení vyžaduje webmastery takového uspořádání, které by byly logicky zobrazeny na obrazovkách různých rozlišení. A v některých případech je vytvoření adaptivního menu mnohem obtížnější než návrh samotný, takže je třeba tento problém zvážit.

Menu pro velkou obrazovku

Chcete-li pochopit celkovou schému zavedení adaptivního menu, budete muset nejprve vytvořit HTML strukturu menu a stylizovat ji pomocí CSS. Na základě přijatého materiálu můžete také zlepšit adaptivní šablonu. Struktura HTML bude vypadat takto.

Výsledná nabídka bude muset přidat styly CSS. Měly by určovat velikost písma a barvu, pozadí, polohování bloků.

Adaptační proces

Vytvoření jednoduché funkce pro běžnou obrazovku počítače je jednoduchá záležitost, a to lze vidět na příkladu. Adaptivní nabídka pro web je vytvořena pouze tehdy, když má něco pracovat, to znamená, když již byly přidány navigační body. Nejoptimálnější variantou nabídky pro mobilní zařízení a tablety bude ikona hamburgerů - čtvercová krabička, ve které jsou tři vertikální funkce. Po stisknutí se otevře všechny položky nabídky. Chcete-li vytvořit takovou navigaci, musíte do dokumentu HTML přidat značky.

Dále budete muset do těchto značek přidat příslušné styly, abyste získali vizuálně přitažlivé a čitelné menu. Vedle vizualizace navigačních ikon a ikon menu je třeba odpovídajícím způsobem upravit polohu snímku. Takže zadáte stav menu_icon span: nth-child (1) {top: 0 px} -. To znamená, že odsazení obrazu zhora bude nulové pixely. Podobně musíte zadat hodnoty pro ostatní strany.

Nyní je adaptivní nabídka téměř hotová. Stojí za to věnovat pozornost podmínce displej: žádný. Ve výchozím nastavení nebude ikona nabídky vidět na webu, takže v dokumentu CSS je třeba přidat další třídu s následující podmínkou: .menu__icon {display: inline-block-}. Díky tomu bude navigace viditelná.

Kromě toho musíte přidat úkol do kaskádového stylu, který podle potřeby skryje položky a pododstavce. Chcete-li to provést, musíte v CSS nastavit pevnou položku nabídky, uspořádat zobrazení a zarovnání. Položky jsou skryté za podmínek přetečení: automatické opacity: 0-z-index: 1000. Můžete také přidat třídu menu__links-item, která určuje styl položek položek, ale je to ve vývojáři.

Dokonalý dotek

Takto je adaptivní nabídka na CSS téměř kompletní. Chcete-li se zobrazit po klepnutí na ikonu, musíte přidat funkce. Pro jednoduchost je lepší použít jQuery, ale pokud chcete, můžete vytvořit čistý jаvascript. Oba stejné podmínky budou použity tam a tam:

• (Function ($) {$ (function () $ ( `menu__icon.`) On ( `cvaknutí`, function () $ (this) .closest () ToggleClass ( `menu_state_open`) `Menu`. - ..}) -}) -}) (jQuery).

Toto doplňuje rozvržení adaptivní navigace. Ale to je jen jedna z několika možností pro vytvoření tohoto druhu funkčnosti, takže stojí za to zvážit zbytek. Přinejmenším několik z nich.

Bez změny standardů

Většina uživatelů internetu očekává, že navigační lišta bude vidět v horní části stránky. To se již stalo jakýmkoli standardem, takže přizpůsobivé horizontální menu by mělo mít slušný vzhled. To lze provést pomocí CSS, jako v příkladech uvedených výše a připojením skriptu psovodu. Obecně platí, že vytvoření adaptivního menu se skládá ze 3 kroků:

1. Psaní značek HTML
2. Jejich styl s kaskádovým stylem (CSS).
3. Přizpůsobení již existující nabídky.

Samozřejmě, všechny weby mají své vlastní lišty nabídek, ale pokud je zdroj vytvořen v CMS, bude mnohem jednodušší vytvořit nové adaptivní menu.

Bootstrap

Vytvoření adaptivní funkce není tak závažným problémem, pokud používáte nástroje Bootstrap. K vytváření horizontálního menu jsou přednastavené šablony. Stačí se připojit k zdrojovému souboru bootstrap.js. Pomocí tohoto rámce může webmaster vytvořit navigaci libovolné složitosti. Adaptivní nabídka s Bootstrap je vytvořena pomocí určitého kódu.

Vlastnosti metody

Nechte tento kód a těžkopádný, ale pochopitelný. Stojí za zmínku, že hlavní role hraje značka nav, který je zodpovědný za vytváření navigace a jejího vzhledu. Také zde jsou kontejnery kontejnerová tekutina a kontejner, které určují šířku položek. S jejich pomocí můžete rozbalit menu na obrazovkách s různými rozlišeními nebo je nechat fixní.

Důležitou roli při vytváření adaptivních funkčních funkcí zde hrají třídy sbalit a navbar-collapse, kteří jsou zodpovědní za styl. Samotné menu je vytvořeno psaním seznam s odrážkami položky, které jsou umístěny horizontálně.

Pokud použijete tento kód k vytvoření navigace, pak na širokoúhlém displeji bude vypadat jako vodorovný banner. Na začátku bude název zdroje a potom položky v přísně specifikované posloupnosti. Na úzkých obrazovkách se zobrazí pouze název webu a ikona hamburgeru, když kliknete na položky, které jsou zobrazeny jako vertikální seznam.

Rozbalovací nabídka

Prostředek Bootstrap bude vynikajícím pomocníkem při vytváření přizpůsobivé rozbalovací nabídky. Chcete-li to provést, stačí nahradit značku

To lze provést za jeden bod a za několik. V blízkosti pozice s rozbalovacími položkami bude šipka směřující dolů. Po klepnutí na tlačítko se objeví vytvořený seznam. Pokud je navigace zobrazena na malé obrazovce, pak bude položka s rozevíracím seznamem označena také šipkou, ale směrem na pravou stranu. Po stisknutí se zobrazí další vertikální seznam podřízených položek.

Víceúrovňová nabídka

Nicméně, rozbalovací seznamy nejen pomocí Bootstrapu. Pokud tato knihovna není připojena, můžete vytvořit adaptivní víceúrovňovou nabídku pomocí HTML a CSS a poté propojit funkci PHP.

Nejprve je třeba vytvořit soubor v seznamu HTML, který obsahuje další seznamy. Chcete-li to provést, použijte standardní značky

a
• . Nezapomeňte na formování tříd, které budou později zpracovány kaskádním stylem CSS. Aby bylo jasnější, stojí za to dát malý příklad psaní seznamů a vytváření tříd.

Animace adaptivní rozbalovací nabídky je určena pomocí kaskádového stylu. Zde je třeba zadat parametry nabídky, když se obrazovka sníží o 50, 75 a 25%. Tento přístup k vytváření adaptivní funkčnosti poskytuje kompetentní uspořádání, v němž se nabídka "nepohybuje".

A nakonec musíte do dokumentu zadat funkci níže.

Pokud web nepovažuje použití jiných funkcí než toto, musí pro ni vytvořit samostatný dokument skriptu. Pokud jej píšete ve formátu HTML, objeví se jednoduše v okně prohlížeče jako součást textu a nebude fungovat.

JQuery

Také vynikajícím řešením je vytvořit navigační panel na pluginu JQuery. Adaptivní nabídka v této službě je jen několik minut. Samotný plugin lze stáhnout na internetu, má jednoduché a intuitivní rozhraní, které je snadné a jednoduché. Takže by neměly být problémy s připojením stylu.

Po připojení stylu je nutné napsat skript pro vytvoření adaptivní navigace.

Poté je nutné provést navigaci, pokud již není. Zde vše funguje podle principu: "Všechno geniální je jednoduché." V dokumentu HTML musíte vytvořit značku s odrážkami nav. Můžete použít výše uvedený příklad nebo jeho zjednodušenou verzi, která vypadá jako níže.

V této fázi práce bude v prohlížeči zobrazeno pouze logo a samotná nabídka bude skrytá. Chcete-li to vypadat, musíte přidat funkci, která způsobí změnu pluginu - okayNav.

Nyní se můžete podívat na výsledky práce. Při normální šířce okna prohlížeče vypadá toto menu zcela normálně, ale pokud obrazovku zmenšíte, poslední položky zmizí. Namísto toho se objeví tři velké body umístěné ve svislé poloze. Když je stisknuto, zdá se, že se obracejí, mají horizontální polohu a skryté položky menu jsou odhaleny vertikálním seznamem v pravém horním rohu obrazovky.

Toto řešení vypadá velmi moderně a animovaný efekt vystaví návštěvníkům zdroje příznivě.

Joomla

Poslední možností je vytvoření adaptivního menu pomocí systému Jumla. Jedná se o bezplatnou službu pro vytváření webových stránek, což je systém správy obsahu pro systém CMS. A jak bylo již zmíněno na začátku, je-li web vytvořen pomocí CMS a potřebujete změnit stávající nabídku na adaptivní, pak je nejlepší začít fungovat od první značky. Stejně jako v předchozích příkladech je třeba vytvořit v seznamu HTML seznam s odrážkami. Pouze pro každou položku musíte napsat svou třídu. Obecně platí, že vše vypadá, jak je znázorněno níže.

Poté je třeba přidat styly. Nejlepší je umístit všechny odrážky na 0 px a použít rozměry v rámečku: ohraničovací rámeček. To umožní udržet stanovenou šířku prvků bez ohledu na to, kolik tuků je. Dále pro položku nadřazené nabídky (div) nastavte šířku na 90% a potom začněte stylovat každou položku zvlášť.

Můžete odstranit ohraničení, změnit barvu a vyplnit, vytvořit vzhled, který se zobrazí, když umístíte ukazatel myši nad kurzor. Jedním slovem udělejte vše, co odpovídá návrhu zdroje. Posledním krokem při vytváření adaptivního menu Joomla je převedení. Více často na Joomla vytváří takové menu, které při změně velikosti obrazovky je automaticky rekonstruováno a dělí se na některé řádky. To se děje také v CSS, jedinou funkcí, která by měla být spojena, je kompatibilita mezi prohlížeči. Umožňuje nabídce vypadat stejně v různých prohlížečích.

Vytvoření adaptivní nabídky je opravdu obtížné, což vyžaduje znalosti a zkušenosti. Všechny popsané příklady jsou jen malou částí možných variant, ale dokonce mohou být užitečné, pokud má osoba základní znalosti o HTML a CSS.