Mobiilivalikkopalkin tekeminen HTML: llä, CSS: llä ja JavaScriptillä

Epäilemättä voit luoda vaihdettavan mobiilivalikon käyttämällä CSS -kehyksiä, kuten TailWind tai BootStrap.

Mutta mikä konsepti sen takana on? Ja miten voit tehdä sellaisen tyhjästä riippumatta näistä CSS -kehyksistä?

Edellä mainitun tekeminen antaa sinulle täyden räätälöinnin hallinnan. Joten ilman lisäselvityksiä voit luoda vaihdettavan mobiilivalikon käyttämällä haluamaasi ohjelmointikieltä.

Jos et ole jo tehnyt niin, avaa projektikansio ja luo projektitiedostot (HTML, CSS ja JavaScript).

Alla näet esimerkkejä koodista, jota tarvitset kaikille kolmelle tyypille. Ja jos et ole jo tehnyt sitä, harkitse lataamista nämä sovellukset oppivat koodia ennen kuin jatkat lukemista.

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

Lisää JavaScript:

miten sanelua käytetään Macissa

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

Tältä näyttää toimiva tulos, kun napsautat valikkoriviä:

Valikko on vaihdettavissa, joten palkin napsauttaminen uudelleen - tai missä tahansa sivun sisällä - piilottaa navigoinnin.

Aiheeseen liittyviä: Tyylisiä verkkosivustoelementtejä CSS -taustagradientilla

Selaimesi ei ehkä tue sisällön piilottamista, kun napsautat mitä tahansa verkkosivusi kohtaa. Voit yrittää pakottaa tämän käyttämällä tapahtumatavoitetta ja JavaScript -silmukkaa. Voit tehdä sen lisäämällä JavaScript -koodiin seuraavan koodilohkon:

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

Joten tässä on yhteenveto tekemästäsi toiminnasta: Loit kolme riviä käyttämällä div HTML -tunniste. Säädit niiden korkeutta ja leveyttä ja sijoitit ne DOM: iisi. Sitten annoit näille napsautustapahtuman JavaScriptin avulla.

Aiheeseen liittyviä: Verkkosivuston luominen: aloittelijoille

Asetat navigointien alkunäytön arvoksi ei mitään piilottaa ne sivun latautuessa. Sitten klikkaus Tapahtuma kolmella rivillä vaihtaa nämä navigoinnit JavaScriptin luodun luokan perusteella ( näytetään ). Lopuksi käytit tätä uutta luokkaa näyttämään navigoinnit CSS: n ja JavaScriptin avulla toggleSisältö menetelmä.

Aiheeseen liittyviä: Neumorfiset suunnittelutrendit HTML: ssä, CSS: ssä ja JavaScriptissä

Muu CSS riippuu kuitenkin mieltymyksistäsi. Mutta tässä esimerkissä olevan CSS -katkelman pitäisi antaa sinulle käsitys siitä, miten voit muotoilla omasi.

Hanki lisää luovuutta verkkosivustosi rakentamisessa

Visuaalisesti houkuttelevan verkkosivuston luominen vaatii luovuutta. Käyttäjäystävällinen verkkosivusto kääntää yleisön todennäköisemmin kuin lempeä.

Vaikka olemme osoittaneet sinulle, miten voit luoda mukautetun navigointivalikon täällä, voit silti mennä pidemmälle ja tehdä siitä entistä vakuuttavamman. Voit esimerkiksi animoida navigointien näytön, antaa niille taustavärin ja paljon muuta. Ja mitä tahansa teetkin, varmista, että verkkosivustosi käyttää parhaita suunnittelukäytäntöjä ja asetteluja, jotka ovat helppokäyttöisiä käyttäjille.

Jaa Jaa Tweet Sähköposti 15 Windowsin komentokehotteen (CMD) komentoa, jotka sinun on tiedettävä

Komentorivi on edelleen tehokas Windows -työkalu. Tässä ovat hyödyllisimmät CMD -komennot, jotka jokaisen Windows -käyttäjän on tiedettävä.

Lue seuraava Liittyvät aiheet

Ohjelmointi
HTML
CSS
JavaScript
Koodausvinkkejä

Kirjailijasta Idisou Omisola(94 artikkelia julkaistu)

Idowu on intohimoinen kaikkeen älykkääseen tekniikkaan ja tuottavuuteen. Vapaa -ajallaan hän leikkii koodauksella ja vaihtaa shakkilaudalle, kun on kyllästynyt, mutta hän myös rakastaa irtautumista rutiinista silloin tällöin. Hänen intohimonsa näyttää ihmisille tie modernin tekniikan ympärillä motivoi häntä kirjoittamaan enemmän.

Lisää Idowu Omisolasta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi

Vaihdettavan mobiilivalikon luominen

Hanki lisää luovuutta verkkosivustosi rakentamisessa

tilaa uutiskirjeemme