Come creare una barra dei menu mobile con HTML, CSS e JavaScript

Indubbiamente, puoi creare un menu mobile attivabile utilizzando framework CSS come TailWind o BootStrap.

Ma qual è il concetto alla base? E come puoi crearne uno da zero senza dipendere da questi framework CSS?

Fare quanto sopra ti dà il pieno controllo della personalizzazione. Quindi, senza ulteriori indugi, ecco come creare un menu mobile attivabile utilizzando il linguaggio di programmazione preferito.

Se non l'hai già fatto, apri la cartella del tuo progetto e crea i tuoi file di progetto (HTML, CSS e JavaScript).

Di seguito, vedrai esempi del codice necessario per tutti e tre i tipi. E se non l'hai già fatto, considera il download queste app per imparare il codice prima di continuare a leggere.

Inizieremo con 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;  
 }

Aggiungi JavaScript:

cosa significa faccia negli sms?

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

Ecco come appare un output funzionante quando fai clic sulla barra dei menu:

Il menu è attivabile, quindi facendo nuovamente clic sulla barra o in qualsiasi punto della pagina, le navigazioni vengono nascoste.

Imparentato: Stile elementi del sito Web con un gradiente di sfondo CSS

Il tuo browser potrebbe non supportare il nascondere il contenuto quando fai clic in un punto qualsiasi della tua pagina web. Puoi provare a forzarlo utilizzando un target dell'evento e un ciclo JavaScript. Puoi farlo aggiungendo il seguente blocco di codice al tuo 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');  
 }  
 }  
 }  
}

Quindi, ecco un riassunto di quello che hai appena fatto: hai creato tre linee usando il div tag dell'HTML. Hai regolato la loro altezza e larghezza e li hai posizionati nel tuo DOM. Quindi hai dato a questi un evento clic utilizzando JavaScript.

Imparentato: Come creare un sito Web: per principianti

Hai impostato la visualizzazione iniziale delle tue navigazioni su nessuno per nasconderli al caricamento della pagina. Poi il clic evento sulle tre righe alterna queste navigazioni in base a una classe istanziata JavaScript ( visualizzato ). Infine, hai utilizzato questa nuova classe per visualizzare le navigazioni utilizzando CSS e JavaScript toggleContenuti metodo.

Correlati: tendenze del design neumorfico in HTML, CSS e JavaScript

Il resto del CSS, tuttavia, dipende dalle tue preferenze. Ma quello nello snippet CSS di esempio qui dovrebbe darti un'idea di come modellare il tuo.

Diventa più creativo quando crei il tuo sito web

Realizzare un sito Web visivamente accattivante richiede un po' di creatività. E un sito web user-friendly ha maggiori probabilità di convertire il tuo pubblico rispetto a uno blando.

Sebbene ti abbiamo mostrato come creare un menu di navigazione personalizzato qui, puoi comunque andare oltre e renderlo più avvincente. Ad esempio, puoi animare la visualizzazione delle navigazioni, dare loro un colore di sfondo e altro ancora. E qualunque cosa tu faccia, assicurati che il tuo sito web utilizzi le migliori pratiche di progettazione e layout facili da usare per gli utenti.

Condividere Condividere Tweet E-mail 15 comandi del prompt dei comandi di Windows (CMD) che devi conoscere

Il prompt dei comandi è ancora un potente strumento di Windows. Ecco i comandi CMD più utili che ogni utente di Windows deve conoscere.

Leggi Avanti Argomenti correlati

Programmazione
HTML
CSS
JavaScript
Suggerimenti per la codifica

Circa l'autore Idisou Omisola(94 articoli pubblicati)

Idowu è appassionato di qualsiasi tecnologia intelligente e produttività. Nel tempo libero gioca con la programmazione e quando si annoia passa alla scacchiera, ma ama anche staccare ogni tanto dalla routine. La sua passione per mostrare alle persone la tecnologia moderna lo motiva a scrivere di più.

Altro da Idowu Omisola

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti

Come creare il tuo menu mobile attivabile

Diventa più creativo quando crei il tuo sito web

Iscriviti alla nostra Newsletter