En esta sección, veremos cómo crear submenús y menús con marcas de verificación o checks.
Crear submenús
Puedes crear submenús dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un menupopup. Ya hemos visto cómo colocar menuitems y menuseparators en menupopups. Sin embargo , puedes crear submenús simplemente colocando el elemento de menu dentro del elemento del menupopup . Esto funciona porque el elemento del menú es válido aún cuando no esté colocado directamente en la barra de menú. El ejemplo de abajo crea un submenú simple dentro del menú de File.
Ejemplo 1: Código Ver en funcionamiento
<toolbox flex="1">
<menubar id="sample-menubar">
<menu id="file-menu" label="Archivo">
<menupopup id="file-popup">
<menu id="new-menu" label="Nuevo">
<menupopup id="new-popup">
<menuitem label="Ventana"/>
<menuitem label="Mensage"/>
</menupopup>
</menu>
<menuitem label="Abrir"/>
<menuitem label="Guardar"/>
<menuseparator/>
<menuitem label="Salir"/>
</menupopup>
</menu>
</menubar>
</toolbox>
Adición de un menú a nuestro ejemplo con el Buscador de archivos
Agreguemos un menú al dialogo de búsqueda de archivos. Agregaremos solo unos pocos comandos simples a un menú File y un menú Edit. Este es similar al ejemplo de arriba.
<toolbox>
<menubar id="findfiles-menubar">
<menu id="file-menu" label="Archivo" accesskey="f">
<menupopup id="file-popup">
<menuitem label="Abrir la búsqueda..." accesskey="o"/>
<menuitem label="Guardar la búsqueda..." accesskey="s"/>
<menuseparator/>
<menuitem label="Cerrar" accesskey="c"/>
</menupopup>
</menu>
<menu id="edit-menu" label="Editar" accesskey="e">
<menupopup id="edit-popup">
<menuitem label="Cortar" accesskey="t"/>
<menuitem label="Copiar" accesskey="c"/>
<menuitem label="Pegar" accesskey="p" disabled="true"/>
</menupopup>
</menu>
</menubar>
<toolbar id="findfiles-toolbar>
Aquí hemos agregado dos menús con varios comandos en ellos. Observa cómo la barra de menús fue agregada dentro de la caja. Los tres puntos después de Open y Save son la forma habitual en la que se indica al usuario que se abrirá un dialogo cuando seleccione el comando. Se han agregado claves de acceso para cada menú y elemento de menú. Verás en la imagen que esta letra ha sido subrayada en la etiqueta del menú. Además, el comando Pegar (Paste) ha sido deshabilitado. Asumiremos que no hay nada que pegar.
Ejemplo de Encontrar archivos : Código Ver en funcionamiento
Añadir marcas de verificación (checkmarks) a los menús
Muchas aplicaciones tienen elementos de menú que tienen marcas de verificación o checks. Por ejemplo, una característica que este activada tiene una marca de verificación o check al lado del comando y una característica que está deshabilitada no lo tiene. Cuando el usuario selecciona el menú, cambia el estado de la marca o check (habilitado/deshabilitado). Puedes además agregar botones redondos en los elementos del menú.
Las marcas de verificación o checks se crean de manera similar a los elementos checkbox y radio . Esto implica el uso de dos atributos: type para indicar el tipo de marca o check y name para agrupar comandos. El ejemplo de abajo crea un menú con una marca de verificación.
Ejemplo 2: Código Ver en funcionamiento
<toolbox>
<menubar id="options-menubar">
<menu id="options_menu" label="Opciones">
<menupopup>
<menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/>
<menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/>
</menupopup>
</menu>
</menubar>
</toolbox>
El atributo type se ha agregado con el fin poder marcar o desmarcar un elemento del menú. Al establecer su valor a checkbox , el elemento del menú puede marcarse o desmarcarse seleccionando dicho elemento.
Menú con botones circulares
Además de las marcas estándares, puedes crear checks con estilo circular cambiando el valor de type a el valor de radio. Un botón circular si usa si se desea agrupar varios elementos del menús pero se puede seleccionar solo uno a la vez. Un ejemplo puede ser a menú de Fuente (font) donde únicamente puede seleccionarse una fuente a la vez. Cuando se selecciona otro elemento, el seleccionado previamente queda deshabilitado.
Con el fin de agrupar un conjunto de elementos del menú, tienes que poner un atributo name a cada uno. Establece el valor para la misma cadena. El ejemplo siguiente lo muestra:
Ejemplo 3: Código Ver en funcionamiento
<toolbox>
<menubar id="planets-menubar">
<menu id="planet-menu" label="Planetas">
<menupopup>
<menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/>
<menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/>
<menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
<menuseparator/>
<menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/>
<menuitem id="luna" label="Luna" type="radio" name="inhabited"/>
</menupopup>
</menu>
</menubar>
</toolbox>
Si pruebas a hacer este ejemplo, encontrarás que de los tres primeros elementos del menú, solamente se puede seleccionar uno. Se agrupan juntos porque todos tienen el mismo nombre. El último elemento del menú es Earth, aunque es un botón circular, no es parte de este grupo porque tiene un nombre diferente.
Desde luego, los elementos agrupados deben estar dentro del mismo menú. No se deben ubicar cerca unos de otros en el menú, además no tiene mucho sentido que lo estén.
Seguimos con la creación de menús emergentes.