Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Menü

Menüs lassen sich in einfache Menüs und kaskadierende Menüs gliedern. Einfache Menüs eignen sich für Smartphones und Tablets, kaskadierende Menüs für Desktop-Geräte.

Verwendung

Aufruf über Attribute
Aufruf über JavaScript

Stil

Einfaches Menü

Durch Hinzufügen des Attributs disabled zu einem Menüpunkt kann dieser deaktiviert werden.

Durch Hinzufügen des <li class="mdui-divider"></li>-Elements kann ein Divider hinzugefügt werden.

Beispiel

<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>

Einfaches Menü mit Icons

Beispiel

<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>

Kaskadierendes Menü

Durch Hinzufügen der Klasse .mdui-menu-cascade zum Element <ul class="mdui-menu"> wird das Menü zu einem kaskadierenden Menü für Desktop-Geräte.

Durch Hinzufügen eines weiteren Menüs innerhalb eines <li class="mdui-menu-item"></li>-Elements können Menüs verschachtelt werden. Theoretisch werden unendlich viele Verschachtelungsebenen unterstützt.

Das Element <span class="mdui-menu-item-helper"></span> fügt einem Menüpunkt eine kurze Beschreibung hinzu.

Das Element <span class="mdui-menu-item-more"></span> fügt einem Menüpunkt einen nach rechts weisenden Pfeil hinzu, der bei Menüpunkten mit Untermenüs verwendet wird.

Beispiel

<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>

Verwendung

Aufruf über Attribute

Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach das Attribut mdui-menu="options" zu einem steuernden Element (z. B. einem Button) hinzu. Bei Verwendung benutzerdefinierter Attribute ist ein zusätzlicher Parameter target erforderlich, um das zu steuernde Menü anzugeben. Sein Wert ist der CSS-Selektor des zu steuernden Menüs.

Hinweis: Damit das Menü korrekt positioniert werden kann, müssen sich das Menü und das Element, das das Menü auslöst, auf derselben Ebene unter demselben Elternelement befinden.

Beispiel

<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>

Beispiel

<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>

Aufruf über JavaScript

Instanziierung der Komponente:

// anchorSelector stellt den CSS-Selektor oder das DOM-Element des Elements dar, das das Menü auslöst
// menuSelector stellt den CSS-Selektor oder das DOM-Element des Menüs dar
// options stellt die Konfigurationsparameter der Komponente dar, siehe die Parameterliste unten
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Ausführen

Parameter

Parametername	Typ	Standardwert	Beschreibung
`position`	`string`	`auto`	Die Position des Menüs im Verhältnis zu dem Element, das es auslöst. `top`: Das Menü befindet sich oberhalb des auslösenden Elements. `bottom`: Das Menü befindet sich unterhalb des auslösenden Elements. `center`: Das Menü ist vertikal im Fenster zentriert. `auto`: Beurteilt die Position automatisch. Die Priorität lautet: `bottom` > `top` > `center`.
`align`	`string`	`auto`	Die Ausrichtung des Menüs im Verhältnis zu dem Element, das es auslöst. `left`: Das Menü ist linksbündig mit dem auslösenden Element ausgerichtet. `right`: Das Menü ist rechtsbündig mit dem auslösenden Element ausgerichtet. `center`: Das Menü ist horizontal im Fenster zentriert. `auto`: Beurteilt die Position automatisch. Die Priorität lautet: `left` > `right` > `center`.
`gutter`	`int`	`16`	Wie viel Abstand das Menü mindestens zum Fensterrand halten soll, in px.
`fixed`	`boolean`	`false`	Art der Positionierung des Menüs `true`: Das Menü verwendet fixed-Positionierung. Beim Scrollen der Seite bleibt das Menü an einer festen Position im Fenster und scrollt nicht mit der Bildlaufleiste mit. `false`: Das Menü verwendet absolute-Positionierung. Beim Scrollen der Seite scrollt das Menü mit der Seite mit.
`covered`	`boolean`	`auto`	Gibt an, ob das Menü das auslösende Element überdeckt. `true`: Das Menü überdeckt das auslösende Element. `false`: Das Menü überdeckt das auslösende Element nicht. `auto`: Einfache Menüs überdecken das auslösende Element. Kaskadierende Menüs überdecken das auslösende Element nicht.
`subMenuTrigger`	`string`	`hover`	Die Art und Weise, wie das Untermenü ausgelöst wird. `click`: Das Untermenü wird beim Klicken ausgelöst. `hover`: Das Untermenü wird beim Hovern mit der Maus ausgelöst.
`subMenuDelay`	`int`	`200`	Auslöseverzögerung des Untermenüs (in Millisekunden), dieser Parameter ist nur wirksam, wenn subMenuTrigger: hover ist.

Methode

Methodenname	Beschreibung
`open()`	Öffnet das Menü.
`close()`	Schließt das Menü.
`toggle()`	Schaltet den Öffnungszustand des Menüs um.

Ereignis

Ereignisname	Beschreibung	Ziel	Parameter
`open.mdui.menu`	Das Ereignis wird ausgelöst, wenn das Menü mit der Öffnungsanimation beginnt.	`<ul class="mdui-menu"></ul>`	`event._detail.inst`: Instanz
`opened.mdui.menu`	Das Ereignis wird ausgelöst, wenn das Menü die Öffnungsanimation beendet.
`close.mdui.menu`	Das Ereignis wird ausgelöst, wenn das Menü mit der Schließanimation beginnt.
`closed.mdui.menu`	Das Ereignis wird ausgelöst, wenn das Menü die Schließanimation beendet.

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-menu`	Definiert eine Menü-Komponente.
`.mdui-menu-cascade`	Definiert kaskadierende Menüs.
`.mdui-menu-item`	Definiert Menüpunkte.
`.mdui-menu-item-icon`	Definiert Menü-Icons.
`.mdui-menu-item-helper`	Definiert den Hilfetext des Menüs.
`.mdui-menu-item-more`	Nach rechts weisender Pfeil für Menüpunkte mit Untermenüs.

Dialog

Fortschrittsbalken

Menü

Verwendung

Verwandte Themen

Stil

Einfaches Menü

Einfaches Menü mit Icons

Kaskadierendes Menü

Verwendung

Aufruf über Attribute

Aufruf über JavaScript

Parameter

Methode

Ereignis

CSS-Klassenliste