Menus déroulants [dropdown, dropup, ...]

Exemples sans Javascript :

avec un seul niveau (un seul sous-menu)
- dropdown dont le code CSS a une présentation compatible avec les BPs listées dans ce cours
- W3Schools : dropdown, dropup ; voir aussi Tooltip pour un simple pop-up d'information
- exemple de Blogspot
- Notes :
  - l'élément Select de HTML est une sorte de "dropdown à un seul niveau, sans Javascript"
    mais il permet de sélectionner une valeur plutôt que de déclencher une action ;
    des règles CSS peuvent lui être associées (e.g., voir 1, 2, 3)
    MAIS aucun autre élément HTML ne peut être utilisé dans ses options.
  - l'élément Dialog de HTML (2024) est un pop-up qui peut être utilisé pour un menu déroulant
    (e.g., si son contenu est un élément Select) mais, comme il requiert généralement du Javascript
    pour sa gestion, est de nouveau référé ci-dessous.
avec plusieurs niveaux
- CodePen (versions dont le code CSS a une présentation compatible avec les BPs listées) : v1 (v1bis), v2
- plein d'autres
- Note : l'élément Select peut présenter une hiérarchie grâce à son sous-élément optgroup.

Exemples avec Javascript (+ JQuery généralement) (→ non utilisables dans le cours "Projet HTML") :

avec un seul niveau
- avec Bootstrap : cf. ces exemples de W3Schools à propos des menus déroulants de Bootstrap et
  cette page de Bootstrap ou sa reprise par CoreUI (avec versions pour Angular, React.js et Vue) ;
  attention, les sous-menus sont accessibles uniquement en cliquant, pas par survol [hovering]
avec plusieurs niveaux
- avec Bootstrap : exemple de W3schools
- exemple de Suckerfish
- exemples de dynamicdrive.com (multiples options ; possibilité de génération dynamique) : 1, 2, 3
- exemple de jqueryui.com (multiples options)
- exemple de css-tricks.com
- avec usage du nouvel attribut "popover" ou du nouvel élément "dialog" (2024) :
  - exemple de MDN avec popover
  Lire ce document pour comprendre i. les notions de "overlay", "modal", "inert", et
  ii. les spécificités de "popover" et "dialog" vis-à-vis de ces notions.
  Note : menus déroulants et menus d'affichage(+gestion) de structures arborescentes (e.g. 1) sont
  similaires mais l'affichage de ces derniers se fait généralement par expansion plutôt que par "pop-over"
- Exemples de "select multi-niveaux" : Select2, react-select-multi-level .