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 cela ? Et comment pouvez-vous en créer un à partir de zéro sans dépendre de ces frameworks CSS ?
Faire ce qui précède 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é.
Comment créer votre menu mobile à bascule
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.
Commençons 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 menus :
Le menu est basculable, donc cliquer à nouveau sur la barre – ou n'importe où dans la page – masque les navigations.
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 la balise div de 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.
Vous définissez l'affichage initial de vos navigations sur aucun pour les masquer lors du chargement de la page. Ensuite, l'événement click sur les trois lignes bascule ces navigations basées sur une classe instanciée JavaScript ( affichée ). Enfin, vous avez utilisé cette nouvelle classe pour afficher les navigations à l'aide de CSS et de la méthode toggleContents de 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.