O webu
Kontextová nabídka s menuitem

Stručně řečeno umí značka <menuitem> vytvořit nabídku, která se objeví po stisknutí pravého tlačítka myši, bez nutnosti používat JavaScript.

Kontextová nabídka v JavaScriptu je popsána v samostatném článku.

Podpora

Zatím funguje jen ve Firefoxu (od verse 8).

Nativní vlastní kontextová nabídka ve Firefoxu

Zápis

Nejjednodušší příklad, který vytvoří kontextové menu o jedné položce, vypadá následovně.

<menu type="context" id="kontextove-menu">
  <menuitem label="Popisek" onclick="alert(1)">
  </menuitem>
</menu>
  • Jako obal se používá stará dobrá značka <menu>.
  • Atribut type nastavený na context určuje, že se jedná o kontextovou nabídku, což v podporovaných prohlížečích skryje vnitřek <menu>.
  • Identifikátor (id) je důležitý pro pozdější navázání kontextové nabídky ke kontextu (nějakému elementu, kde se má menu zobrazit).

Připojení k elementu

<div contextmenu="kontextove-menu">
  Obsah
</div>

Živá ukázka (funkční ve Firefoxu 8+)

Element <menuitem> má řadu atributů.

label

Popisek nabídky.

onclick

JavaScriptová akce, co se provede po kliknutí. Kvůli přehlednosti je lepší volat nějakou funkci než přímo od atributu psát složitější JS kód.

icon

URL ikonky pro danou akci.

disabled

Deaktivuje položku.

Více úrovní

Do značky <menu> se dajší zanořovat další <menu>. Když se vnořené značce <menu> přidá atribut label, její obsah se stane nižší úrovní.

<menu type="context" id="kontextove-menu">
  <menu label="Více">
    <menuitem label="Popisek" onclick="alert(1)">
    </menuitem>
  </menu>
</menu>
Vnořená kontextová nabídka ve Firefoxu

Živá ukázka

Oddělení nabídek

Použitím <menu> bez label atributu potom může vzniknout nová sekce oddělená vodorovným rámečkem.

Oddělení nabídek ve Firefoxu

<menu type="context" id="kontextove-menu">
  <menu>
    <menuitem label="Popisek" onclick="alert(1)">
    </menuitem>
  </menu>
  <menu>
    <menuitem label="Popisek oddělený" onclick="alert(1)">
    </menuitem>
  </menu>
</menu>

Živá ukázka

Odkazy jinam