Jak vytvořit hamburger menu pomocí CSS a JavaScript

Vývoj webu je neomezený svět možností, kde se každý programátor snaží přinést něco nového a jedinečného. Jedním z oblíbených prvků webového designu je hamburger menu. Tento funkční a stylový prvek vám umožňuje vytvářet mobilní a přátelské stránky s minimálními náklady na místo.

Hamburger menu je ikona, která po kliknutí vysune seznam položek nabídky. Je to skvělý způsob, jak ušetřit místo na stránce a zvýšit uživatelskou přívětivost pro uživatele mobilních zařízení.

Vytvoření hamburger menu pomocí CSS a JavaScriptu se může zdát jako obtížný úkol, ale ve skutečnosti je to docela jednoduché. V tomto článku se podíváme na to, jak vytvořit stylové a funkční hamburgerové menu bez námahy.

Co je hamburger menu?

Taková nabídka se často používá pro mobilní verze webových stránek, když omezený prostor obrazovky neumožňuje zobrazit celou sadu navigačních položek přímo.

Nabídka hamburger umožňuje vytvářet kompaktnější a zkrácené verze nabídek, které lze na žádost uživatele snadno zobrazit nebo skrýt.

V posledních letech se hamburger menu stalo populárním webovým designovým trendem a našlo široké uplatnění na různých webových stránkách a aplikacích. Poskytuje použitelnost a umožňuje zachovat estetickou přitažlivost designu.

Základní principy tvorby hamburger menu

Hlavní myšlenkou hamburgerové nabídky je skrýt hlavní navigaci a zobrazit ji pouze po kliknutí na ikonu umístěnou v horním rohu stránky.

Vytvoření hamburger menu lze dosáhnout pomocí CSS a JavaScript. S CSS lze stylizovat ikonu hamburgeru a skrýt hlavní nabídku, zatímco JavaScript lze použít ke zpracování událostí a zobrazení nebo skrytí nabídky při kliknutí.

Principy tvorby hamburger menu:

• Vytvořte Burger ikonu pomocí CSS. Mohou to být tři vodorovné čáry nebo jiný symbol, který je spojen s hamburgerem.
• Skrýt hlavní nabídku pomocí CSS. K skrytí navigace použijte vlastnost display: none; nebo visibility: hidden;.
• Přidejte funkce pomocí JavaScriptu. Přiřaďte obslužnou rutinu události na ikonu hamburgeru, aby se při kliknutí na ni zobrazila nebo skrývala nabídka. K tomu lze použít metody .toggle () nebo .classList.toggle () pro přidání nebo odebrání třídy, která řídí viditelnost nabídky.
• Stylizujte hamburger menu pomocí CSS. Změňte vzhled ikony, když na ni přejedete nebo kliknete, a přidejte animace a přechody pro atraktivnější vizuální efekt.

Výběr vhodné ikony

Při vytváření hamburger menu je důležité vybrat vhodnou ikonu. Ikona by měla uživateli snadno a přehledně sdělovat informace o tlačítku nabídky.

Oblíbené ikony pro hamburger menu obsahují tři vodorovné čáry, které symbolizují skládání nabídky do jednoho tlačítka. Tato ikona je dobře rozpoznána a spojena s funkcí otevírání a zavírání nabídek.

Můžete použít různé ikony, v závislosti na stylu vašeho webu a preferencích designu. Mezi oblíbené ikony patří tři svislé čáry, šipky nebo symbol.

Je důležité vybrat ikonu, která jasně vyjadřuje svou funkci a je uživatelem snadno rozpoznatelná. Ikona by měla být jednoduchá a neměla by uživatelům způsobit zmatek.

Pamatujte, že účelem použití hamburger menu je učinit navigaci na webu nebo aplikaci pohodlnější a intuitivnější pro uživatele.

Předepisování stylů pro ikonu

Ikona hamburger menu jsou obvykle tři vodorovné proužky, které se stylizují pomocí CSS. Nejprve musíte vytvořit kontejner pro ikonu a předepsat styly pro ni:

• Nastavte šířku a výšku kontejneru, abyste určili velikost ikony. Například pomocí vlastností width a height.
• Nainstalujte display: flex pro zajištění flexibility ikony a jejích prvků.
• Nainstalujte justify-content: center a align-items: center pro umístění prvků do středu kontejneru.
• Nainstalujte cursor:pointer, abyste naznačili, že ikona je klikací.

Pak musíte předepsat styly pro ikony proužků:

• Nastavte šířku a výšku proužků, abyste určili jejich velikost. Například pomocí vlastností width a height.
• Nainstalujte background-color a nastavte barvu proužků.
• Nastavte margin nebo padding pro nastavení odsazení mezi pruhy.

Můžete také přidat animace klepnutím na ikonu, například použitím pseudoklasu: active nebo pomocí JavaScriptu.

Vytvoření animace pro otevření a zavření nabídky

K vytvoření animace otevírání a zavírání menu ve stylu hamburger, můžeme použít CSS a JavaScript. Pomocí CSS animací vytvoříme plynulé a efektní přechody.

Nejprve musíme vytvořit animaci pro otevření nabídky. K tomu přidáme třídu "open" do kontejneru menu, když uživatel klikne na ikonu hamburgeru. Níže je uveden příklad kódu, který ukazuje vytvoření animace otevření nabídky:

