Comment créer une barre de menus mobile avec HTML, CSS et JavaScript

Sans aucun doute, vous pouvez créer un menu mobile basculable à l’aide de frameworks CSS comme TailWind ou BootStrap.

Mais quel est le concept derrière ? Et comment en créer un à partir de zéro sans dépendre de ces frameworks CSS ?

Faire ce qui précède vous-même vous donne un contrôle total sur la personnalisation. Alors, sans plus tarder, voici comment créer un menu mobile à bascule en utilisant votre langage de programmation préféré.

Si vous ne l’avez pas déjà fait, ouvrez votre dossier de projet et créez vos fichiers de projet (HTML, CSS et JavaScript).

Ci-dessous, vous verrez des exemples de code dont vous avez besoin pour les trois types. Et si vous ne l’avez pas déjà fait, pensez à télécharger ces applications pour apprendre le code avant de continuer à lire.

Nous commencerons par HTML :

<!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Menu</title>
</head>
<body>
<section>
<!-- Create three divs to represent the three-line dropdown menu bar --> 
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Add your navigations here --> 
<div id="toggle-content" class="toggle-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</section>
</body>

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

Ajouter JavaScript :

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

Voici à quoi ressemble une sortie de travail lorsque vous cliquez sur la barre de menu :

Le menu est basculable, donc cliquer à nouveau sur la barre – ou n’importe où dans la page – masque les navigations.

En rapport: Style d’éléments de site Web avec un dégradé d’arrière-plan CSS

Votre navigateur peut ne pas prendre en charge le masquage du contenu lorsque vous cliquez n’importe où dans votre page Web. Vous pouvez essayer de forcer cela en utilisant une cible d’événement et une boucle JavaScript. Vous pouvez le faire en ajoutant le bloc de code suivant à votre 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 < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}

Voici donc un résumé de ce que vous venez de faire : Vous avez créé trois lignes en utilisant le div balise HTML. Vous avez ajusté leur hauteur et leur largeur et les avez positionnés dans votre DOM. Ensuite, vous leur avez attribué un événement de clic à l’aide de JavaScript.

En rapport: Comment créer un site Web : pour les débutants

Vous réglez l’affichage initial de vos navigations sur rien pour les masquer lors du chargement de la page. Puis le Cliquez sur événement sur les trois lignes bascule ces navigations basées sur une classe instanciée JavaScript (affiché). Enfin, vous avez utilisé cette nouvelle classe pour afficher les navigations en CSS, et en JavaScript toggleContenu méthode.

En rapport: Tendances de conception neumorphique en HTML, CSS et JavaScript

Le reste du CSS, cependant, dépend de vos préférences. Mais celui de l’exemple d’extrait CSS ici devrait vous donner une idée de la façon de styliser le vôtre.

Soyez plus créatif lors de la création de votre site Web

Faire un site Web visuellement attrayant nécessite une certaine créativité. Et un site Web convivial est plus susceptible de convertir votre public qu’un site fade.

Bien que nous vous ayons montré comment créer un menu de navigation personnalisé ici, vous pouvez toujours aller au-delà et le rendre plus attrayant. Par exemple, vous pouvez animer l’affichage des navigations, leur donner une couleur de fond, etc. Et quoi que vous fassiez, assurez-vous que votre site Web utilise les meilleures pratiques de conception et des mises en page faciles à utiliser pour les utilisateurs.

14 façons de rendre Windows 10 plus rapide et d’améliorer les performances

Il n’est pas difficile de rendre Windows 10 plus rapide. Voici plusieurs méthodes pour améliorer la vitesse et les performances de Windows 10.

A propos de l’auteur

Idowu Omisola
(91 articles publiés)

Idowu est passionné par tout ce qui concerne les technologies intelligentes et la productivité. Pendant son temps libre, il joue avec le codage et passe à l’échiquier quand il s’ennuie, mais il aime aussi de temps en temps rompre avec la routine. Sa passion pour montrer aux gens le chemin autour de la technologie moderne le motive à écrire plus.

Plus de Idowu Omisola

— to www.makeuseof.com