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 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 basculable

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 :

 Créez trois div pour représenter la barre de menu déroulant à trois lignes 








 Ajoutez vos navigations ici 


Domicile
À propos de
Contact

CSS :

/*Cette délimitation de section est uniquement dans le but du tutoriel*/
section{ 
largeur: 800px ;
hauteur: 600px ;
marge supérieure: 50px ;
marge gauche: 250 px ;
bordure: noir uni 1px ;
arrière-plan: #e6e3dc ;
}
/*positionner le conteneur divs dans votre DOM*/
#toggle-conteneur{
affichage: grille ;
largeur: ajustement-contenu ;
marge gauche: 720 px ;
marge supérieure: 10px ;
}
/* Empilez les trois div les unes au-dessus des autres. Ensuite, définissez une hauteur et une largeur pour eux.*/
#un deux trois{
fond: noir ;
largeur: 30px ;
hauteur: 3px ;
marge supérieure: 5px ;
} 
.toggle-content{
affichage: aucun ;
marge gauche: 700 px ;
marge supérieure: 20 px ;
}
.toggle-content a{
bloc de visualisation;
texte-décoration: aucun ;
la couleur noire;
taille de la police: 30 px ;
}
.toggle-content a: hover{
Couleur bleue;
}
/*Afficher l'instance de classe créée par JavaScript dans le bloc*/
.affiché{
bloc de visualisation;
}

Ajouter JavaScript :

var basculeur = document.getElementById("toggle-container");
var toggleContents = document.getElementById("toggle-content");
document.addEventListener("clic", fonction(){
//Appliquer une instance de classe à chaque navigation et configurer l'affichage pour basculer :
toggleContents.classList.toggle("affiché");
});

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.

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:

//Ajoutez un événement de clic à votre page Web :
window.onclick = fonction (événement) {
//Ciblez l'événement de clic dans la barre de menus pour permettre au corps de la page Web de le suivre :
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName("toggle-content");
//Masquer les navigations en parcourant chacune d'entre elles :
pour (var i = 0; i < dropdowns.length; i++) {
var abandonné = listes déroulantes[i] ;
if (dropped.classList.contains('display')) {
drop.classList.remove('affichage');
}
}
}
}

Voici donc un résumé de ce que vous venez de faire: Vous avez créé trois lignes en utilisant le div balise 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.

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.

Comment réutiliser votre ancien matériel comme un pro

Vous avez beaucoup de vieilles technologies qui encombrent votre maison? Découvrez exactement quoi en faire dans ce guide de recyclage technique !

Lire la suite

A propos de l'auteur