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
  • exemple de Blogspot
• 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

Exemples avec Javascript+JQuery   (→ 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".