Ako vytvoriť panel s ponukou pre mobilné zariadenia pomocou HTML, CSS a JavaScript

Nepochybne môžete prepínateľnú mobilnú ponuku vytvoriť pomocou rámcov CSS, ako sú TailWind alebo BootStrap.

Aký je však koncept za tým? A ako ich môžete vytvoriť od začiatku bez toho, aby ste boli závislí od týchto rámcov CSS?

Vykonaním vyššie uvedených činností získate úplnú kontrolu nad prispôsobením. Bez ďalších okolkov teda uvádzame postup, ako vytvoriť prepínateľnú mobilnú ponuku pomocou preferovaného programovacieho jazyka.

Ak ste to ešte neurobili, otvorte priečinok projektu a vytvorte súbory projektu (HTML, CSS a JavaScript).

Nasledujú príklady kódu, ktorý potrebujete pre všetky tri typy. A ak ste to ešte neurobili, zvážte stiahnutie tieto aplikácie na naučenie kódu pred čítaním.

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;  
 }

Pridať JavaScript:

ako zmeniť svoje meno na ubisoft

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 vyzerá pracovný výstup po kliknutí na panel s ponukami:

Ponuku je možné prepnúť, takže opätovným kliknutím na panel - alebo kdekoľvek na stránke - sa navigácie skryjú.

Súvisiace: Štýl prvkov webových stránok s prechodom na pozadí CSS

Váš prehliadač nemusí podporovať skrývanie obsahu, keď kliknete kdekoľvek na svojej webovej stránke. Môžete to skúsiť vynútiť pomocou cieľa udalosti a slučky JavaScript. Môžete to urobiť pridaním nasledujúceho bloku kódu do svojho 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');  
 }  
 }  
 }  
}

Tu je teda súhrn toho, čo ste práve urobili: Vytvorili ste tri riadky pomocou súboru div značka HTML. Upravili ste ich výšku a šírku a umiestnili ich vo svojom DOMe. Potom ste im dali kliknutie pomocou JavaScriptu.

Súvisiace: Ako vytvoriť webovú stránku: pre začiatočníkov

Počiatočné zobrazenie svojich navigácií nastavíte na žiadny skryť ich pri načítaní stránky. Potom kliknite udalosť na troch riadkoch prepína tieto navigácie na základe inštancovanej triedy JavaScript ( zobrazené ). Nakoniec ste túto novú triedu použili na zobrazenie navigácií pomocou CSS a JavaScript toggleObsah metóda.

Súvisiace články: Neumorfné trendy dizajnu v HTML, CSS a JavaScript

Ostatné CSS však závisia od vašich preferencií. Ale ten, ktorý je tu v ukážke úryvku CSS, by vám mal poskytnúť predstavu o tom, ako si ten svoj upraviť.

Buďte kreatívnejší pri vytváraní svojich webových stránok

Vytvorenie vizuálne príťažlivej webovej stránky vyžaduje určitú kreativitu. A na užívateľsky prívetivej webovej stránke je väčšia pravdepodobnosť, že premení vaše publikum než na nevýrazné.

Napriek tomu, že sme vám tu ukázali, ako vytvoriť vlastnú navigačnú ponuku, stále môžete ísť ďalej a urobiť to pútavejším. Môžete napríklad animovať zobrazenie navigácií, dať im farbu pozadia a podobne. Bez ohľadu na to, čo robíte, zaistite, aby váš web používal najlepšie postupy navrhovania a rozloženia, ktoré môžu používatelia ľahko používať.

zdieľam zdieľam Tweet E -mail 15 Príkazy príkazového riadka systému Windows (CMD), ktoré musíte vedieť

Príkazový riadok je stále výkonným nástrojom systému Windows. Tu sú najužitočnejšie príkazy CMD, ktoré potrebuje vedieť každý používateľ systému Windows.

Čítajte ďalej Súvisiace témy

Programovanie
HTML
CSS
JavaScript
Tipy na kódovanie

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

Idowu je zanietený pre čokoľvek, čo sa týka inteligentných technológií a produktivity. Vo svojom voľnom čase sa hrá s kódovaním a keď sa nudí, prejde na šachovnicu, ale tiež sa rád z času na čas odtrhne od rutiny. Jeho vášeň ukazovať ľuďom cestu okolo moderných technológií ho motivuje písať viac.

Viac od Idowu Omisola

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber

Ako vytvoriť prepínateľnú mobilnú ponuku

Buďte kreatívnejší pri vytváraní svojich webových stránok

prihlásiť sa ku odberu noviniek