Comment créer un menu déroulant dans la barre de navigation html ? Voici des exemples de code détaillés

Cet article présente la production du menu déroulant de la barre de navigation HTML. Le code de tous les menus déroulants des barres de navigation est donné au début de l'article. Si vous ne comprenez pas, il y a une explication détaillée ci-dessous. Jetons un coup d'œil ensemble à cet article

Ce dont nous allons parler, c'est de la production du menu déroulant de la barre de navigation HTML. Regardons d'abord un exemple de code complet :

<style>
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<div class="dropdown">
  <span>php中文网</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
</div>

Tout le monde peut-il comprendre ce code ?

Ce n’est pas grave si vous ne comprenez pas. Il y a une explication. Vous comprendrez après l’explication.

Exemple d'analyse du menu de la barre de navigation html :

Partie HTML du menu de la barre de navigation html :

Nous pouvons utiliser n'importe quel Élément HTML pour ouvrir un menu déroulant, tel que ou un élément

Utilisez des éléments conteneurs (tels que

) pour créer le contenu du menu déroulant et placez-le où vous le souhaitez.

Utilisez l'élément

pour envelopper ces éléments et utilisez CSS pour styliser le contenu de la liste déroulante.

Partie CSS du menu de la barre de navigation HTML :

La classe .dropdown utilise position:relative, qui définira le contenu du menu déroulant à placer sur le bouton déroulant (en utilisant position:absolute ) dans le coin inférieur droit. Dans la classe

.dropdown-content se trouve le menu déroulant actuel. Il est masqué par défaut et sera affiché une fois que la souris se déplacera vers l'élément spécifié. Notez que la valeur min-width est définie sur 160px. Vous pouvez le modifier à votre guise. Remarque : Si vous souhaitez que le contenu de la liste déroulante ait la même largeur que le bouton déroulant, définissez la largeur sur 100 % (le paramètre overflow:auto peut défiler sur les petits écrans).

Nous utilisons l'attribut box-shadow pour faire ressembler le menu déroulant à une "carte".

 : le sélecteur de survol permet d'afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.

Après avoir lu l'explication, vous comprenez un peu maintenant ? Apportez ces explications au code ci-dessus et vous comprendrez.

Jetons maintenant un coup d'œil à l'effet du code ci-dessus affiché dans le navigateur :

C'est par défaut et ne peut pas être vu du tout, c'est comme du texte, mais quand vous déplacez la souris vers le haut, cela change :

Regardez, c'est l'effet du code, avec une liste déroulante dans la barre de navigation et une navigation invisible La barre ne réagira que lorsque la souris sera déplacée vers le haut.

Il s'agit d'une simple création du menu déroulant de la barre de navigation. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

【Recommandation de l'éditeur】

Comment définir le défilement de l'image dans la balise de sélection HTML ? Exemple de code de défilement d'image de balise de sélection

Comment définir la couleur de la police en html ? Introduction à la façon de définir la couleur de la police en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!