Jak vytvořit panel nabídek pro mobilní zařízení pomocí HTML, CSS a JavaScript

Nepochybně můžete vytvořit přepínatelnou mobilní nabídku pomocí rámců CSS, jako je TailWind nebo BootStrap.

Ale jaký je za tím koncept? A jak jej můžete vytvořit od nuly, aniž byste museli záviset na těchto rámcích CSS?

Provedení výše uvedeného vám poskytne plnou kontrolu nad přizpůsobením. Takže bez dalších okolků, zde je návod, jak vytvořit přepínatelné mobilní menu pomocí preferovaného programovacího jazyka.

Jak vytvořit přepínatelné mobilní menu

Pokud jste to ještě neudělali, otevřete složku projektu a vytvořte soubory projektu (HTML, CSS a JavaScript).

Níže uvidíte příklady kódu, který potřebujete pro všechny tři typy. A pokud jste tak ještě neučinili, zvažte stažení tyto aplikace naučit kód než budete číst dál.

Začneme tím HTML:

 Vytvořte tři divy, které budou reprezentovat třířádkový rozevírací panel nabídek 








 Sem přidejte své navigace 


Domov
O
Kontakt

CSS:

/*Vymezení této sekce je pouze pro účely tutoriálu*/
sekce{ 
šířka: 800px;
výška: 600px;
margin-top: 50px;





instagram viewer


okraj vlevo: 250 pixelů;
ohraničení: plná černá 1px;
pozadí: #e6e3dc;
}
/*umístěte kontejner divs do svého DOMu*/
#toggle-container {
zobrazení: mřížka;
width: fit-content;
okraj vlevo: 720px;
margin-top: 10px;
}
/*Skládej tři divy nad sebe. Pak jim nastavte výšku a šířku.*/
#jedna dvě tři{
pozadí: černé;
šířka: 30px;
výška: 3px;
margin-top: 5px;
} 
.toggle-content {
displej: žádný;
okraj vlevo: 700 pixelů;
margin-top: 20px;
}
.toggle-content a {
zobrazení: blok;
textová dekorace: žádná;
Černá barva;
velikost písma: 30px;
}
.toggle-content a: hover {
barva: modrá;
}
/*Zobrazte instanci třídy vytvořenou JavaScriptem v bloku*/
.zobrazeno {
zobrazení: blok;
}

Přidat JavaScript:

var toggler = document.getElementById ("přepínací kontejner");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener („kliknutí“, funkce () {
// Na každou navigaci použijte třídu a nastavte přepínání zobrazení:
toggleContents.classList.toggle ("zobrazeno");
});

Takto vypadá pracovní výstup po kliknutí na panel nabídek:

Nabídku lze přepínat, takže opětovným kliknutím na lištu - nebo kdekoli na stránce - se navigace skryjí.

Příbuzný: Stylové prvky webových stránek s přechodem na pozadí CSS

Váš prohlížeč nemusí podporovat skrývání obsahu, když kliknete kamkoli na svou webovou stránku. Můžete to zkusit vynutit pomocí cíle události a smyčky JavaScript. To lze provést přidáním následujícího bloku kódu do JavaScriptu:

// Přidejte událost kliknutí na svou webovou stránku:
window.onclick = funkce (událost) {
// Zaměřte událost kliknutí na panel nabídek, aby ji tělo webové stránky mohlo sledovat:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Skrýt navigaci procházením každou z nich:
pro (var i = 0; i var klesl = rozevírací seznamy [i];
if (Droped.classList.contains ('display')) {
Droped.classList.remove ('display');
}
}
}
}

Zde je tedy shrnutí toho, co jste právě provedli: Vytvořili jste tři řádky pomocí div tag HTML. Upravili jste jejich výšku a šířku a umístili je do svého DOM. Pak jste jim udělili událost kliknutí pomocí JavaScriptu.

Příbuzný: Jak vytvořit web: pro začátečníky

Počáteční zobrazení navigací nastavíte na žádný skrýt je při načítání stránky. Potom klikněte událost na třech řádcích přepíná tyto navigace na základě instance třídy JavaScript (zobrazí se). Nakonec jste tuto novou třídu použili k zobrazení navigací pomocí CSS a JavaScriptu toggleContents metoda.

Příbuzný: Neumorfní trendy designu v HTML, CSS a JavaScriptu

Zbytek CSS však závisí na vašich preferencích. Ale ten v příkladu CSS úryvku zde by vám měl poskytnout představu o tom, jak upravit ten svůj.

Buďte kreativnější při stavbě svých webových stránek

Vytvoření vizuálně atraktivní webové stránky vyžaduje určitou kreativitu. A uživatelsky přívětivý web s větší pravděpodobností převede vaše publikum než nevýrazné.

Přestože jsme vám ukázali, jak zde vytvořit vlastní navigační nabídku, stále můžete jít nad rámec tohoto a učinit ho poutavějším. Můžete například animovat zobrazení navigací, dát jim barvu pozadí a další. A ať děláte cokoli, zajistěte, aby vaše webové stránky používaly nejlepší designové postupy a rozvržení, které uživatelé snadno použijí.

Jak znovu použít starý hardware jako profesionál

Máte doma spoustu starých technologií? Zjistěte přesně, co s tím dělat, v této technické recyklační příručce!

Číst dále

O autorovi