A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Menü

A menük egyszerű menükre és kaszkád menükre oszlanak. Az egyszerű menük mobilra és táblagépre, a kaszkád menük asztali eszközökre alkalmasak.

Használat

Hívás egyéni attribútumokkal
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Menü

Stílus

Egyszerű menü

A disabled attribútum hozzáadása egy menüponthoz letiltja azt.

Az <li class="mdui-divider"></li> elem hozzáadásával elválasztóvonalat szúrhatsz be.

Példa

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

Egyszerű menü ikonokkal

Példa

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

Kaszkád menü

A .mdui-menu-cascade osztály hozzáadása az <ul class="mdui-menu"> elemhez kaszkád menüvé alakítja azt asztali eszközökhöz.

A menük egymásba ágyazhatók további menük hozzáadásával a <li class="mdui-menu-item"></li> elemen belül, elméletileg végtelen szintű beágyazást támogatva.

<span class="mdui-menu-item-helper"></span> elem rövid leírást ad a menüponthoz.

<span class="mdui-menu-item-more"></span> elem egy jobbra mutató nyilat ad a menüponthoz, almenüt tartalmazó elemeknél használatos.

Példa

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

Használat

Hívás egyéni attribútumokkal

Ezzel a módszerrel nem kell JavaScript kódot írni. Csak adjon hozzá egy mdui-menu="options" attribútumot egy vezérlőelemhez (például egy gombhoz). Egyéni attribútumokon keresztüli híváskor egy extra target paraméterre van szükség a vezérelt menü megadásához, amelynek értéke a menü CSS-szelektora.

Megjegyzés: A menü megfelelő pozicionálásához a menünek és a kiváltó elemnek ugyanazon szülőelem alatt, azonos szinten kell lenniük.

Példa

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

Példa

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

JavaScript segítségével történő hívás

Komponens példányosítása:

// anchorSelector a menüt kiváltó elem CSS-szelektora vagy DOM eleme
// menuSelector a menü CSS-szelektora vagy DOM eleme
// options a komponens konfigurációs paramétereit jelenti, lásd az alábbi paraméterlistát
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`position`	`string`	`auto`	A menü helyzete a kiváltó elemhez képest. `top`: A menü a kiváltó elem felett van. `bottom`: A menü a kiváltó elem alatt van. `center`: A menü függőlegesen középre van igazítva az ablakban. `auto`: Automatikus helyzetmeghatározás. Prioritás: `bottom` > `top` > `center`.
`align`	`string`	`auto`	A menü igazítása a kiváltó elemhez képest. `left`: A menü balra van igazítva a kiváltó elemhez. `right`: A menü jobbra van igazítva a kiváltó elemhez. `center`: A menü vízszintesen középre van igazítva az ablakban. `auto`: Automatikus helyzetmeghatározás. Prioritás: `left` > `right` > `center`.
`gutter`	`int`	`16`	A menü és az ablak széle közötti minimális távolság pixelben.
`fixed`	`boolean`	`false`	A menü pozicionálási módja. `true`: A menü fix (fixed) pozicionálást használ. Oldalgörgetéskor a menü az ablak fix helyén marad. `false`: A menü abszolút (absolute) pozicionálást használ. Oldalgörgetéskor a menü az oldallal együtt görög.
`covered`	`boolean`	`auto`	A menü eltakarja-e a kiváltó elemet. `true`: A menü eltakarja a kiváltó elemet. `false`: A menü nem takarja el a kiváltó elemet. `auto`: Az egyszerű menü eltakarja, a kaszkád menü nem takarja el a kiváltó elemet.
`subMenuTrigger`	`string`	`hover`	Az almenü kiváltásának módja. `click`: Kattintásra nyílik az almenü. `hover`: Egér fölé vitelre nyílik az almenü.
`subMenuDelay`	`int`	`200`	Az almenü megjelenítésének késleltetése (ezredmásodpercben), csak a subMenuTrigger: hover esetén érvényes.

Metódus

Metódus neve	Leírás
`open()`	Menü megnyitása.
`close()`	Menü bezárása.
`toggle()`	A menü nyitott állapotának váltása.

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.menu`	Esemény, ami a menü nyitási animációjának kezdetekor váltódik ki.	`<ul class="mdui-menu"></ul>`	`event._detail.inst`: Példány
`opened.mdui.menu`	Esemény, ami a menü nyitási animációjának végén váltódik ki.
`close.mdui.menu`	Esemény, ami a menü zárási animációjának kezdetekor váltódik ki.
`closed.mdui.menu`	Esemény, ami a menü zárási animációjának végén váltódik ki.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-menu`	Menü komponens definiálása.
`.mdui-menu-cascade`	Kaszkád menü definiálása.
`.mdui-menu-item`	Menüpont definiálása.
`.mdui-menu-item-icon`	Menü ikonjának definiálása.
`.mdui-menu-item-helper`	Segédszöveg definiálása a menühöz.
`.mdui-menu-item-more`	Jobbra mutató nyíl az almenüt tartalmazó menüpontokhoz.

Párbeszédablak

Folyamatjelző