Non supporté par ChromeSupporté par FirefoxNon supporté par EdgeNon supporté par Safari/iOS <menu> : Démo HTML5

Mise à jour : 2017-01-22
Héritage du langage XUL, cette balise crée des menus.

Attributs de <menu>

Notes sur le tuto


Exemple de code HTML5

<u>Menu contextuel</u> :<br>
Clickez droit sur le logo :
<img id="logo" src="../favicon-96x96.png" contextmenu="menuc">
<menu type="context" id="menuc">
	<menuitem label="Action 1"
	          icon="../favicon-16x16.png"
	          onclick="action1()"></menuitem>
	<hr>
	<menu label="Action 2">
		<menuitem type="command" label="Action 2.1" id="mi21"></menuitem>
		<menuitem                label="Action 2.2" disabled></menuitem>
	</menu>
	<menuitem type="checkbox" label="Action 3 (checkbox)" checked id="mi31"></menuitem>
	<menuitem type="radio" radiogroup="action4" label="Action 4.1 (radio)" id="mi41"></menuitem>
	<menuitem type="radio" radiogroup="action4" label="Action 4.2 (radio)"></menuitem>
</menu>
<br>
<u>Barre de menu</u> :<br>
<menu type="toolbar" id="menut">
	<li>
		<button type="menu" menu="menu1" id="button1">Menu 1</button>
		<menu type="context" id="menu1">
			<menuitem label="Action 1.1"></menuitem>
			<hr>
			<menuitem label="Action 1.2"></menuitem>
		</menu>
	</li>
	<li>
		<button type="menu" menu="menu2" value="Menu 2">
		<menu type="context" id="menu2">
			<menuitem label="Action 2"></menuitem>
		</menu>
	</li>
</menu>
<script>
	flag = false
	function action1(){
		flag = !flag
		document.getElementById("logo").src = (flag ? "../favicon-194x194.png"
		                                            : "../favicon-96x96.png")
	}
</script>

Démonstration du résultat HTML5


Menu contextuel :
Clickez droit sur le logo :

Barre de menu :


  • Détection automatique du support HTML5

    Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
    <script src="_html5detect.js"></script>
    <script>
    	isTagSupported("menu")
    	isAttributeSupported("menu", "type")
    	isAttributeSpecified("menuc","type", "context")
    	isAttributeSpecified("menut","type", "toolbar")
    	isAttributeSupported("menu", "label")
    	isTagSupported("menuitem")
    	isAttributeSupported("menuitem", "checked")
    	isAttributeSupported("menuitem", "command")
    	isAttributeSupported("menuitem", "default")
    	isAttributeSupported("menuitem", "disabled")
    	isAttributeSupported("menuitem", "icon")
    	isAttributeSupported("menuitem", "label")
    	isAttributeSupported("menuitem", "radiogroup")
    	isAttributeSupported("menuitem", "type")
    	isAttributeSpecified("mi21", "type", "command")
    	isAttributeSpecified("mi31", "type", "checkbox")
    	isAttributeSpecified("mi41", "type", "radio")
    	isAttributeSupported("img", "contextmenu")
    	isAttributeSupported("button", "menu")
    	isAttributeSpecified("button1", "type", "menu")
    </script>		

    Can I Use menu? Data on support for the menu feature across the major browsers from caniuse.com.