Html Sajian Tag
Tutorial HTML <menu>
Element HTML
menu mendefinisikan sebuah instance dari sebuah hidangan yang dirancang untuk menciptakan hidangan pop-up kontekstual (menu yang keluar ketika klik kanan) yang berisi daftar perintah.Catatan : Periksa kembali table browser support mengenai element
<menu> iniPenting : : element ini telah dihapus dari standarisasi HTML Web, dan dalam proses penjatuhan. Meskipun beberapa browser masih menampilkannya dengan baik, disarankan untuk tidak menggunakannya, alasannya ialah element ini dapat tidak berfungsi kapan saja.
Tips : sebagai gantinya penggunaan
JavaScript dapat menjadi alternativeContoh 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>
labelAttribute ini dipakai untuk memilih nama atau judul yang akan ditampilkan. Attribute ini hanya untuk hidangan bersarang (nested menus).
typeAttribute ini dipakai untuk memilih jenis hidangan yang akan ditampilkan.
Global Attributes:
Element <menu> meliputi Global Attributes HTML.
Event Attributes:
Element <menu> meliputi Event Attributes HTML.
Browser Support HTML <menu>:
| Chrome | Tidak |
|---|---|
| Safari | Tidak |
| Firefox | 8 |
| Opera | Tidak |
| IE | Tidak |
| Edge | ? |
Table Info
- Nilai pada table memilih versi minimal browser
- ? tidak diketahui
Default CSS :
Browser yang support dengan element
<menu>, memiliki nilai default :menu { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }