Comment créer un menu déroulant vertical en HTML ?


Les menus déroulants sont un élément essentiel de tout site web, car ils permettent aux utilisateurs de naviguer facilement entre les différentes sections du site. Les menus déroulants peuvent être créés de différentes manières, mais dans cet article, nous allons nous concentrer sur la création d’un menu déroulant vertical en HTML.

Pour créer un menu déroulant vertical en HTML, nous avons besoin de deux éléments principaux : une liste non ordonnée (ul) et des éléments de liste (li). Voici un exemple de code HTML pour un menu déroulant vertical simple :


« `

« `


Dans cet exemple, nous avons une liste non ordonnée avec quatre éléments de liste. Le troisième élément de liste a également une autre liste non ordonnée imbriquée, qui représente les sous-menus. Pour que ce menu soit déroulant, nous devons ajouter un peu de CSS.

Pour faire fonctionner le menu déroulant, nous allons utiliser les propriétés CSS « display » et « position ». Voici un exemple de code CSS pour notre menu déroulant vertical :

« `

ul {

list-style: none;

padding: 0;

margin: 0;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul {

display: none;

position: absolute;

top: 100%;

left: 0;

}

li:hover ul {

display: block;

}

« `

Dans ce code CSS, nous avons d’abord supprimé les styles par défaut de la liste non ordonnée en utilisant « list-style », « padding » et « margin ». Ensuite, nous avons configuré les éléments de liste pour qu’ils soient affichés en tant que blocs et positionnés relativement.

Nous avons également ajouté des styles pour les sous-menus en utilisant « display: none » et « position: absolute ». Les sous-menus sont positionnés en haut de l’élément de liste parent en utilisant « top: 100% » et « left: 0 ».

Enfin, nous avons ajouté un style pour afficher les sous-menus lorsque l’utilisateur survole l’élément de liste parent en utilisant « li:hover ul ».

Pour transformer notre menu déroulant vertical en menu horizontal, il suffit de remplacer « float: left » par « display: inline-block » dans la règle « ul li ».

Pour créer un menu latéral en HTML, nous pouvons utiliser la même approche que pour le menu déroulant vertical, mais cette fois-ci, nous allons positionner la liste non ordonnée sur le côté de la page. Voici un exemple de code HTML pour un menu latéral :

« `

« `

Et voici le code CSS correspondant :

« `

.sidebar {

position: fixed;

top: 0;

left: 0;

width: 200px;

height: 100%;

background-color: #f2f2f2;

}

.sidebar ul {

list-style: none;

padding: 0;

margin: 0;

}

.sidebar li {

display: block;

margin: 10px 0;

}

.sidebar li a {

display: block;

padding: 10px;

background-color: #fff;

color: #333;

text-decoration: none;

transition: background-color 0.3s ease;

}

.sidebar li a:hover {

background-color: #333;

color: #fff;

}

« `

Dans ce code CSS, nous avons positionné la barre latérale en utilisant « position: fixed », « top: 0 » et « left: 0 ». Nous avons également défini une largeur et une hauteur fixes pour la barre latérale.

Ensuite, nous avons ajouté des styles pour la liste non ordonnée et les éléments de liste, ainsi que pour les liens. Les liens ont également une transition pour changer de couleur lorsqu’ils sont survolés.

Pour créer un menu déroulant vertical avec des sous-menus déroulants, il suffit d’ajouter une autre liste non ordonnée à l’intérieur de l’élément de liste parent. Voici un exemple de code HTML pour un menu déroulant vertical avec des sous-menus déroulants :

« `

« `

Et voici le code CSS correspondant :

« `

ul {

list-style: none;

padding: 0;

margin: 0;

}

ul li {

display: block;

position: relative;

}

li ul {

display: none;

position: absolute;

top: 0;

left: 100%;

}

li:hover ul {

display: block;

}

ul ul {

top: 0;

left: 100%;

}

ul li + li {

margin-top: 10px;

}

ul ul li {

display: block;

}

« `

Dans ce code CSS, nous avons ajouté des styles pour les sous-menus déroulants en utilisant « position: absolute », « top: 0 » et « left: 100% ». Nous avons également ajouté des styles pour positionner les sous-menus déroulants à droite des éléments de liste parent.

Enfin, nous avons ajouté des styles pour les éléments de liste et les sous-menus déroulants pour qu’ils soient affichés en tant que blocs, ainsi qu’un peu d’espace entre les éléments de liste.

FAQ

Laisser un commentaire