Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Menü

Menüler basit menüler ve kademeli (cascading) menüler olarak ikiye ayrılır. Basit menüler telefonlar ve tabletler için uygundur, kademeli menüler ise masaüstü cihazlar için uygundur.

Kullanım

Öznitelik ile Çağır
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Menü

Stil

Basit menü

Bir menü öğesini devre dışı bırakmak için menü öğesine disabled özniteliği eklenebilir.

Bir ayırıcı eklemek için <li class="mdui-divider"></li> öğesi eklenebilir.

Örnek

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

Simgeli basit menü

Örnek

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

Kademeli menü

<ul class="mdui-menu"> öğesine .mdui-menu-cascade sınıfı eklenerek menü masaüstü cihazlar için uygun bir kademeli menüye dönüştürülebilir.

Bir <li class="mdui-menu-item"></li> öğesinin içine başka bir menü eklenerek menü yuvalama yoluyla gerçekleştirilebilir, teknik olarak sınırsız seviyede yuvalama desteklenir.

<span class="mdui-menu-item-helper"></span> öğesi, menü öğesine kısa bir açıklama ekler.

<span class="mdui-menu-item-more"></span> öğesi, menü öğesine sağa doğru bir ok ekler; bu, alt menü içeren menü öğelerinde kullanılır.

Örnek

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

Kullanım

Öznitelik ile Çağır

Bu yöntemle JavaScript kodu yazmanıza gerek kalmaz. Sadece kontrol görevi gören bir öğeye (örneğin bir buton) mdui-menu="options" özniteliği eklemeniz yeterlidir. Özel öznitelikler aracılığıyla çağrılırken, kontrol edilecek menüyü belirtmek için ek bir target parametresi eklenmelidir; değeri, kontrol edilen menünün CSS seçicisi olmalıdır.

Not: Menünün doğru konumlanabilmesi için, menü ve menüyü tetikleyen öğe aynı üst öğe altında aynı seviyede bulunmalıdır.

Örnek

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

Örnek

<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 ile Çağır

Bileşeni örnekleme:

// anchorSelector, menüyü tetikleyen öğenin CSS seçicisini veya DOM öğesini temsil eder
// menuSelector, menünün CSS seçicisini veya DOM öğesini temsil eder
// options, bileşen yapılandırma parametrelerini temsil eder, aşağıdaki parametre listesine bakın
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`position`	`string`	`auto`	Menünün kendisini tetikleyen öğeye göre konumu. `top`: Menü, onu tetikleyen öğenin üzerindedir. `bottom`: Menü, onu tetikleyen öğenin altındadır. `center`: Menü, pencerede dikey olarak ortalanır. `auto`: Konumu otomatik olarak belirler. Öncelik sırası: `bottom` > `top` > `center`.
`align`	`string`	`auto`	Menünün kendisini tetikleyen öğeyle hizalanma biçimi. `left`: Menü, tetikleyen öğeyle sola hizalıdır. `right`: Menü, tetikleyen öğeyle sağa hizalıdır. `center`: Menü, pencerede yatay olarak ortalanır. `auto`: Konumu otomatik olarak belirler, öncelik sırası: `left` > `right` > `center`.
`gutter`	`int`	`16`	Menü ile pencere kenarı arasında bırakılacak minimum mesafe (px cinsinden).
`fixed`	`boolean`	`false`	Menünün konumlandırma yöntemi `true`: Menü "fixed" konumlandırma kullanır. Sayfa kaydırıldığında menü pencerede sabit konumda kalır, kaydırma çubuğuyla birlikte hareket etmez. `false`: Menü "absolute" konumlandırma kullanır. Sayfa kaydırıldığında menü sayfayla birlikte kayar.
`covered`	`boolean`	`auto`	Menünün kendisini tetikleyen öğenin üzerine binip binmeyeceği. `true`: Menünün tetikleyen öğeyi örtmesini sağlar. `false`: Menünün tetikleyen öğeyi örtmemesini sağlar. `auto`: Basit menüler tetikleyen öğeyi örter. Kademeli menüler tetikleyen öğeyi örtmez.
`subMenuTrigger`	`string`	`hover`	Alt menülerin tetiklenme yöntemi. `click`: Alt menüyü tıklamayla tetikler. `hover`: Alt menüyü fareyle üzerine gelindiğinde tetikler.
`subMenuDelay`	`int`	`200`	Alt menü tetikleme gecikme süresi (milisaniye cinsinden), sadece subMenuTrigger: hover olduğunda geçerlidir.

Yöntem

Yöntem Adı	Açıklama
`open()`	Menüyü açar.
`close()`	Menüyü kapatır.
`toggle()`	Menünün açık durumunu değiştirir (açıksa kapatır, kapalıysa açar).

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.menu`	Menü açılma animasyonu başladığında olay tetiklenir.	`<ul class="mdui-menu"></ul>`	`event._detail.inst`: Örnek
`opened.mdui.menu`	Menü açılma animasyonu bittiğinde olay tetiklenir.
`close.mdui.menu`	Menü kapanma animasyonu başladığında olay tetiklenir.
`closed.mdui.menu`	Menü kapanma animasyonu bittiğinde olay tetiklenir.

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-menu`	Bir menü bileşeni tanımlar.
`.mdui-menu-cascade`	Kademeli menü tanımlar.
`.mdui-menu-item`	Menü öğesi tanımlar.
`.mdui-menu-item-icon`	Menü simgesi tanımlar.
`.mdui-menu-item-helper`	Menü için yardımcı metin tanımlar.
`.mdui-menu-item-more`	Alt menü içeren menü öğeleri için sağa bakan ok.

Diyalog

İlerleme Çubuğu