Moderní tvorba webových aplikací

O webu

Kontextová nabídka <menuitem>

HTML značka <menuitem> umožňuje vytvořit nativní kontextovnou nabídku.

4 minuty

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

Související články

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Query string v URL

Řetězec dotazu je část URL za otazníkem obsahující nejrůznější parametry.

10 minut

HTML atribut download

HTML atribut download zlepšuje uživatelský dojem ze stahovaného souboru.

3 minuty

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025