Menus e toolbars em html5

O elemento menu

O elemento menu é usado para definir menus e barras de ferramenta. Dentro do menu, você pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu. Para definir comandos, você pode inserir:

  1. Um link, um elemento a com atributo href;
  2. Um botão, um elemento button;
  3. Um botão, um elemento input com o atributo type contendo button, submit, reset ou image;
  4. Um radiobutton, um elemento input com o atributo type contendo radio;
  5. Um checkbox, um elemento input com o atributo type contendo checkbox;
  6. Um elemento select, contendo um ou mais options, define um grupo de comandos
  7. Um elemento qualquer com o atributo accesskey
  8. Um elemento command
Tipos de comando

Há três tipos de comando:

command
Uma ação comum;
checkbox
Uma ação que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts quando clicada;
radio
Uma ação que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, deligando todas as ações com o mesmo valor no atributo radiogroup;

Da lista de elementos possíveis para definir comandos, os três primeiros, link, button e input button, definem comandos do tipo command. O quarto elemento, radiobutton, define um comando do tipo radio. O quinto, checkbox, define um comando do tipo checkbox.

O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver o atributo multiple, definirá uma lista de comandos do tipo checkbox. Caso contrário, os comandos serão do tipo radio, tendo o mesmo radiogroup.

No sétimo caso, um elemento qualquer com tecla de acesso, o tipo de comando vai depender do tipo de elemento que recebeu accesskey.

O elemento command

Por fim, temos o oitavo método, o elemento command. Neste caso o tipo de comando dependerá do valor do atributo type. Veja um exemplo de como usá-lo:

<command type="command" label="Salvar" onclick="salvar()" >
Prefira não usar command, por enquanto

Por que a especificação permite que se use o novo elemento command para definir comandos, e ao mesmo tempo permite que se use os velhos elementos como input, button e select para isso? Para possibilitar ao desenvolvedor oferecer alguma compatibilidade com navegadores antigos. Veja este exemplo:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Menus</title>
 6 </head>
 7 
 8 <body>
 9 
 10 <menu type="toolbar">
 11 <li>
 12 <menu label="File">
 13 <button type="button" onclick="fnew()">New...</button>
 14 <button type="button" onclick="fopen()">Open...</button>
 15 <button type="button" onclick="fsave()">Save</button>
 16 <button type="button" onclick="fsaveas()">Save as...</button>
 17 </menu>
 18 </li>
 19 <li>
 20 <menu label="Edit">
 21 <button type="button" onclick="ecopy()">Copy</button>
 22 <button type="button" onclick="ecut()">Cut</button>
 23 <button type="button" onclick="epaste()">Paste</button>
 24 </menu>
 25 </li>
 26 <li>
 27 <menu label="Help">
 28 <li><a href="help.html">Help</a></li>
 29 <li><a href="about.html">About</a></li>
 30 </menu>
 31 </li>
 32 </menu>
 33 
 34 </body>
 35 
 36 </html>

O agente de usuário deveria renderizar algo como:

Um agente de usuário que não conhece o novo elemento menu vai entender esse código como listas aninhadas com botões e links. E vai renderizar isso assim:

Não está bonito, mas é perfeitamente acessível. E o visual pode ser bem trabalhado com CSS. A mesma coisa poderia ser escrita com o elemento command:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>Menus</title>
 6 </head>
 7 
 8 <body>
 9 
 10 <menu type="toolbar">
 11 <menu label="File">
 12 <command onclick="fnew()" label="New..." />
 13 <command onclick="fopen()" label="Open..." />
 14 <command onclick="fsave()" label="Save" />
 15 <command onclick="fsaveas()" label="Save as..." />
 16 </menu>
 17 <menu label="Edit">
 18 <command onclick="ecopy()" label="Copy" />
 19 <command onclick="ecut()" label="Cut" />
 20 <command onclick="epaste()" label="Paste" />
 21 </menu>
 22 <menu label="Help">
 23 <command onclick="location='help.html'" label="Help" />
 24 <command onclick="location='about.html'" label="About" />
 25 </menu>
 26 </menu>
 27 
 28 </body>
 29 
 30 </html>

Mas um agente de usuário que não conhece os elementos menu e command não vai mostrar absolutamente nada.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s