Comment créer un menu déroulant en CSS (Sans Javascript) en 2022

Dans ce tutoriel, vous apprendrez à créer un menu déroulant avec CSS.

  1. Commencez par le document HTML suivant contenant une liste non ordonnée :
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Drop-Down Navigation Menu</title>
</head>
<body>
<main>
	<header>
		<h1>Horizontal Navigation with Drop-Down Menu</h1>
	</header>
	<nav>
		<ul id="mainMenu">
			<li><a href="home.html">Home</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="products.html">Products</a></li>
			<li><a href="support.html">Support</a></li>
			<li><a href="blog.html">Blog</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
</main>
</body>
</html>

Sans CSS, il s’affichera comme suit :

2-Créez un fichier pour une feuille de style externe et créez un lien vers celui-ci à partir du code HTML à l’aide de la balise suivante :

<link href="menu.css" rel="stylesheet">

3-À l’intérieur de la feuille de style, utilisez le CSS suivant pour créer un menu horizontal de base :

ol,ul {
	list-style: none;
}
#mainMenu {
	margin:10px;
	width:900px;
	font-family: sans-serif;
}
#mainMenu li {
	display:block;
	width:120px;
	float:left;
	margin-left:2px;
	border:1px solid #000;
}

#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	background-color:#fff;
	color:#009;
}

#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}

4-Ouvrez la page HTML dans un navigateur. Ce code rend ce qui suit :

Un menu horizontal

5-Dans le code HTML, ajoutez une liste imbriquée sous l’élément de liste À propos

<ul id="mainMenu">
	<li><a href="home.html">Home</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="support.html">Support</a></li>
	<li><a href="blog.html">Blog</a></li>
	<li><a href="about.html">About</a>
		<ul>
			<li><a href="history.html">Company History</a></li>
			<li><a href="staff.html">Our Staff</a></li>
			<li><a href="press.html">Press Releases</a></li>
			<li><a href="investorInfo.html">Investor Information</a></li>
		</ul>
	</li>
	<li><a href="contact.html">Contact</a></li>
</ul>

6-Dans le CSS, définissez la position des éléments du menu principal sur relative. Nous devrons positionner les sous-menus en utilisant le positionnement absolu, mais les éléments positionnés de manière absolue sont positionnés dans leur élément conteneur non positionné statiquement le plus proche. Donc, pour s’y préparer, nous allons d’abord positionner les éléments de la liste principale de manière relative :

#mainMenu li {
	position:relative;
	display:block;
	width:120px;
	float:left;
	margin-left:2px;
	border:1px solid #000;
}

7-Positionnez absolument les sous-menus. Les sous-menus sont contenus dans les éléments ul à l’intérieur des éléments li. La règle suivante utilise le positionnement absolu pour les positionner immédiatement en dessous de ces éléments li :

#mainMenu li ul {
	position:absolute;
	margin:0px;
	padding:0px;
	left:-3px;
	top:22px;
}

8-Cachez les sous-menus. Ajouter un affichage : aucun ; à la règle ci-dessus pour masquer les sous-menus

#mainMenu li ul {
	display:none;
	position:absolute;
	margin:0px;
	padding:0px;
	left:-3px;
	top:22px;
}

9-Style les options du sous-menu. Les deux règles ci-dessous ajoutent des bordures autour des options du sous-menu. Nous désactivons la bordure supérieure pour toutes les options sauf la première, que nous identifions avec la pseudo-classe :first-child afin de ne pas obtenir une bordure double épaisseur résultant des bordures supérieure et inférieure des options adjacentes.

#mainMenu li ul {
	position:absolute;
	margin:0px;
	padding:0px;
	left:-3px;
	top:22px;
	display:none;
}
#mainMenu li ul li {
	width:150px;
	font-size:smaller;
	border-top:none;
}
#mainMenu li ul li:first-child {
	border-top:1px solid #000;
}

10-Afficher le sous-menu lorsque l’utilisateur survole l’option principale. Les navigateurs modernes autorisent la pseudo-classe :hover pour presque tous les éléments, y compris les éléments de liste. Le code ci-dessous définit la propriété d’affichage du sous-menu pour qu’elle se bloque lorsque l’utilisateur survole l’élément de la liste parent :

#mainMenu li:hover ul {
	display:block;
}

11-Le CSS fini devrait ressembler à ceci :

#mainMenu {
	margin:10px;
	width:900px;
	font-family: sans-serif;
}
#mainMenu li {
	position:relative;display:block;
	width:120px;
	float:left;
	margin-left:2px;
	border:1px solid #000;
}
#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	background-color:#fff;
	color:#009;
}
#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}
#mainMenu li ul {
	position:absolute;
	margin:0px;
	padding:0px;
	left:-3px;
	top:22px;
	display:none;
}
#mainMenu li ul li {
	width:150px;
	font-size:smaller;
	border-top:none;
}
#mainMenu li ul li:first-child {
	border-top:1px solid #000;
}
#mainMenu li:hover ul {
	display:block;
}

12-Ouvrez la page HTML dans un navigateur. Ce code rend ce qui suit :

READ  Installez les logiciels nécessaires pour programmer avec le langage C++
A Horizontal Menu with a Drop Down

Pour plus de détails suivi cette vidéos que j’aime beaucoup

Si vous avez aimé cet article, veuillez- vous abonner à notre communauté reddit pour en discuter. Vous pouvez également nous retrouver sur Twitter et Facebook .

5/5 - (4 votes)

Mises à jour de la newsletter

Saisissez votre adresse e-mail ci-dessous pour vous abonner à notre newsletter

Laisser un commentaire