menuMDUIDocs
color_lens
È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Menu

I menu si dividono in menu semplici e menu a cascata. I menu semplici sono adatti per telefoni e tablet, mentre quelli a cascata sono più adatti ai dispositivi desktop.

Modalità d'uso

  1. Chiamata via attributi
  2. Chiamata via JavaScript

Letture correlate

Linee guida di Material Design: Componenti - Menu

Stile

Menu semplice

Aggiungi l'attributo disabled a un elemento del menu per disabilitarlo.

Aggiungi l'elemento <li class="mdui-divider"></li> per aggiungere un divisore.

codeplay_arrow
Esempio
<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 semplice con icone

codeplay_arrow
Esempio
<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 a cascata

All'elemento <ul class="mdui-menu"> aggiungi la classe .mdui-menu-cascade per trasformare il menu in un menu a cascata adatto ai dispositivi desktop.

È possibile ottenere l'annidamento dei menu aggiungendo altri menu all'interno dell'elemento <li class="mdui-menu-item"></li>; teoricamente, supporta l'annidamento illimitato.

L'elemento <span class="mdui-menu-item-helper"></span> aggiunge una breve descrizione all'elemento del menu.

L'elemento <span class="mdui-menu-item-more"></span> aggiunge una freccia rivolta a destra all'elemento del menu, usata per gli elementi che contengono sottomenu.

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

Modalità d'uso

Chiamata via attributi

Usando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere l'attributo mdui-menu="options" a un elemento di controllo (ad esempio: un pulsante). Quando si chiama tramite attributi personalizzati, è necessario aggiungere un parametro aggiuntivo target per specificare il menu controllato; il valore è il selettore CSS del menu controllato.

Nota: affinché il menu sia posizionato correttamente, il menu e l'elemento che lo attiva devono trovarsi allo stesso livello sotto lo stesso elemento padre.

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

Chiamata via JavaScript

Istanziazione del componente:

// anchorSelector indica il selettore CSS o l'elemento DOM dell'elemento che attiva il menu
// menuSelector indica il selettore CSS o l'elemento DOM del menu
// options indica i parametri di configurazione del componente, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Menu(anchorSelector, menuSelector, options);
Esegui

Parametro

NomeTipoPredefinitoDescrizione
positionstringautoLa posizione del menu rispetto all'elemento che lo attiva.
  • top: il menu si trova sopra l'elemento che lo attiva.
  • bottom: il menu si trova sotto l'elemento che lo attiva.
  • center: il menu è centrato verticalmente nella finestra.
  • auto: determina automaticamente la posizione. La priorità è: bottom > top > center.
alignstringautoAllineamento del menu con l'elemento che lo attiva.
  • left: il menu è allineato a sinistra con l'elemento che lo attiva.
  • right: il menu è allineato a destra con l'elemento che lo attiva.
  • center: il menu è centrato orizzontalmente nella finestra.
  • auto: determina automaticamente la posizione, la priorità è: left > right > center.
gutterint16Distanza minima tra il menu e il bordo della finestra, in px.
fixedbooleanfalseMetodo di posizionamento del menu
  • true: il menu usa il posizionamento fixed. Durante lo scorrimento della pagina, il menu rimarrà in una posizione fissa nella finestra e non scorrerà con la barra di scorrimento.
  • false: il menu usa il posizionamento absolute. Durante lo scorrimento della pagina, il menu scorrerà insieme alla pagina.
coveredbooleanautoSe il menu copre l'elemento che lo attiva.
  • true: fa sì che il menu copra l'elemento che lo attiva.
  • false: fa sì che il menu non copra l'elemento che lo attiva.
  • auto: il menu semplice copre l'elemento che lo attiva. Il menu a cascata non copre l'elemento che lo attiva.
subMenuTriggerstringhoverMetodo di attivazione del sottomenu.
  • click: attiva il sottomenu al clic.
  • hover: attiva il sottomenu al passaggio del mouse.
subMenuDelayint200Tempo di ritardo per l'attivazione del sottomenu (in millisecondi); questo parametro è valido solo quando subMenuTrigger è impostato su hover.

Metodo

Nome metodoDescrizione
open()Apri il menu.
close()Chiudi il menu.
toggle()Alterna lo stato di apertura del menu.

Evento

Nome eventoDescrizioneTargetParametri
open.mdui.menuL'evento verrà attivato all'inizio dell'animazione di apertura del menu.<ul class="mdui-menu"></ul>event._detail.inst: istanza
opened.mdui.menuL'evento verrà attivato alla fine dell'animazione di apertura del menu.
close.mdui.menuL'evento verrà attivato all'inizio dell'animazione di chiusura del menu.
closed.mdui.menuL'evento verrà attivato alla fine dell'animazione di chiusura del menu.

Elenco classi CSS

Nome classeDescrizione
.mdui-menuDefinisci un componente menu.
.mdui-menu-cascadeDefinisci un menu a cascata.
.mdui-menu-itemDefinisci un elemento del menu.
.mdui-menu-item-iconDefinisci un'icona del menu.
.mdui-menu-item-helperDefinisci il testo di aiuto del menu.
.mdui-menu-item-moreFreccia rivolta a destra per elementi del menu con sottomenu.
arrow_backPrevious
Dialog
arrow_forwardNext
Progress