menuMDUIDocs
color_lens
mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Menu

Les menus sont divisés en menus simples et menus en cascade. Les menus simples conviennent aux appareils mobiles et aux tablettes, tandis que les menus en cascade conviennent aux ordinateurs de bureau.

Utilisation

  1. Appel via attributs
  2. Appel via JavaScript

Lecture associée

Guides Material Design : Composants - Menu

Style

Menu simple

Ajouter l'attribut disabled à un élément de menu peut désactiver cet élément.

Ajouter l'élément <li class="mdui-divider"></li> peut ajouter un séparateur.

codeplay_arrow
Exemple
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Menu simple avec icônes

codeplay_arrow
Exemple
<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Menu en cascade

Ajouter la classe .mdui-menu-cascade à l'élément <ul class="mdui-menu"> pour le transformer en menu en cascade adapté aux ordinateurs de bureau.

Des menus imbriqués peuvent être obtenus en ajoutant un autre menu à l'intérieur d'un élément <li class="mdui-menu-item"></li> ; cela prend théoriquement en charge un nombre illimité de niveaux d'imbrication.

L'élément <span class="mdui-menu-item-helper"></span> ajoute une courte description à un élément de menu.

L'élément <span class="mdui-menu-item-more"></span> ajoute une flèche orientée vers la droite à un élément de menu, utilisé sur les éléments de menu qui contiennent des sous-menus.

codeplay_arrow
Exemple
<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Utilisation

Appel via attributs

Avec cette approche, aucun code JavaScript n'a besoin d'être écrit. Il suffit d'ajouter l'attribut mdui-menu="options" à un élément de contrôle (par exemple, un bouton). Lors de l'appel via des attributs personnalisés, un paramètre supplémentaire target est requis pour spécifier le menu contrôlé ; sa valeur doit être le sélecteur CSS du menu contrôlé.

Remarque : pour garantir un positionnement correct, le menu et l'élément qui le déclenche doivent être des éléments frères sous le même parent.

codeplay_arrow
Exemple
<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>
codeplay_arrow
Exemple
<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Appel via JavaScript

Instancier le composant :

// anchorSelector représente le sélecteur CSS ou l'élément DOM de l'élément qui déclenche le menu
// menuSelector représente le sélecteur CSS ou l'élément DOM du menu
// options représente les paramètres de configuration du composant ; voir la liste des paramètres ci-dessous
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
Exécuter

Paramètre

NomTypeDéfautDescription
positionstringautoLa position du menu par rapport à l'élément qui le déclenche.
  • top : le menu est au-dessus de l'élément déclencheur.
  • bottom : le menu est en dessous de l'élément déclencheur.
  • center : le menu est verticalement centré dans la fenêtre.
  • auto : déterminer automatiquement la position. Priorité : bottom > top > center.
alignstringautoL'alignement du menu avec l'élément qui le déclenche.
  • left : le menu est aligné à gauche avec l'élément déclencheur.
  • right : le menu est aligné à droite avec l'élément déclencheur.
  • center : le menu est horizontalement centré dans la fenêtre.
  • auto : déterminer automatiquement la position. Priorité : left > right > center.
gutterint16L'espacement minimum entre le menu et la bordure de la fenêtre, en px.
fixedbooleanfalseLa méthode de positionnement du menu
  • true : le menu utilise un positionnement fixed. Lors du défilement de la page, le menu reste fixe et ne se déplace pas avec la barre de défilement.
  • false : le menu utilise un positionnement absolute. Lors du défilement de la page, le menu se déplace avec la page.
coveredbooleanautoSi le menu recouvre l'élément qui le déclenche.
  • true : superposer le menu au-dessus de l'élément déclencheur.
  • false : ne pas superposer le menu sur l'élément déclencheur.
  • auto : les menus simples recouvrent l'élément déclencheur, tandis que les menus en cascade ne le font pas.
subMenuTriggerstringhoverLa méthode de déclenchement des sous-menus.
  • click : déclencher le sous-menu au clic.
  • hover : déclencher le sous-menu au survol de la souris.
subMenuDelayint200Le délai de déclenchement des sous-menus (en millisecondes) ; ce paramètre n'est valide que lorsque subMenuTrigger est défini sur hover.

Méthode

Nom de méthodeDescription
open()Ouvrir le menu.
close()Fermer le menu.
toggle()Basculer l'état ouvert du menu.

Événement

Nom de l'événementDescriptionCibleParamètres
open.mdui.menuDéclenché lorsque le menu commence son animation d'ouverture.<ul class="mdui-menu"></ul>event._detail.inst : instance
opened.mdui.menuDéclenché lorsque le menu termine son animation d'ouverture.
close.mdui.menuDéclenché lorsque le menu commence son animation de fermeture.
closed.mdui.menuDéclenché lorsque le menu termine son animation de fermeture.

Classes CSS

Nom de classeDescription
.mdui-menuDéfinir un composant de menu.
.mdui-menu-cascadeDéfinir un menu en cascade.
.mdui-menu-itemDéfinir un élément de menu.
.mdui-menu-item-iconDéfinir une icône de menu.
.mdui-menu-item-helperDéfinir le texte d'aide d'un élément de menu.
.mdui-menu-item-moreLa flèche orientée vers la droite pour les éléments de menu avec sous-menus.
arrow_backPrevious
Boîte de dialogue
arrow_forwardNext
Progression