Etiqueta HTML <menu>
La etiqueta <menu> define una lista de comandos o elementos de menú. Históricamente, se utilizaba para crear menús contextuales, barras de herramientas y listar controles de formulario.
Un menú contextual históricamente constaba de un elemento <menu> que contenía elementos <menuitem> para cada opción seleccionable, así como elementos <hr> que dividían el contenido del menú en secciones mediante líneas separadoras. Sin embargo, estas características se han eliminado de la especificación HTML.
Un menú de barra de herramientas utiliza un elemento <menu>. Su contenido puede estructurarse de dos maneras:
- Puede contener una lista desordenada de elementos representados por el elemento HTML
<li>. - Puede contener contenido de flujo que describe las opciones y comandos accesibles.
peligro
La etiqueta
<menu>se considera obsoleta, y la etiqueta<menuitem>se ha eliminado por completo de la especificación HTML. El soporte para menús contextuales y barras de herramientas a través de estas etiquetas se ha eliminado en gran medida de todos los navegadores principales. Para menús contextuales modernos, utiliza CSS y JavaScript. Para listas estándar, utiliza el<ul>elemento en su lugar.
Sintaxis
La etiqueta <menu> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<menu>) y cierre (</menu>).
Ejemplo de la etiqueta HTML <menu> con elementos <li>:
Ejemplo de la Etiqueta HTML <menu>
Nota: Los navegadores modernos no renderizan <menu> como una lista por defecto, por lo que se utilizan display: block y list-style: none para restablecer el estilo predeterminado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: block;
list-style: none;
padding: 0;
}
menu li {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
</style>
</head>
<body>
<menu>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>menu - menu list</li>
</menu>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <menu> para crear un menú de barra de herramientas:
Etiqueta HTML <menu> en Navegadores Modernos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu li {
list-style: none;
padding: 8px 12px;
background: #1c87c9;
color: #fff;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu>
<li onclick="alert('Refresh')">Refresh</li>
<li onclick="alert('Share')">Share</li>
<li onclick="alert('Email')">Email</li>
</menu>
</body>
</html>La diferencia entre las etiquetas <menu> y <ul>
Estos dos elementos tienen un comportamiento similar. Tanto los elementos <menu> como <ul> se utilizan para crear listas desordenadas. La principal diferencia es que la etiqueta <menu> está diseñada específicamente para comandos, barras de herramientas y menús contextuales, mientras que la etiqueta <ul> se utiliza para listas desordenadas generales.
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| label | texto | Define una etiqueta visible para el menú. |
| type | popup, toolbar, context | Define el tipo de menú. Nota: El atributo type y sus valores eran experimentales y se eliminaron en HTML5.1. |
La etiqueta <menu> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuál es el propósito de la etiqueta HTML '<menu>' y en qué navegadores se puede utilizar?