Hvordan lage en mobil menylinje med HTML, CSS og JavaScript

Utvilsomt kan du opprette en skiftbar mobilmeny ved hjelp av CSS -rammer som TailWind eller BootStrap.

Men hva er konseptet bak det? Og hvordan kan du lage en fra bunnen av uten å være avhengig av disse CSS -rammene?

Gjør du ovenstående selv, får du full tilpasningskontroll. Så uten videre, her er hvordan du oppretter en skiftbar mobilmeny ved hjelp av ditt foretrukne programmeringsspråk.

Hvis du ikke allerede har gjort det, åpner du prosjektmappen og oppretter prosjektfilene dine (HTML, CSS og JavaScript).

Nedenfor ser du eksempler på koden du trenger for alle tre typene. Og hvis du ikke allerede har gjort det, kan du vurdere å laste ned disse appene for å lære kode før du leser videre.

Vi starter med 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;  
 }

Legg til JavaScript:

logg inn facebook annen bruker samme datamaskin

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

Slik ser en arbeidsutgang ut når du klikker på menylinjen:

Menyen kan veksles, så klikk på linjen igjen - eller hvor som helst på siden - skjuler navigasjonene.

I slekt: Style nettstedselementer med en CSS -bakgrunnsgradient

Det kan hende nettleseren din ikke støtter å skjule innholdet når du klikker hvor som helst på nettsiden din. Du kan prøve å tvinge dette ved å bruke et hendelsesmål og JavaScript -loop. Du kan gjøre det ved å legge til følgende kodeblokk i JavaScript:

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

Så her er en oppsummering av det du nettopp gjorde: Du opprettet tre linjer ved hjelp av div tag med HTML. Du justerte høyden og bredden og plasserte dem i DOM. Deretter ga du disse en klikkhendelse ved hjelp av JavaScript.

I slekt: Hvordan lage et nettsted: For nybegynnere

Du angir den første visningen av navigasjonene til ingen for å skjule dem når siden lastes inn. Og så klikk hendelse på de tre linjene bytter disse navigasjonene basert på en JavaScript -instansert klasse ( vises ). Til slutt brukte du denne nye klassen til å vise navigasjonene ved hjelp av CSS og JavaScript toggleContents metode.

Relatert: Neumorfe designtrender i HTML, CSS og JavaScript

Resten av CSS avhenger imidlertid av dine preferanser. Men den i eksempelet CSS -kodebiten her bør gi deg en ide om hvordan du styler din.

Bli mer kreativ når du bygger nettstedet ditt

Å lage et visuelt tiltalende nettsted krever litt kreativitet. Og det er mer sannsynlig at et brukervennlig nettsted konverterer publikummet enn et intetsigende.

Selv om vi har vist deg hvordan du oppretter en tilpasset navigasjonsmeny her, kan du fortsatt gå utover dette og gjøre det mer overbevisende. For eksempel kan du animere visningen av navigasjonene, gi dem en bakgrunnsfarge og mer. Og uansett hva du gjør, sørg for at nettstedet ditt bruker de beste designpraksis og oppsett som er enkle å bruke.

Dele Dele kvitring E -post 15 kommandoer i Windows -ledetekst (CMD) du må vite

Kommandoprompten er fremdeles et kraftig Windows -verktøy. Her er de mest nyttige CMD -kommandoene hver Windows -bruker trenger å vite.

Les neste Relaterte temaer

Programmering
HTML
CSS
JavaScript
Kodetips

Om forfatteren Idisou Omisola(94 artikler publisert)

Idowu brenner for alt smart teknologi og produktivitet. På fritiden leker han med koding og bytter til sjakkbrettet når han kjeder seg, men han liker også å bryte fra rutinen en gang i blant. Hans lidenskap for å vise folk veien rundt moderne teknologi motiverer ham til å skrive mer.

Mer fra Idowu Omisola

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere

Slik oppretter du din Togglable mobilmeny

Bli mer kreativ når du bygger nettstedet ditt

Abonner på vårt nyhetsbrev