Kuidas luua mobiilimenüüriba HTML -i, CSS -i ja JavaScripti abil

Kahtlemata saate luua lülitatava mobiilimenüü, kasutades CSS -i raamistikke nagu TailWind või BootStrap.

Aga mis kontseptsioon selle taga on? Ja kuidas saate seda teha nullist, sõltumata nendest CSS -i raamistikest?

Ülaltoodud toimingute tegemine annab teile täieliku kohandamise kontrolli. Niisiis, ilma igasuguste lisavõimalusteta, saate siin oma eelistatud programmeerimiskeelt kasutades muuta lülitatava mobiilimenüü.

Kui te pole seda juba teinud, avage oma projekti kaust ja looge oma projektifailid (HTML, CSS ja JavaScript).

Allpool näete näiteid koodist, mida vajate kõigi kolme tüübi jaoks. Ja kui te pole seda veel teinud, kaaluge allalaadimist need rakendused koodi õppimiseks enne edasi lugemist.

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

Lisa JavaScript:

kuidas peatada programm Linuxi terminalis

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

Menüüribal klõpsates näeb töötulemus välja järgmine.

Menüü on lülitatav, nii et ribal uuesti klõpsamine - või mis tahes lehe sees - peidab navigeerimised.

Seotud: Stiilsed veebisaidielemendid CSS -i tausta gradiendiga

Teie brauser ei pruugi toetada sisu peitmist, kui klõpsate oma veebisaidi suvalisel kohal. Saate seda sundida sündmuse sihtmärgi ja JavaScripti silmuse abil. Seda saate teha, lisades JavaScriptile järgmise koodiploki:

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

Siin on kokkuvõte sellest, mida just tegite: lõite kolm rida, kasutades div HTML -i silt. Reguleerisite nende kõrgust ja laiust ning paigutasite need oma DOM -i. Seejärel andsite neile JavaScripti kasutades klikisündmuse.

Seotud: Veebisaidi loomine: algajatele

Seadistate oma navigeerimiste esialgse kuva mitte ühtegi et neid lehe laadimisel peita. Siis klõpsake sündmus kolmel real lülitab need navigeerimised JavaScripti aktiveeritud klassi alusel ( kuvatakse ). Lõpuks kasutasite seda uut klassi navigeerimiste kuvamiseks CSS -i ja JavaScripti abil toggleSisu meetod.

Seotud: Neumorfsed disainitrendid HTML -is, CSS -is ja JavaScriptis

Ülejäänud CSS sõltub aga teie eelistustest. Kuid siin toodud näide CSS -i väljavõttest peaks andma teile ettekujutuse oma stiili kujundamisest.

Olge oma veebisaidi loomisel loomingulisem

Visuaalselt atraktiivse veebisaidi tegemine nõuab teatavat loovust. Ja kasutajasõbralik veebisait muudab teie vaatajaskonna tõenäolisemalt kui mahe.

Kuigi oleme näidanud teile, kuidas siin kohandatud navigeerimismenüüd luua, saate siiski sellest kaugemale minna ja muuta see veenvamaks. Näiteks saate animeerida navigeerimiste kuva, anda neile taustavärvi ja palju muud. Ja hoolimata sellest, mida te teete, veenduge, et teie veebisait kasutaks parimaid kujundustavasid ja paigutusi, mida kasutajatel on lihtne kasutada.

Jaga Jaga Piiksuma E -post 15 Windowsi käsuviiba (CMD) käsku, mida peate teadma

Käsuviip on endiselt võimas Windowsi tööriist. Siin on kõige kasulikumad CMD -käsud, mida iga Windowsi kasutaja peab teadma.

Loe edasi Seotud teemad

Programmeerimine
HTML
CSS
JavaScript
Näpunäiteid kodeerimiseks

Autori kohta Idisou Omisola(Avaldatud 94 artiklit)

Idowu on kirglik kõige nutika tehnoloogia ja tootlikkuse vastu. Vabal ajal mängib ta kodeerimisega ja lülitab malelauale, kui tal on igav, kuid talle meeldib ka aeg -ajalt rutiinist lahti saada. Tema kirg näidata inimestele teed kaasaegses tehnoloogias motiveerib teda rohkem kirjutama.

Veel Idowu Omisolast

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin

Lülitatava mobiilimenüü loomine

Olge oma veebisaidi loomisel loomingulisem

Telli meie uudiskiri