tRikSonic
Tema

HTML menu Tag

Terakhir diperbarui : 22 Mei 2018 - 06.27

Tutorial HTML <menu>

Element HTML menu mendefinisikan sebuah instance dari sebuah menu yang dirancang untuk membuat menu pop-up kontekstual (menu yang keluar saat klik kanan) yang berisi daftar perintah.
Catatan : Periksa kembali table browser support mengenai element <menu> ini
Penting : : element ini telah dihapus dari standarisasi HTML Web, dan dalam proses penjatuhan. Meskipun beberapa browser masih menampilkannya dengan baik, disarankan untuk tidak menggunakannya, karena element ini bisa tidak berfungsi kapan saja.
Tips : sebagai gantinya penggunaan JavaScript bisa menjadi alternative

Contoh HTML <menu>

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="reload();"></menuitem>
  <menu label="Bagikan">
    <menuitem label="Twitter" onclick="twitter();"></menuitem>
    <menuitem label="Facebook" onclick="facebook();"></menuitem>
  </menu>
  <menuitem label="Alert 1" onclick="alert('alert 1')"></menuitem>
  <menuitem label="Alert 2" onclick="alert('alert 2')"></menuitem>
</menu>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
div {
  background: #ffd5dd;
  border: 1px solid #e48a9c;
  padding: 10px;
  border-radius: 5px;
}
</style>
</head>
<body>

<div contextmenu="mymenu">
<p>Klik kanan diarea ini</p>

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="reload();"></menuitem>
  <menu label="Bagikan">
    <menuitem label="Twitter" onclick="twitter();"></menuitem>
    <menuitem label="Facebook" onclick="facebook();"></menuitem>
  </menu>
  <menuitem label="Alert 1" onclick="alert('alert 1')"></menuitem>
  <menuitem label="Alert 2" onclick="alert('alert 2')"></menuitem>
</menu>

</div>

<script>
function reload() {
  window.location.reload()
}

function twitter() {
  window.open("https://twitter.com/intent/tweet?text=" + window.location.href)
}

function facebook() {
  window.open("https://facebook.com/sharer/sharer.php?u=" + window.location.href)
}
</script>

<p>
 Perhatikan Table browser support element ini
</p>

</body>
</html>

Attribute HTML <menu>

label
Attribute ini digunakan untuk menentukan nama atau judul yang akan ditampilkan. Attribute ini hanya untuk menu bersarang (nested menus).
type
Attribute ini digunakan untuk menentukan jenis menu yang akan ditampilkan.

Global Attributes:

Element <menu> mencakup Global Attributes HTML.

Event Attributes:

Element <menu> mencakup Event Attributes HTML.

Browser Support HTML <menu>:

ChromeTidak
SafariTidak
Firefox8
OperaTidak
IETidak
Edge?
Table Info
  • Nilai pada table menentukan versi minimal browser
  • ? tidak diketahui

Default CSS :

Browser yang support dengan element <menu>, mempunyai nilai default :
menu {
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.