Adaptívne menu pre moderné stránky - nielen luxus, ale aj nevyhnutnosť. Množstvo moderných zariadení vyžaduje, aby správcovia webu vytvorili také rozloženie, ktoré by sa logicky zobrazovali na obrazovkách s rôznymi povoleniami. A v niektorých prípadoch je vytvorenie prispôsobivej ponuky oveľa ťažšie ako samotný dizajn, a preto je potrebné tento problém zvážiť.

Veľkoplošné ponuky

Pre pochopenie všeobecnej schémy usporiadania adaptívneho menu musíte najprv vytvoriť štruktúru menu v HTML a štylizovať ju pomocou CSS. Potom na základe materiálu môžete zlepšiť adaptívnu šablónu. Štruktúra HTML tak bude vyzerať takto.




Menu pre dva body v HTML

Proces adaptácie

{top: 0 px}; To znamená, že zobrazenie obrazu zhora bude nula pixelov. Podobne je potrebné nastaviť hodnoty pre ostatné strany.


Teraz je adaptívne menu takmer pripravené. Stojí za pozornosť zobrazenie stavu: žiadny. Štandardne sa na stránke nezobrazí ikona ponuky, takže do dokumentu CSS sa musí pridať ďalšia trieda s nasledujúcou podmienkou: .menu__icon {display: inline-block;}. Toto umožní navigáciu vidieť.

Posledný zdvih

Bez zmeny štandardov

Bootstrap

Funkcie metódy

, drop-down menu

z predchádzajúceho príkladu nižšie uvedeným kódom.

Hĺbkové predmety

Toto je možné urobiť pre jednu položku aj pre niekoľko. V blízkosti polohy s klesajúcimi čiastkovými položkami sa zobrazí šípka smerujúca nadol. Po kliknutí sa zobrazí zoznam. Ak sa zobrazí navigácia na malej obrazovke a potom kliknite na rozbaľovacieho zoznamu budú tiež označená šípkou, ale smerom k pravej strane. Po stlačení bude ďalší vertikálny zoznam podpoložiek.

Viacúrovňová ponuka

Rozbaľovacie zoznamy však môžete vytvoriť nielen pomocou funkcie Bootstrap. Ak táto knižnica nie je pripojená, môžete vytvoriť prispôsobiteľné viacúrovňové menu pomocou kódu HTML a CSSďalej spája funkciu NRC. Najprv musíte vytvoriť zoznam neuvedených v súbore HTML, ktorý obsahuje ďalšie zoznamy. Použite štandardné značky a

. Taktiež nemusíte zabudnúť na formovanie tried, ktoré budú spracované v kaskádnom šablóne štýlov CSS. Aby sme boli jasnejší, stojí za to dať malý príklad písania zoznamov a vytvárania tried.

HTML zoznam navigačnej lišty

Animácia rozbaľovacej ponuky je nastavená pomocou kaskádového štýlu. Tu je potrebné zadať možnosti pre menu, keď znížite obrazovku o 5075 a 25%. Takýto prístup k vytvoreniu adaptivnej funkcionality poskytuje kompetentné usporiadanie, v ktorom ponuka nevytvára. A nakoniec je potrebné do dokumentu vložiť nižšie uvedenú funkciu.

Funkcia

Ak lokalita neberie do úvahy použitie iných funkcií, ako je tento, je stále potrebné vytvoriť samostatný dokument skriptu. Ak ho vložíte do bežného kódu HTML, jednoducho sa objaví v okne prehliadača ako súčasť textu a nebude fungovať.

JQuery

Je to tiež skvelé riešenie na vytvorenie navigačnej lišty v doplnku jQuery. Adaptívne menu v takejto službe trvá len niekoľko minút. Samotný plugin sa dá stiahnuť online, má jednoduché a intuitívne rozhranie, ktoré je jednoduché a jednoduché. Preto by nemali byť žiadne problémy s pripojením štýlu šablón. Po pripojení súboru štýlu musíte napísať skriptvytvoriť prispôsobivú navigáciu.

Potom potrebujete navigačný prístroj, ak ešte nie je. Tu je všetko založené na princípe: "Všetko je jednoducho brilantné." V dokumente HTML musíte vytvoriť označený zoznam v značke nee. Môžete použiť príklad uvedený vyššie alebo jeho zjednodušenú verziu, ktorá vyzerá ako nižšie.

Prvky menu HTML

V tomto okamihu sa v prehliadači zobrazí len logo a samotné menu bude skryté. Ak sa chcete zobraziť, musíte pridať funkciu, ktorá spôsobí zmenu doplnku - okayNav.
Funkcia



$ (funkcia () var navigácia = $ ('# nav-main');

Teraz sa môžete pozrieť na výsledky práce. Pri normálnej šírke okna prehliadača toto menu vyzerá úplne normálne, ale ak zmenšíte obrazovku, posledné položky zmiznú. Namiesto nich sú tri veľké body umiestnené vertikálne. Keď sú stlačené, otočia sa, zaujmú horizontálnu pozíciu a skryté položky menu sa zobrazia vertikálnym zoznamom v pravom hornom rohu obrazovky.

Takéto riešenie vyzerá veľmi moderne a animovaný efekt ho vystavuje návštevníkom priaznivým spôsobom.

Joomla

A posledná možnosť vytvorenia adaptívneho menu pomocou systému Jumla. Ide o bezplatnú službu tvorby webových stránok, ktorá je systémom správy obsahu CMS. A ako už bolo spomenuté na začiatku, ak bola stránka vytvorená pomocou CMS a potrebujete zmeniť existujúce menu na adaptive, potom je lepšiestačí začať robiť stránky funkčné od prvej značky. Rovnakým spôsobom ako v predchádzajúcich príkladoch je potrebné vytvoriť zoznam ponúk značiek v jazyku HTML. Len pre každú položku musíte napísať vlastnú triedu. Vo všeobecnosti všetko vyzerá ako ten, ktorý je uvedený nižšie.

Menu pre jooble

Ďalej musíte pridať štýly. Najlepšie je umiestniť všetky odrážky na 0 px a použiť rozmery v políčkoch: okrajové pole. To vám umožní uložiť danú šírku prvkov bez ohľadu na to, koľko vtlačenia bude trvať. Ďalej, pre nadradenú položku v ponuke (div) je vhodné nastaviť šírku 90% a po začatí štylizovať jednotlivé položky.

Môžete odstrániť okraje, zmeniť farbu a vyplniť, vytvoriť dizajn, ktorý sa zobrazí, keď umiestnite kurzor nad kurzorom. Jedným slovom urobte všetko, čo bude zodpovedať konštrukcii zdroja. Posledným krokom pri vytváraní adaptívneho Joomla menu je jeho transformácia. Joomla často vytvára menu, ktoré pri zmene veľkosti obrazovky automaticky obnoví, rozdelené na niekoľko riadkov. To všetko sa robí v CSS, jediným prvkom, ktorý by mal byť pripojený, je stav crossbrowser. Umožňuje zobraziť rovnaké menu v rôznych prehliadačoch.

Funkcia krížového prehliadača

Vytváranie adaptívneho menu je naozaj náročné, čo si vyžaduje vedomosti a skúsenosti. Všetky uvedené príklady sú len malou časťou možných variácií, ale dokonca môžu byť užitočné, ak má osoba základné znalosti HTML a CSS.