Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Temps d’accès

Hourglass_Empty

L’expérience utilisateur et le temps de chargement d’un site Web sont des facteurs clés de son succès. Il est très important que vous (et vos visiteurs) ayez un site Web rapide. Pour cette raison, il est important de ne pas surcharger votre site Web avec du JavaScript inutile. Comment faire un bon menu? Vous n’avez pas besoin d’utiliser JavaScript pour ce faire. Aujourd’hui, vous pouvez simplement créer un menu déroulant en utilisant HTML et CSS. Nous vous apprendrons cela dans ce tutoriel! Allons-y 😉

De quoi aurez-vous besoin

Avant de créer un menu déroulant en HTML / CSS, vous aurez besoin des éléments suivants:

  • Accédez à votre panneau de contrôle d’hébergement

Étape 1 – Créez un fichier HTML

Tout d’abord, vous devez créer un fichier HTML vierge. Dans ce tutoriel, nous allons créer un nouveau fichier nommé menu.html . Nous utilise le gestionnaire de fichiers (dans Hostinger) pour ça. cependant, Vous pouvez faire la même chose en utilisant un Client FTP (Créez le fichier menu.html juste sur votre l’ordinateur et envoyez-le à votre FTP).

Créer un fichier de menu HTML

Notre menu se compose d’un élément parent appelé Principal du menu et cinq enfants. En modifiant l’URL dans l’attribut href, Vous pouvez lier n’importe qui Menu pour enfants vers une autre page de votre site Web. Vous constaterez que chaque élément a une classe différente – La liste déroulante , Bouton du menu principal et Drop down enfant . Des classes sont nécessaires pour appliquer différentes règles CSS.

<div class="dropdown">
 <button class="boutonmenuprincipal">Menu Principal</button>
 <div class="dropdown-child">
 <a href="http://www.votresite.com/page1.html">Menu enfant 1</a>
 <a href="http://www.votresite.com.com/page2.html">Menu enfant 2</a>
 <a href="http://www.votresite.com.com/page3.html">Menu enfant 3</a>
 <a href="http://www.votresite.com.com/page4.html">Menu enfant 4</a>
 <a href="http://www.votresite.com.com/page5.html">Menu enfant 5</a>
 </div>
 </div>

Voici à quoi ressemble le menu HTML sans règles CSS:

HTML du menu Apercu

Comme vous pouvez le voir, le menu HTML n’est pas très joli. Nous appliquerons les règles CSS et les modifierons à l’étape suivante.

Étape 3 – Appliquer CSS et créer un effet de défilement

Nous améliorerons notre code HTML en utilisant les règles CSS suivantes:

.boutonmenuprincipal {
background-color: #e83737;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
font-size: 30px;
}
.boutonmenuprincipal:hover {
background-color: #ff4444;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
min-width: 50px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}

Comme vous pouvez voir la classe enfant .dropdown encore Affichage de Règle CSS : rien . pourtant dès que la souris de l’utilisateur est sur l’élément de menu de niveau supérieur ( .dropdown: float ) puis le contenu devient Verrouillage d’écran . Cela créera un effet de liste déroulante pour notre menu.

Voici à quoi ressemble votre fichier menu.html ::

<html>
<head>
<style>
.boutonmenuprincipal {
background-color: #e83737;
color: white;
border: none;
cursor: pointer;
padding:20px;
margin-top:20px;
font-size: 30px;
}
.boutonmenuprincipal:hover {
background-color: #ff4444;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
min-width: 50px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="boutonmenuprincipal">Menu principal</button>
<div class="dropdown-child">
<a href="http://www.votresite.com/page1.html">Menu enfant 1</a>
<a href="http://www.votresite.com/page2.html">Menu enfant 2</a>
<a href="http://www.votresite.com/page3.html">Menu enfant 3</a>
<a href="http://www.votresite.com/page4.html">Menu enfant 4</a>
<a href="http://www.votresite.com/page5.html">Menu enfant 5</a>
</div>
</div>
</body>
</html>

Dans cet exemple, nous utilisons une feuille de style interne. Cela signifie que le CSS sera placé dans le même fichier que le HTML. Cependant, il existe plusieurs options Liez CSS à votre code HTML .

Une fois que vous avez terminé, le menu déroulant devrait ressembler à ceci:

Menu déroulant principal

N’hésitez pas à expérimenter avec CSS en changeant les couleurs et les tailles. Personnalisez ce menu selon vos besoins!

Conclusion

Dans ce didacticiel, vous avez appris à créer rapidement un menu déroulant à l’aide de HTML et CSS. Le code fourni dans ce tutoriel est très léger et n’affecte pas le temps de chargement de votre site!

J’espère que je vous ai aidé! Nous nous reverrons dans un prochain tutoriel! 😉



Source link

Recent Posts