Kako narediti mobilno menijsko vrstico s HTML, CSS in JavaScript

Nedvomno lahko ustvarite preklopni meni za mobilne naprave z ogrodji CSS, kot sta TailWind ali BootStrap.

Kakšen pa je koncept za tem? In kako ga lahko naredite iz nič, ne da bi bili odvisni od teh okvirov CSS?

Če to storite sami, imate popoln nadzor nad prilagajanjem. Torej, brez dodatnega odlašanja, tukaj je, kako ustvariti preklopni meni za mobilne naprave s svojim želenim programskim jezikom.

Če tega še niste storili, odprite mapo projekta in ustvarite projektne datoteke (HTML, CSS in JavaScript).

Spodaj boste videli primere kode, ki jo potrebujete za vse tri vrste. Če še niste, razmislite o prenosu te aplikacije za učenje kode pred branjem naprej.

Začeli bomo 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;  
 }

Dodaj JavaScript:

ali lahko vrnem parno igro

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

Če kliknete menijsko vrstico, izgleda delovni izhod:

Meni je mogoče preklopiti, zato ponovni klik na vrstico - ali kjer koli na strani - skrije krmarjenje.

Povezano: Slog elementov spletnega mesta z gradientom ozadja CSS

Vaš brskalnik morda ne podpira skrivanja vsebine, ko kliknete kjer koli na svoji spletni strani. To lahko poskusite vsiliti z uporabo cilja dogodka in zanke JavaScript. To lahko storite tako, da v svoj JavaScript dodate naslednji blok kode:

  //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');  
 }  
 }  
 }  
}

Torej, povzetek tega, kar ste pravkar naredili: ustvarili ste tri vrstice z uporabo div oznako HTML. Prilagodili ste njihovo višino in širino ter jih postavili v DOM. Nato ste tem dogodkom kliknili z uporabo JavaScripta.

Povezano: Kako narediti spletno mesto: Za začetnike

Začetni prikaz navigacije nastavite na nobena da jih skrijete, ko se stran naloži. Potem pa kliknite dogodek v treh vrsticah preklopi to navigacijo na podlagi razreda, ki ga je ustvaril JavaScript ( prikazano ). Nazadnje ste ta novi razred uporabili za prikaz navigacij s pomočjo CSS in JavaScript toggleVsebina metoda.

Povezano: Neumorfni trendi oblikovanja v HTML, CSS in JavaScript

Preostanek CSS pa je odvisen od vaših želja. Toda tisti v vzorčnem delčku CSS tukaj bi vam moral dati idejo, kako oblikovati svojega.

Pri ustvarjanju spletnega mesta bodite bolj ustvarjalni

Ustvarjanje vizualno privlačnega spletnega mesta zahteva nekaj ustvarjalnosti. Uporabniku prijazna spletna stran bo bolj verjetno spremenila vaše občinstvo kot nerodno.

Čeprav smo vam pokazali, kako lahko tukaj ustvarite navigacijski meni po meri, lahko to še presežete in ga naredite privlačnejšega. Na primer, lahko animirate prikaz navigacij, jim dodate barvo ozadja in drugo. Karkoli že delate, poskrbite, da bo vaše spletno mesto uporabljalo najboljše oblikovalske prakse in postavitve, ki bodo uporabnikom enostavne.

Deliti Deliti Cvrkutati E-naslov 15 ukazov ukaznega poziva Windows (CMD), ki jih morate poznati

Ukazni poziv je še vedno močno orodje Windows. Tu so najbolj uporabni ukazi CMD, ki jih mora poznati vsak uporabnik sistema Windows.

Preberite Naprej Sorodne teme

Programiranje
HTML
CSS
JavaScript
Nasveti za kodiranje

O avtorju Idisou Omisola(94 objavljenih člankov)

Idowu je navdušen nad vsemi pametnimi tehnologijami in produktivnostjo. V prostem času se igra s kodiranjem in se, ko mu je dolgčas, preklopi na šahovsko tablo, rad pa se občasno tudi odmika od rutine. Njegova strast, da ljudem pokaže pot okoli sodobne tehnologije, ga motivira, da piše več.

Več od Idowu Omisola

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti

Kako ustvariti svoj mobilni meni, ki ga je mogoče preklopiti

Pri ustvarjanju spletnega mesta bodite bolj ustvarjalni

Naročite se na naše novice