Vamos a repasar la etiqueta menu HTML5, esta nueva etiqueta tiene como finalidad especificar/determinar una serie de comandos a ser ejecutados por el usuario.
No confundir con la etiqueta nav cuyo fin es el de contener enlaces para navegar por la web (menú de navegación), mientras que menu HTML5 puede servir como barra de herramientas conteniendo acciones, funciones o comandos a ejecutar en la web.
Otras etiquetas HTML5 interactivas con funciones similares son:
Sintaxis de la etiqueta menu HTML5
Veamos la sintaxis de este elemento HTML5 extraída de su página web oficial:
|
1 2 3 4 |
<menu type="" label=""> <command type="" label=""></command> <button>...</button> </menu> |
Os explico la sintaxis:
- La etiqueta menu consta de su apertura y cierre <menu> y </menu>.
- Puede contener varias etiquetas command o button para cada accción y comandos a ejecutar.
Los atributos válidos son:
- type: Para especificar el tipo de menú a mostrar, sus valores pueden ser toolbar, context y popup.
- label: Especifica un título al menú.
Ejemplos de la etiqueta menu HTML5
Vamos a ver una serie de ejemplos de la etiqueta menu HTML5 para ver sus diferentes funcionalidades:
|
1 2 3 4 5 6 7 8 9 |
<menu type="context" id="menu1"> <command label="Recargar la página1" onclick="window.location.reload();"></command> </menu> <menu type="toolbar" id="menu2"> <button label="Recargar la página2" onclick="window.location.reload();"></button> </menu> <menu type="popup" id="menu3"> <command label="Recargar la página3" onclick="window.location.reload();"></command> </menu> |
De esta manera en estos 3 ejemplos vemos cómo recargar la página web desde los 3 posibles estados de la etiqueta menu: toolbar, context y popup con la ayuda de las etiquetas command y button.