Comment créer un menu déroulant en HTML à l'aide de CSS?

Un menu déroulant est un moyen de laisser l'utilisateur explorer différentes options à sa disposition lors de l'utilisation d'un site Web. Ce sont quelque peu un widget nécessaire lors de la conception d'un site Web. CSS vous permet de créer de beaux menus déroulants qui rendent globalement Boost l'expérience utilisateur et embellissent l'apparence de votre site Web. Ce message est composé pour fournir:

1. Création d'une boîte déroulante
2. Création d'un menu déroulant

Commençons

Création d'une boîte déroulante

Souvent, vous devez avoir vu que lorsque vous apportez votre curseur de souris sur un morceau de texte ou un bouton sur un site Web, une boîte déroulante apparaît. Voici comment c'est fait.

Exemple

Cet exemple démontre la création d'une boîte déroulante.

Html

Amenez la souris ici

Cliquez sur moi

Pour faire une boîte déroulante, nous avons d'abord fait un conteneur Div pour placer le contenu de la boîte déroulante à l'intérieur, en outre, pour ouvrir la boîte déroulante, nous avons utilisé un élément.

CSS

.menu déroulant
Position: relative;
Affichage: bloc en ligne;

La classe "Dropdown" a été attribuée au premier conteneur Div qui niche l'ensemble du contenu. Nous avons réglé sa position sur relative afin que lorsque la liste déroulante s'ouvre, elle est placée juste en dessous du bouton.

CSS

.contenu déroulant
Affichage: aucun;
Color en arrière-plan: Whitesmoke;
Largeur: 100%;
rembourrage: 15px;

Le conteneur Div qui contient le contenu déroulant a été attribué à la classe «déroulante». Nous avons défini l'affichage sur aucun, en outre, étant donné une certaine largeur et un rembourrage.

CSS

.Dropdown: planer .contenu déroulant
bloc de visualisation;

De plus, pour rendre la liste déroulante qui plane, nous l'avons attribué à l'état de vol.

Et enfin, nous avons également stylé notre bouton selon notre désir.

bouton
rembourrage: 5px;
Color en arrière-plan: blé;
Font-Family: Lucida Sans;

Sortir

Une boîte déroulante a été créée avec succès. Passons maintenant à la création d'un menu déroulant.

Création d'un menu déroulant

Un menu déroulant se compose d'une liste d'options et il ne s'ouvre que lorsqu'un utilisateur apporte le curseur de la souris dessus. Vous pouvez créer un menu déroulant sur votre site Web à l'aide de CSS. Suivez l'exemple ci-dessous.

Html

Menu

Contactez-nous
À propos de nous
Autre

Ici, nous avons ajouté des balises d'ancrage pour fournir plusieurs options dans le menu déroulant.

CSS

.dropbtn
Color en arrière-plan: saumon;
Couleur blanche;
Largeur: 100px;
rembourrage: 18px;
bordure: 0;
taille de police: 17px;

Premièrement, nous donnons à notre bouton un peu de style en utilisant diverses propriétés CSS.

CSS

.menu déroulant
Position: relative;
Affichage: bloc en ligne;
Largeur: 160px;

Comme déjà expliqué ci-dessus, nous avons défini la position de la div avec la classe «déroute» relative afin que lorsque la liste déroulante s'ouvre, elle est placée juste en dessous du bouton.

CSS

.contenu déroulant
Affichage: aucun;
Color en arrière-plan: Whitesmoke;
Largeur: 100%;

Ici, nous utilisons certaines propriétés CSS de base pour styliser notre contenu déroulant.

CSS

.contenu déroulant A
bloc de visualisation;
la couleur noire;
rembourrage: 12px;
Décoration du texte: aucune;

Dans le code CSS ci-dessus, nous stylisons les liens présents dans le menu déroulant. Nous avons réglé leur écran sur Block pour que chaque lien apparaisse sur une nouvelle ligne.

CSS

.Dropdown: planer .dropbtn
Color en arrière-plan: Sandybrown;

.contenu déroulant A: Hover
Color d'arrière-plan: Lightgrey;

.Dropdown: planer .contenu déroulant
bloc de visualisation;

Ici, nous stylisons les effets de survol du bouton de menu et du menu déroulant.

Sortir

C'est ainsi que vous pouvez créer un menu déroulant avec succès.

Conclusion

Un menu déroulant offre à un utilisateur différentes options à sa disposition lors de l'utilisation d'un site Web. Vous pouvez créer ces menus déroulants en utilisant différentes propriétés CSS. Dans le but de créer une boîte déroulante de base, vous pouvez utiliser un conteneur Div et placer le contenu déroulant à l'intérieur, en outre, en utilisant les propriétés CSS, vous pouvez lui donner un certain style. Une fois que vous avez appris à créer une boîte déroulante de base, vous pouvez utiliser des techniques similaires pour créer un menu déroulant. Ce guide vous apprend à créer un menu déroulant à l'aide d'un exemple approprié.