LabEx
EntrerRejoindre

Créer un menu déroulant interactif en CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS en créant un menu déroulant. Le but de ce laboratoire est de vous aider à comprendre comment utiliser CSS pour créer des menus interactifs qui apparaissent au survol ou au focus. À la fin de ce laboratoire, vous aurez une compréhension solide de la manière d'utiliser CSS pour créer des interfaces utilisateur dynamiques.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 92%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour afficher un menu déroulant interactif au survol/au focus, suivez ces étapes :

  1. Utilisez left: 100% dans le CSS pour positionner le menu déroulant à droite de l'élément parent.
  2. Utilisez visibility: hidden au lieu de display: none pour cacher initialement le menu déroulant, afin de permettre l'application de transitions.
  3. Appliquez les sélecteurs de pseudo-classes :hover, :focus et :focus-within à l'élément parent pour afficher le menu déroulant lorsqu'il est survolé/focusé.
  4. Utilisez le code HTML et CSS suivant :

HTML :

<div class="reference" tabindex="0">
  <div class="popout-menu">Menu déroulant</div>
</div>

CSS :

.reference {
  position: relative;
  background: tomato;
  width: 100px;
  height: 80px;
}

.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #9C27B0;
  color: white;
  padding: 16px;
}

.reference:hover >.popout-menu,
.reference:focus >.popout-menu,
.reference:focus-within >.popout-menu {
  visibility: visible;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire Menu déroulant. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.