Adaptivní menu pro moderní místo - nejen luxus, ale i nutnost. Množství moderních zařízení vyžaduje, aby webmasteři vytvořili takové rozvržení, které by se logicky zobrazovaly na obrazovkách s různými oprávněními. A v některých případech je vytvoření adaptivního menu mnohem těžší než samotný design, a proto je třeba tento problém zvážit.
Velké obrazovky
Chcete-li porozumět obecné schéma rozvržení adaptivního menu, musíte nejprve vytvořit HTML strukturu nabídky a její stylizovat pomocí CSS. Pak na základě materiálu můžete zlepšit adaptivní šablonu. Takže struktura HTML bude vypadat takto.
Menu pro dva odstavce v HTML
Do výsledného menu budete muset přidat CSS. Měly by specifikovat velikost a barvu písma, pozadí, polohování bloků.
Proces adaptace
Vytváření jednoduché funkce pro běžnou obrazovku počítače je snadné a to lze vidět na příkladu. Adaptivní nabídka pro web je vytvořena pouze tehdy, když má být něco pracovat, to znamená, když již byly přidány navigační body. Nejlepší volbou pro nabídku pro mobilní zařízení a tablety bude hamburgerový odznak - čtvercová krabička se třemi vertikálními liniemi. Po stisknutí se otevře všechny položky nabídky. Pro vytvoření takové navigace musí být k dokumentu HTML přidány značky.
HTML tagy - dokument
Poté je třeba přidat tyto štítky tak, aby se ukázaloVizuálně atraktivní a čitelné menu. Vedle vizuální navigace a ikon menu je třeba upravit polohu snímku odpovídajícím způsobem. Ano, zadáte stav menu_icon span: nth-child
{top: 0 px}; To znamená, že obrazové zobrazení zhora bude nula pixelů. Podobně je nutné nastavit hodnoty pro ostatní strany.
Nyní je adaptivní nabídka téměř hotová. Stojí za pozornost zobrazení stavu: žádné. Ve výchozím nastavení nebude na stránce zobrazena ikona nabídky, takže do 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 je nutné přidat úkol do kaskádového stylu, který bude podle potřeby skrýt odstavce a pododstavce. Chcete-li to provést, musíte v CSS zadat pevnou pozici nabídky, nakreslit zobrazení a zarovnat. Položky jsou skryté při přetečení podmínek: auto; opacita: 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 na žádost vývojáře.
Poslední zdvih
Proto je adaptivní nabídka CSS téměř kompletní. Chcete-li fungovat po kliknutí na ikonu, musíte přidat funkce. Je lepší použít jQuery pro jednoduchost, ale pokud chcete, můžete vytvořit čistý javascript. A tam, a tam budou použity stejné podmínky:
(function ($) {$ (function () $ (‘Menu__icon. ') On ('cvaknutí', function () $ (this) .closest ('.. menu ') toggleClass (.' menu_state_open ‚);});});}) (jQuery).V tomto případě končí adaptivní navigační rozložení. Ale toto je jen jedna z několika možností pro vytvoření tohoto druhu funkčnosti, takže stojí za to zvažovat druhou. Přinejmenším několik z nich.
Bez změny standardů
Většina uživatelů internetu očekává, že v horní části stránky budou zobrazeny navigační panely. Toto se již stalo zvláštním standardem, takže adaptivní horizontální menu by mělo mít slušný vzhled. To lze provést pomocí CSS, jak je uvedeno výše, a připojením skriptu psovoda. Obecně platí, že vytvoření adaptivního menu se skládá ze 3 kroků:
Psaní HTML tagů Stylování je pomocí kaskádového stylu (CSS). Přizpůsobení již existující nabídky.Samozřejmě, že všechny stránky mají vlastní menu, ale pokud je zdroj vytvořen v CMS, bude mnohem jednodušší vytvořit nové adaptivní menu.
Bootstrap
Vytváření adaptivní funkce není tak závažným problémem, pokud používáte nástroje Bootstrap. K vytvoření horizontálního menu již existují předem nainstalované šablony. Stačí se připojit ke zdroji bootstrap.js. S tímto rámcem získává webmaster možnost vytvářet navigaci libovolné složitosti. Adaptivní nabídka z Bootstrap je vytvořena pomocí určitého kódu.
Příklad horizontální adaptivní nabídky pro 3 položky
Vlastnosti metody
Nechť tento kód je těžkopádný, ale pochopitelný. Je třeba poznamenat, že hlavní roli zde je značka nav, která je zodpovědná za vytvoření navigace a jejího vzhledu. Také zde jsou specifikovány kontejnery a kontejnery, které specifikují šířku položek. S jejich pomocí můžete vynutit nabídku rozšiřovat obrazovky různých rozlišení nebonechte to fixní.
Důležitou roli při vytváření adaptivní funkce hrají kolaps a navbar-collapse třídy, které jsou zodpovědné za styl. Menu je vytvořeno záznamem označeného seznamu položek umístěných horizontálně. Pokud použijete tento rámcový kód pro vytvoření navigace, pak na širokoúhlém displeji bude vypadat jako vodorovný banner. Na začátku bude název zdroje a pak položky v přísně zadaném pořadí. Na úzkých obrazovkách se zobrazí pouze název webu a ikona hamburgeru, když kliknete na položky, které se zobrazují jako svislý seznam.
Rozbalovací nabídka
Prostředek vytvoří Bootstrap skvělý pomocník pro vytváření adaptivní rozbalovací nabídky. Chcete-li to provést, jednoduše nahradit řádek značky
z předchozího příkladu níže uvedeným kódem.
Hloubkové položky
To lze provést jak pro jednu položku, tak pro několik. V blízkosti polohy s klesajícími položkami se objeví šipka směřující dolů. Po kliknutí se zobrazí seznam. Pokud je navigace zvýrazněna na malé obrazovce, bude položka s rozevíracím seznamem označena také šipkou, ale směrem doprava. Po stisknutí se objeví další vertikální seznam dílčích položek. Víceúrovňová nabídka
Rozbalovací seznamy však můžete vytvářet nejen s Bootstrap. Pokud tato knihovna není připojena, můžete vytvořit adaptivní víceúrovňovou nabídku pomocí HTML a CSS withdále spojovat funkci NRC. Nejprve je třeba vytvořit soubor v souboru HTML, který obsahuje další seznamy. Chcete-li to provést, použijte standardní značky a
. Také nemusíte zapomínat na formování tříd, které budou zpracovány v kaskádním stylu CSS. Aby bylo jasnější, stojí za to dát malý příklad psaní seznamů a vytváření tříd.
Seznam HTML navigačního panelu
Animace adaptivní rozbalovací nabídky se nastavuje pomocí kaskádového stylu. Zde je třeba specifikovat možnosti nabídky při zmenšení obrazovky o 5075 a 25%. Takový přístup k vytváření adaptivní funkce poskytuje kompetentní uspořádání, v němž menu není "vytáhnout". A nakonec je nutné do dokumentu vložit níže uvedenou funkci.
Funkce
Pokud web nepovažuje použití jiných funkcí než toto, je stále nutné vytvořit samostatný dokument skriptu. Pokud jej vložíte do běžného kódu HTML, objeví se jednoduše v okně prohlížeče jako součást textu a nebude fungovat. JQuery
Je také skvělým řešením vytvoření navigačního panelu v pluginu jQuery. Adaptivní nabídka na takové službě trvá jen několik minut. Samotný plugin lze stáhnout online, má jednoduché a intuitivní rozhraní, které je snadné a jednoduché. Takže by se neměly vyskytovat žádné problémy s připojením stylu. Po připojení souboru stylů musíte napsat skriptvytvořit adaptivní navigaci. Poté potřebujete navigační přístroj, pokud ještě není. Zde je vše založeno na principu: "Vše je prostě brilantní." V dokumentu HTML musíte vytvořit značku v tagu nee. Můžete použít výše uvedený příklad nebo jeho zjednodušenou verzi, která vypadá jako níže.
Prvky menu HTML
V tomto okamžiku se v prohlížeči objeví pouze logo a samotné menu bude skryté. Chcete-li to vypadat, musíte přidat funkci, která způsobí změnu pluginu - okayNav.
Funkce
$ (function () var var = $ ('# nav-main');
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 snížíte obrazovku, poslední položky zmizí. Namísto nich jsou tři velké body umístěné vertikálně. Když jsou stisknuty, jsou otočeny, ve vodorovné poloze a skryté položky menu jsou odhaleny vertikálním seznamem v pravém horním rohu obrazovky. Takové řešení vypadá velmi moderně a animovaný efekt je zdrojem příznivého světla pro návštěvníky.Joomla
A poslední možnost pro vytvoření adaptivního menu pomocí systému Jumla. Jedná se o bezplatnou službu tvorby webových stránek, která je systémem správy obsahu CMS. A jak již bylo uvedeno na začátku, pokud byl web vytvořen pomocí CMS, a potřebujete změnit existující menu na adaptéru, je lepšístačí začít fungovat od první značky. Stejně jako v předchozích příkladech je potřeba vytvořit seznam značek v HTML. Pouze pro každou položku musíte napsat svou vlastní třídu. Obecně platí, že vše vypadá jako níže.
Menu pro jooble
Dále 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 vám umožní uložit danou šířku prvků bez ohledu na to, kolik to bude mít. Dále, pro nadřazenou položku v nabídce (div) je vhodné nastavit šířku 90% a po začátku stylizovat jednotlivé položky zvlášť. Můžete odstranit okraje, změnit barvu a vyplnit, vytvořit návrh, který se objeví, když umístíte kurzor nad kurzor. Jedním slovem udělejte vše, co bude vyhovovat návrhu zdroje. Posledním krokem vytvoření adaptivního Joomla menu je jeho transformace. Joomla často vytváří menu, které při změně velikosti obrazovky automaticky obnoví, rozdělené do několika řádků. To vše se provádí v CSS, jedinou funkcí, která by měla být připojena, je podmínka crossbrowser. Umožňuje nabídce vypadat stejně v různých prohlížečích.
Funkce cross-browseru
Vytvoření adaptivního menu je opravdu obtížné a vyžaduje znalosti a zkušenosti. Všechny uvedené příklady jsou jen malou částí možných variant, ale dokonce mohou být užitečné, pokud má osoba základní znalosti HTML a CSS.
