Sådan laver du en mobil menulinje med HTML, CSS og JavaScript

Uden tvivl kan du oprette en mobilmenu, der kan skiftes, ved hjælp af CSS -rammer som TailWind eller BootStrap.

Men hvad er konceptet bag? Og hvordan kan du lave en fra bunden uden at afhænge af disse CSS -rammer?

Hvis du gør ovenstående selv, får du fuld tilpasningskontrol. Så helt uden videre, her er hvordan du opretter en skiftbar mobilmenu ved hjælp af dit foretrukne programmeringssprog.

Hvis du ikke allerede har gjort det, skal du åbne din projektmappe og oprette dine projektfiler (HTML, CSS og JavaScript).

Nedenfor ser du eksempler på den kode, du har brug for til alle tre typer. Og hvis du ikke allerede har gjort det, kan du overveje at downloade disse apps for at lære kode inden du læser 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;  
 }

Tilføj JavaScript:

forskel mellem Samsung Pay og Android Pay

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

Sådan ser et fungerende output ud, når du klikker på menulinjen:

Menuen kan skiftes, så at klikke på linjen igen - eller hvor som helst på siden - skjuler navigationerne.

Relaterede: Style webstedselementer med en CSS -baggrundsforløb

Din browser understøtter muligvis ikke at skjule indholdet, når du klikker et vilkårligt sted på din webside. Du kan prøve at tvinge dette ved at bruge et hændelsesmål og JavaScript -loop. Du kan gøre det ved at tilføje følgende kodeblok til dit 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 et resumé af, hvad du lige har gjort: Du oprettede tre linjer ved hjælp af div tag med HTML. Du justerede deres højde og bredde og placerede dem i din DOM. Derefter gav du disse en klikbegivenhed ved hjælp af JavaScript.

Relaterede: Sådan laver du et websted: For begyndere

Du indstiller den indledende visning af dine navigationer til ingen for at skjule dem, når siden indlæses. Derefter klik hændelse på de tre linjer skifter disse navigationer baseret på en JavaScript -instantieret klasse ( vises ). Endelig brugte du denne nye klasse til at vise navigationerne ved hjælp af CSS og JavaScript toggleContents metode.

Relateret: Neumorfe designtrends i HTML, CSS og JavaScript

Resten af CSS afhænger dog af dine præferencer. Men den i eksemplet CSS -uddrag her skal give dig en idé om, hvordan du styler din.

Bliv mere kreativ, når du bygger dit websted

At lave et visuelt tiltalende websted kræver noget kreativitet. Og et brugervenligt websted er mere tilbøjeligt til at konvertere dit publikum end et intetsigende.

Selvom vi har vist dig, hvordan du opretter en brugerdefineret navigationsmenu her, kan du stadig gå ud over dette og gøre det mere overbevisende. For eksempel kan du animere visningen af navigationerne, give dem en baggrundsfarve og mere. Og uanset hvad du gør, skal du sikre dig, at dit websted bruger de bedste designpraksis og layout, der er let for brugerne.

Del Del Tweet E -mail 15 Kommandoer i Windows -kommandoprompt (CMD), du skal kende

Kommandoprompten er stadig et kraftfuldt Windows -værktøj. Her er de mest nyttige CMD -kommandoer, som alle Windows -brugere skal kende.

Læs Næste Relaterede emner

Programmering
HTML
CSS
JavaScript
Kodningstip

Om forfatteren Idisou Omisola(94 artikler udgivet)

Idowu brænder for alt smart teknologi og produktivitet. I fritiden leger han med kodning og skifter til skakbrættet, når han keder sig, men han elsker også at bryde væk fra rutinen en gang imellem. Hans passion for at vise folk vejen rundt om moderne teknologi motiverer ham til at skrive mere.

Mere fra Idowu Omisola

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere

Sådan opretter du din Togglable Mobile Menu

Bliv mere kreativ, når du bygger dit websted

Abonner på vores nyhedsbrev