Hamburger menu je oblíbený způsob, jak zobrazit navigační nabídku na webových stránkách. Jedná se o tři vodorovné proužky, které fungují jako tlačítko pro otevření a zavření nabídky. Vytvoření hamburger menu pomocí CSS a React se může na první pohled zdát složité, ale ve skutečnosti je to docela jednoduché.
V této příručce se podíváme na postup při vytváření hamburger menu Krok za krokem. Začneme vytvořením struktury nabídky pomocí HTML a CSS a poté zahájíme její animaci a implementaci v React.
K vytvoření hamburger menu budeme potřebovat určité množství CSS pro vytvoření a animace ikony, stejně jako JavaScript nebo React pro přidání funkčnosti otevírání a zavírání nabídky při kliknutí na ikonu. Přístup pomocí React usnadňuje zpracování událostí a aktualizaci stavu aplikace, aniž byste museli ručně upravovat DOM.
Pokud se chcete naučit vytvářet hamburger menu od začátku, tento podrobný Hyde vám pomůže pochopit základy CSS a React a poskytne vám úplný přehled o tom, jak vytvořit funkční hamburger menu, které lze použít ve vašich projektech.
Co je hamburger menu a proč je potřeba
Koncept hamburger menu se stal rozšířeným s vývojem mobilních zařízení a potřebou vytvořit kompaktní a snadno použitelné menu. Nabídka umožňuje zachovat prostor na obrazovce zařízení, zejména na malých obrazovkách chytrých telefonů a tabletů.
Nabídka hamburgerů často skrývá navigační prvky, jako jsou odkazy na části webu nebo různé stránky webové aplikace. Když uživatel klikne na ikonu hamburgeru, nabídka se rozbalí a zobrazí navigační položky. To umožňuje uživateli rychle a pohodlně přistupovat k různým částem webu nebo aplikace.
Hamburger menu má také své nevýhody. Kritici tvrdí, že tento způsob prezentace menu komplikuje navigaci a ztěžuje uživateli okamžitě pochopit, jaké funkce jsou k dispozici. Nicméně, kompetentní návrh a jasná ikona hamburgeru mohou způsobit, že tento problém bude méně viditelný.
Hamburger menu mnoho webových vývojářů si vybírá pro svou estetickou přitažlivost a použitelnost na mobilních zařízeních. Pomocí CSS a JavaScriptu lze hamburger menu přizpůsobit téměř jakémukoli designu a funkčním požadavkům.
Krok 1: Vytvoření hamburger ikony
| Krok 1: | Vytvořte nádobu na hamburger ikony pomocí položky div s třídou hamburger-icon . |
| Krok 2: | Vytvořte tři vodorovné čáry pomocí prvků span nastavením tříd line-top , line-middle a line-bottom . |
| Krok 3: | Přidejte styly pro hamburger ikony. Nastavte velikost a barvu čar a odsazení mezi nimi pomocí CSS. |
Nakonec by vaše hamburger ikona měla vypadat následovně:
Když je vše připraveno, přejděte k druhému kroku - přidání interaktivity hamburger menu.
Krok 2: Označení HTML pro hamburger menu
K vytvoření hamburgerové nabídky budete potřebovat označení HTML. K tomu lze použít tabulky, které vám umožní snadněji spravovat umístění položek nabídky.
Začneme vytvořením hlavního kontejneru pro naši nabídku. Vytvořte tabulku se třídou "hamburger-menu".
Uvnitř této tabulky vytvořte dva řádky. První řádek bude obsahovat název nabídky a druhý bude obsahovat položky samotné nabídky.
V prvním řádku vytvořte buňku s třídou "menu-heading". Tato buňka bude obsahovat textový název vaší nabídky.
Ve druhém řádku vytvořte buňku s třídou "menu-items". Uvnitř této buňky vytvořte seznam s položkami nabídky. Každá položka nabídky bude buňka tabulky s třídou "menu-item".
Interní obsah těchto buněk je textový popis každé položky nabídky.
Příklad značení HTML pro hamburger menu:
Меню Главная О нас Услуги Контакты
Nyní, když máte základ pro hamburger menu, můžete přejít k dalšímu kroku-návrhu nabídky pomocí CSS.
Krok 3: CSS stylizace hamburgeru
Nyní, když je hamburger menu nakonfigurováno a přidáno do součásti React, můžete začít s jeho stylizací pomocí CSS.
Prvním krokem bude vytvoření stylů pro zobrazení hamburgeru v původním, uzavřeném stavu. Chcete-li to provést, můžete nastavit určité rozměry a odsazení pro každou linii, aby byly vodorovně uspořádány a působily dojmem uzavřené ikony hamburgeru.
Dále můžete přidat animaci pro otevření a zavření hamburgeru. Můžete například použít přechody CSS k plynulé změně stavu každé čáry, když kliknete na ikonu. Při otevření hamburgeru každá linka zmizí a při zavření se objeví.
Můžete také přidat styly, takže když umístíte kurzor na hamburger menu, změní svůj vzhled, aby uživatel viděl, že na něj můžete kliknout. Můžete například změnit barvu čar nebo přidat animaci pro podtržení.
A posledním krokem je stylizace rozbalovací nabídky, která se zobrazí při otevření hamburgeru. Zde můžete použít standardní vlastnosti CSS pro přizpůsobení pozadí, barvy textu, zarovnání a velikostí pro vytvoření požadovaného vzhledu a pocitu.
Stylizace hamburger menu může být velmi flexibilní a závisí na vašich preferencích a designu aplikace. Je důležité otestovat iterace stylů, abyste se ujistili, že hamburger menu vypadá a chová se tak, jak byste očekávali.
Krok 4: animační efekty pro hamburger
V tomto kroku přidáme animační efekty pro náš hamburger menu. Díky těmto efektům bude naše nabídka interaktivnější a atraktivnější.
Nejprve vytvoříme třídu .open v CSS souboru, který se bude vztahovat na náš hamburger, když je menu otevřené. V této třídě nastavíme styly pro rozbalený stav menu, jako je otočení hamburgeru o 90 stupňů a skrytí středového proužku.
Poté přidáme animaci pomocí vlastnosti CSS transition. Tato animace bude při aktivaci plynule měnit styly našeho hamburgeru. Přidáme také animaci pro podnabídku, aby se při otevírání a zavírání menu hladce objevily a zmizely.
V react komponentách použijeme stav isOpen Chcete-li zjistit, zda je nabídka otevřená nebo uzavřená. Při kliknutí na hamburger tento stav změníme a použijeme třídu .open k našemu hamburgeru.
Úplný kód pro tyto kroky najdete v aplikaci Codelab.
Gratuluji! Nyní máte Burger menu s animačními efekty. Můžete jej dále vylepšovat, přidávat různé styly a animace, aby byl jedinečný pro váš projekt.
Krok 5: Přidání funkce React
Nyní, když jsme vytvořili hlavní rozvržení a přidali styly pro naše hamburger menu, je čas přidat funkce React.
Pro začátek můžeme vytvořit komponentu BurgerMenu, která zachová stav otevírání a zavírání nabídek. K tomu použijeme hák useState z React.
Uvnitř součásti BurgerMenu můžeme vytvořit funkci toggleMenu, která přepne hodnotu stavu otevření nabídky. Tento stav pak můžeme použít v našich stylech CSS k zobrazení a skrytí nabídek v případě potřeby.
Kromě toho můžeme použít komponenty map a filter z JavaScriptu k vytvoření dynamického seznamu položek nabídky. Můžeme přenést pole dat do naší součásti BurgerMenu a zobrazit každou položku seznamu v závislosti na stavu nabídky.
Nakonec můžeme na každou položku seznamu přidat obslužné rutiny událostí kliknutí, abychom provedli určité kroky při výběru položky nabídky. Můžeme například přepnout stav aktivity položky nebo přesměrovat uživatele na jinou stránku.
To je všechno! Nyní máme plně funkční hamburger menu vytvořené pomocí CSS a React. Jeho vzhled můžeme snadno upravit a přidat další funkce, aby byl pro uživatele adaptivní a intuitivní.