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.

Pokud jste tak ještě neučinili, 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 se učí kód než budete číst dál.

Začneme s HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

Přidat JavaScript:

Windows 10 odebrat aktivovat vodoznak Windows

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

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. Můžete to udělat přidáním následujícího bloku kódu do JavaScriptu:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.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í svých navigací nastavíte na žádný skrýt je při načítání stránky. Pak se 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.

Související: Neumorfní trendy designu v HTML, CSS a JavaScript

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í.

Podíl Podíl tweet E-mailem 15 Příkazy příkazového řádku systému Windows (CMD), které musíte znát

Příkazový řádek je stále výkonným nástrojem systému Windows. Zde jsou nejužitečnější příkazy CMD, které každý uživatel Windows potřebuje znát.

Číst dále Související témata

Programování
HTML
CSS
JavaScript
Tipy pro kódování

O autorovi Idisou Omisola(94 publikovaných článků)

Idowu je zapálený pro cokoli chytrého a produktivního. Ve svém volném čase si hraje s kódováním a když se nudí, přepne na šachovnici, ale také se rád jednou za čas odpoutá od rutiny. Jeho vášeň ukazovat lidem cestu kolem moderních technologií ho motivuje psát více.

Více od Idowu Omisola

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru

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

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

Přihlaste se k odběru našeho zpravodaje