V tomto příkladu vytváříme animaci nazvanou "slide-in", která se vztahuje na třídu"open". Animace začíná polohou posunutou o 100% doleva a poté plynule přechází do původní polohy bez posunu.

Nyní, když jsme vytvořili animaci pro otevření nabídky, musíme přidat animaci pro zavření. Za tímto účelem odstraníme třídu "open" z kontejneru menu kliknutím na ikonu hamburgeru. Níže je uveden příklad kódu, který ukazuje vytvoření animace uzavření nabídky:

V tomto příkladu vytváříme animaci nazvanou "slide-out", která se vztahuje na třídu"close". Animace začíná původní polohou bez posunu a poté plynule přechází do polohy posunuté o 100% doleva.

Nyní máme animace pro otevírání a zavírání nabídek pomocí CSS. Můžeme použít JavaScript k přidání a odebrání tříd k aplikaci animací při kliknutí na ikonu hamburgeru.

Zde je příklad JavaScript kódu:

V tomto příkladu používáme metody classList.contains() , classList.a také klasik.add () pro přidání nebo odebrání tříd "open" a "close" v závislosti na aktuálním stavu nabídky.

Nyní, když klikneme na ikonu hamburgeru, animace pro otevření nebo zavření nabídky bude platit hladce díky CSS a JavaScriptu.

Pomocí CSS vytvořit hamburger menu

Chcete-li vytvořit hamburger menu pomocí CSS, měli byste použít selektory k definování stylů různých položek. K vytvoření ikony hamburgeru lze například použít pseudoelement:: before nebo:: after a určit jeho vlastnosti, jako je barva, velikost a umístění.

Animaci pak můžete použít k vytvoření animovaného efektu otevírání a zavírání nabídek. Můžete například použít transformaci k animaci změny velikosti a polohy položek nabídky.

Kromě toho lze pseudoelementy a třídy CSS použít k vytvoření různých stavů nabídky, jako je otevřený a uzavřený stav. Třídy toggled a untoggled lze například použít k definování stylů a animací v závislosti na stavu nabídky.

Použití CSS k vytvoření hamburger menu vám umožní snadno přizpůsobit vzhled a chování nabídky a zároveň je univerzálnější a flexibilnější, protože k jejímu fungování není potřeba používat JavaScript.

Použití vlastností CSS k vytvoření ikony nabídky

1. Vytvořte HTML strukturu pro ikonu nabídky:

2. Aplikujte styly na ikonu nabídky:

.menu-icon .bar

3. Přidejte JavaScript kód pro funkčnost ikony nabídky:

var menuIcon = document.querySelector('.menu-icon');var menu = document.querySelector('.menu');menuIcon.addEventListener('click', function() );

Nyní máte připravenou ikonu nabídky, kterou můžete použít na svém webu. Vypadá jako tři paralelní proužky a po kliknutí na něj se zobrazí rozbalovací nabídka.

Při vytváření ikony nabídky je důležité vzít v úvahu styly a požadavky vašeho návrhu, aby se dobře spojila se zbytkem prvků webového rozhraní. Pomocí vlastností CSS, jako je šířka, výška, barva pozadí a odsazení, upravte ikonu nabídky tak, aby vyhovovala vašim potřebám.

Vytváření stylů pro animace otevírání a zavírání nabídek

Abychom vytvořili animaci otevírání a zavírání nabídky hamburger, musíme použít vlastnosti CSS, jako je transformm a transition . Podívejme se na příklad stylů, které lze pro tuto animaci použít:

• Prvním krokem je vytvoření třídy .menu-wrapper, který bude obsahovat všechny položky nabídky.
• Dále použijeme vlastnosti transform: translateX (-100%); a transition: transform 0.3 s ease-in-out; k .menu-wrapper pro posunutí nabídky doleva a nastavení plynulého přechodu při otevírání a zavírání nabídky.
• K zobrazení ikon X a hamburgeru používáme pseudoelementy:: before a:: after class .menu-icon. Zde aplikujeme vlastnosti content:";, position: absolute; a další pro stylizaci ikon.
• Aby se ikony při otevírání a zavírání nabídek animovaly, použijeme vlastnost transition: transform 0.3 s ease-in-out; na .menu-icon.
• Nakonec, aby při otevření nabídky zadní pozadí zastínilo veškerý obsah stránky, přidáme třídu .menu-open k prvku . S touto třídou aplikujeme vlastnosti position: fixed; , top: 0; , left: 0; , width: 100%; a height: 100%; na prvek .

S těmito styly a třídami budete moci vytvořit animaci otevírání a zavírání nabídky hamburger, která dodá vašim webům krásné a plynulé přechody.

Příklad kódu hamburger menu na CSS

Níže je uveden příklad kódu hamburger menu na CSS:

Výše jsou uvedeny hlavní součásti hamburgerové nabídky, která se skládá z ikony a navigační nabídky. HTML kód vytvoří div prvek pro ikonu nabídky a nav prvek pro samotnou nabídku. Každá položka nabídky je prezentována jako li položka s odkazem. CSS kód nastavuje styly pro každou součást nabídky, její animace a vzhled v různých stavech.