Comment créer un menu déroulant avec CSS et JavaScript

Dans ce didacticiel, vous apprendrez à créer un menu déroulant simple avec JavaScript, HTML et CSS vanille. Nous allons parcourir le code HTML, CSS et Javascript, mais en accordant plus d'attention à la programmation, puisqu'il s'agit d'un tutoriel JS. Nous n'utiliserons que du JS et du CSS simples, sans framework ni préprocesseur. La seule (sorte-de) exception sera l'importation du fichier CSS Font Awesome car nous utiliserons l'une de ses icônes.

Ceci est destiné aux développeurs qui ont une compréhension moyenne de HTML, CSS et JS. J'ai essayé de le rendre aussi propre que possible, mais je ne me concentrerai pas trop sur les détails ici. J'espère que vous apprécierez tous.

Captures d'écran

Voici à quoi ressemble le résultat du code:

Écran initial:

Liste déroulante ouverte:

Liste déroulante avec option sélectionnée:

HTML:

Dans cette section, nous discuterons de l'implémentation du code HTML pour la page de démonstration. Pour commencer, voyons le code

      Dropdown Example   

Il s'agit essentiellement d'un passe-partout HTML, à l'exception des linkbalises chargeant les deux feuilles de style CSS que nous utiliserons dans ce didacticiel: les styles Font Awesome et le styles.cssfichier, dans lequel nous définirons les styles de cette page.

Ensuite, il y a le reste du fichier HTML, le corps:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...   

Cette section peut être divisée en 3 parties principales:

  • Le .dropdowndiv, où la structure de l'élément déroulant sera définie.
  • L' #resultélément, qui contiendra l'option sélectionnée par l'utilisateur, à partir de l'élément déroulant.
  • Le script écrit dans la balise. Son implémentation est ici cachée, car ses détails seront expliqués dans la dernière section de ce tutoriel.

L'élément déroulant est un divcontenant des éléments titleet menu. Le premier définit simplement quel texte sera présenté sur l'élément avant qu'une option ne soit sélectionnée et le second définira les options qui seront sélectionnables par l'élément.

L' resultélément est là juste pour vous montrer quelle option est actuellement sélectionnée.

Modes:

Ci-dessous, vous pouvez consulter le code css complet. Comme vous pouvez le voir, il utilise CSS3 transitionet des transformconstructions.

Veuillez prêter attention aux .dropdowndéfinitions des classes. Ils sont utilisés pour définir la disposition du composant conteneur déroulant ainsi que ses éléments internes, tels que le .titleet ses .option.

body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }

JavaScript:

Nous allons maintenant voir comment la partie Javascript est implémentée. Nous allons d'abord passer en revue les définitions de fonction, puis le code qui appelle ces fonctions pour que les actions de liste déroulante se produisent.

Fondamentalement, il y a 3 actions qui ont lieu en fonction de ce qu'est l'interaction de l'utilisateur, car leurs écouteurs sont ajoutés aux éléments DOM:

  1. En cliquant sur l'élément déroulant
  2. Sélection d'une des options de liste déroulante
  3. Modification de l'option actuellement sélectionnée

Je tiens à préciser que nous utilisons les fonctions fléchées ( () => {}) et le constmot - clé, qui sont des fonctionnalités ES6. Vous êtes probablement bon si vous utilisez une version récente de votre navigateur, mais gardez cela à l'esprit.

1. En cliquant sur l'élément déroulant

function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }

Lorsque vous cliquez sur l'élément déroulant, il s'ouvre (s'il est fermé) ou se ferme (s'il est ouvert). Cela se produit en se liant toggleMenuDisplayà l'écouteur d'événement de clic sur l'élément déroulant. Cette fonction bascule l'affichage de son menuélément par l'utilisation des fonctions toggleDisplayet toggleClass.

2. Sélection d'une des options de liste déroulante

function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }

3. Modification de l'option actuellement sélectionnée

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

La fonction handleTitleChangeest liée à l' changeévénement personnalisé sur l' .titleélément, pour modifier le #resultcontenu de l' élément chaque fois que l'élément title change. Le déclenchement de cet événement se fait sur la section précédente.

Code principal

//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

Dans la section principale, il y a juste un code simple pour obtenir le titre de la liste déroulante et les éléments d'options pour leur lier les événements discutés dans la dernière section.

Démo

Le code complet et la démo de cette application sont disponibles ici.

More Information

  • ES6 introduction
  • Arrow functions
  • Let and Const