Hur man skapar en mobil menyrad med HTML, CSS och JavaScript

Utan tvekan kan du skapa en växlingsbar mobilmeny med hjälp av CSS -ramverk som TailWind eller BootStrap.

Men vad är konceptet bakom det? Och hur kan du göra en från grunden utan att vara beroende av dessa CSS -ramar?

Att göra ovanstående ger dig full anpassningskontroll. Så, utan vidare, så här skapar du en växlingsbar mobilmeny med ditt föredragna programmeringsspråk.

Om du inte redan har gjort det öppnar du projektmappen och skapar dina projektfiler (HTML, CSS och JavaScript).

Nedan ser du exempel på koden du behöver för alla tre typerna. Och om du inte redan har gjort det, överväg att ladda ner dessa appar för att lära sig kod innan du läser vidare.

Vi börjar 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;  
 }

Lägg till JavaScript:

hårddiskanvändning 100 procent windows 10

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å här ser en arbetsutgång ut när du klickar på menyraden:

Menyn går att växla, så att klicka på fältet igen - eller var som helst på sidan - döljer navigeringen.

Relaterad: Style webbplatselement med en CSS -bakgrundsgradient

Din webbläsare kanske inte stöder att dölja innehållet när du klickar någonstans på din webbsida. Du kan försöka tvinga fram detta med hjälp av ett händelsemål och JavaScript -loop. Du kan göra det genom att lägga till följande kodblock i ditt 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å här är en sammanfattning av vad du just gjorde: Du skapade tre rader med div tagg med HTML. Du justerade deras höjd och bredd och placerade dem i din DOM. Sedan gav du dessa en klickhändelse med JavaScript.

Relaterad: Hur man skapar en webbplats: för nybörjare

Du ställer in den första visningen av dina navigationer till ingen för att dölja dem när sidan laddas. Sedan klick händelse på de tre raderna växlar dessa navigationer baserat på en JavaScript -instanserad klass ( visas ). Slutligen använde du denna nya klass för att visa navigeringarna med hjälp av CSS och JavaScript toggleInnehåll metod.

Relaterat: Neumorf designtrender inom HTML, CSS och JavaScript

Resten av CSS beror dock på dina preferenser. Men den i exemplet CSS -kodavsnittet här borde ge dig en uppfattning om hur du formar din.

Bli mer kreativ när du bygger din webbplats

Att skapa en visuellt tilltalande webbplats kräver viss kreativitet. Och en användarvänlig webbplats är mer sannolikt att konvertera din publik än en intetsägande.

Även om vi har visat dig hur du skapar en anpassad navigeringsmeny här, kan du fortfarande gå utöver detta och göra det mer övertygande. Till exempel kan du animera visningen av navigeringarna, ge dem en bakgrundsfärg och mer. Och vad du än gör, se till att din webbplats använder de bästa designmetoderna och layouterna som är enkla att använda.

Dela med sig Dela med sig Tweet E-post 15 Windows -kommandotolks (CMD) kommandon du måste veta

Kommandotolken är fortfarande ett kraftfullt Windows -verktyg. Här är de mest användbara CMD -kommandon som alla Windows -användare behöver veta.

Läs Nästa Relaterade ämnen

Programmering
HTML
CSS
JavaScript
Kodningstips

Om författaren Idisou Omisola(94 artiklar publicerade)

Idowu brinner för allt smart teknik och produktivitet. På fritiden leker han med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig från rutinen då och då. Hans passion för att visa människor vägen kring modern teknik motiverar honom att skriva mer.

Mer från Idowu Omisola

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera

Så här skapar du din Togglable -mobilmeny

Bli mer kreativ när du bygger din webbplats

Prenumerera på vårt nyhetsbrev