Comment créer un menu déroulant CSS pur ?

Création d'un menu déroulant CSS pur

Dans le domaine de la conception Web, la possibilité de créer un menu de navigation transparent et convivial est primordial. Parmi les différents styles de menu, les menus déroulants se distinguent par leur capacité à organiser et à afficher avec élégance les options de navigation. Cet article se penchera sur l'art complexe de la création d'un menu déroulant CSS pur qui est non seulement fonctionnel mais aussi visuellement captivant.

Structure HTML

La structure HTML d'un le menu déroulant de base est relativement simple. Nous commençons par une liste non ordonnée (

) qui sert de conteneur pour nos éléments de menu. Dans la liste, chaque élément de menu est représenté par un élément de liste (
• ).

  Exemple HTML :

  Style CSS

  Pour transformer la structure HTML en un menu déroulant fonctionnel, nous utilisons le CSS suivant styles :

  ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  ul li {
    display: block;
    position: relative;
    float: left;
  }
  
  li ul {
    display: none;
  }
  
  ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
  }
  
  ul li a:hover {
    background: #617F8A;
  }
  
  li:hover ul {
    display: block;
    position: absolute;
  }
  
  li:hover li {
    float: none;
    font-size: 11px;
  }
  
  li:hover a {
    background: #617F8A;
  }
  
  li:hover li a:hover {
    background: #95A9B1;
  }

  Comment ça marche

  Le style initial définit l'apparence générale du menu, y compris la police, la marge et le remplissage. La propriété d'affichage par défaut est définie sur block pour les éléments li, leur permettant d'apparaître horizontalement. Les sous-menus déroulants sont initialement masqués en définissant leur propriété d'affichage sur none.

  L'état de survol est défini pour afficher les sous-menus en utilisant position : absolue, en les alignant sous leurs éléments parents. De plus, les éléments li et a du sous-menu héritent de styles pour conserver une apparence cohérente. Le survol des éléments du sous-sous-menu déclenche un nouveau changement de couleur d'arrière-plan.

  Conclusion

  La création d'un menu déroulant CSS pur implique une structuration HTML minutieuse et un style CSS réfléchi. En maîtrisant ces techniques, les concepteurs Web peuvent libérer la puissance de menus de navigation élégants et fonctionnels qui améliorent l'expérience utilisateur et mettent en valeur leur créativité.

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!