() translation by (you can also view the original English article)
Hoje eu vou lhe apresentar dois elementos do HTML5: <menu> e <menuitem>, que são parte da especificação de elementos interativos. A web tem evoluido para algo maior do que somente documentos linkados entre si; as páginas tem se comportado cada vez mais como aplicativos. Assim, é um momento apropriado para definir recursos de interatividade padrão para a web.
Estes dois elementos estão entre os menos comentados entre os desenvolvedores, provavelmente devido a falta de suporte dos navegadores. O Firefox é o único navegador que implementou este elemento até o momento de escrita deste artigo.
Menu x Nav
Quando nós falamos sobre menu é importante não se confundir com o <nav>. A especificação faz um ótimo trabalho em definir a diferença entre estes dois elementos distintos.
O <nav> é o elemento de navegação do HTML. Ele é o elemento que representa o bloco de navegação da página. Geralmente contém links que permitem ao usuário navegar ou pular através das seções da página ou para outras páginas do site.
O <menu>, por outro lado representa uma lista de comandos de menu. A idéia é similar as aplicações desktop ou mobile. Aplicações desktop normalmente utilizam uma barra de ferramentas e menus de contexto para realizar diferentes tarefas. Pegue o menu Blur (Desfoque) no Photoshop como exemplo. Ele realiza a tarefa que deixa a camada selecionada embaçada
Esta é a diferença fundamental entre estes dois elementos; o <nav> deve conter links para ajudar o usuário a navegar atravpes das páginas, enquanto que o <menu> deve ajudar o usuário a realizar certas tarefas.
Usando o elemento Menu
Resumidamente, o <menu> é projetado para criar menus de contexto, barras de ferramenta, menus popup. Entretanto, estes dois últimos ainda não foram implementados em nenhum navegador, incluindo o Firefox. No momento, é difícil advinhar quando (se?) os navegadores irão implementá-los e como eles irão se parecer. Existe uma boa chance que a especificação da barra de ferramentas e do popup irão sofrer leves mudanças na próxima iteração.
Por enquanto, nós iremos foca nossa atenção no recurso dos menus contextuais.
Menu Contextual
Um menu contextual (ou menu de contexto) aparece quando nós clicamos com o botão direito do mouse em uma aplicação. As opções reveladas são específicas do local onde o usuário clicou, portanto, do contexto.
Opção em JavaScript
É possível adicionar menus contextuais nas páginas web através do JavaScript ou de um plugin jQuery. O problema com este método é que normalmente ele necessita de uma marcação pesada, e, criticamente, o script irá remover o menu contextual nativo do navegador, o que pode atrapalhar a experiência do usuário se não for feito corretamente.
Solução Nativa
O <menu> em conjunto com o <menuitem> irão incorporar os novos itens do menu como parte do menu contextual nativo. No exemplo abaixo, nós iremos adicionar ao nosso <body> um novo item no menu chamado "Hello World".
1 |
<body contextmenu="new-context-menu"> |
2 |
<menu id="new-context-menu" type="context"> |
3 |
<menuitem>Hello World</menuitem> |
4 |
</menu>
|
5 |
</body>
|
As partes essenciais do snippet acima são os atributos - id, type e contextmenu - que especificam o tipo de menu como um menu de contexto bem como, o escopo onde o novo menu deve ser exibido.
No nosso caso, o novo menu irá aparecer em qualquer lugar do documento quando clicarmos com o botão direito do mouse, como definimos usando o atributo contextmenu no body.
Alternativamente, você pode restringir o escopo para uma certa seção da página definindo o atributo contextmenu para os elementos - <div>, <main>, <section>, e demais - ao invés do body.
1 |
<body>
|
2 |
<div contextmenu="new-context-menu"> |
3 |
<!-- content -->
|
4 |
</div>
|
5 |
<menu id="new-context-menu" type="context"> |
6 |
<menuitem>Hello World</menuitem> |
7 |
</menu>
|
8 |
</body>
|
Quando nós o vemos no navegador (no momento, somente no Firefox) você pode ver que o menuitem que nós declaramos foi adicionado no topo da lista.
Adicionando sub-menus e ícones
Os sub-menus compreendem um grupo de itens correlacionados ou com ações similares. O menu do Photoshop Rotacionar imagem ("Image Rotation") é um exemplo perfeito disso. O menu Rotacionar imagem ("Image Rotation") possui diversos itens nos sub-menus que permitem ao usuário selecionar quantos graus de rotação ( 900 and 1800 ) eles querem, bem como a direção para aplicar a rotação.
Usando o elemento <menu>, adicionar sub-menus é fácil e intuitivo. Vá em frente e aninhe outro <menu> em conjunto com um label para declarar o nome do menu, da seguinte forma:
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem>Rotate 90</menuitem> |
4 |
<menuitem>Rotate 180</menuitem> |
5 |
<menuitem>Flip Horizontally</menuitem> |
6 |
<menuitem>Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
Quando nós executamos isto em um navegador com suporte, nós veremos um novo menu com quatro sub-menus:
Ícones
Além disso, um novo atributo chamado icon foi introduzido tornando possível adicionar um ícone junto ao menu. Vale ressaltar que este atributo só é aplicável no elemento <menuitem>. Especifique o caminho do ícone para o icon da seguinte maneira.
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem icon="img/arrow-return-090.png">Rotate 90</menuitem> |
4 |
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem> |
5 |
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem> |
6 |
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
E ai está o ícone, como você pode ver abaixo.
Adicionando uma função ao menu
Nós construímos algo que se parece com um menu contextual, mas ele ainda não funciona da mesma maneira. Os usuários irão esperar que algo aconteca quando eles clicarem nele; clicando em Copiar, deve copiar o texto ou o link, enquanto que clicando em
Nova Pasta
deve ser criada uma nova pasta. Nós podemos fazer isso utilizando JavaScript.Nota: antes de continuar eu recomendo que você dê uma olhada no curso JavaScript Fundamentals do Jeremy McPeak; um ótimo ponto de partida para qualquer um que deseja aprender JavaScript.
Pegue nosso exemplo "Rotacionar Imagem" acima, iremos adicionar a função que irá rotacionar a imagem que clicarmos. As transformações e transições do CSS3 podem realizar a rotação no navegador para nós; aqui está o estilo que irá rotacionar a imagem 90 graus:
1 |
.rotate-90 { |
2 |
transform: rotate(90deg); |
3 |
}
|
Com a regra de estilo especificada, nós precisamos escrever a função para aplicá-la a imagem:
1 |
function imageRotation(name) { |
2 |
document.getElementById('image').className = name; |
3 |
}
|
Adicione esta função ao respectivo <menuitem> através do atributo onclick e passe o parâmetro com a classe, rotate-90:
1 |
<menu id="demo-image" type="context"> |
2 |
<menu label="Image Rotation"> |
3 |
<menuitem onclick="imageRotation('rotate-90')" icon="img/arrow-return-090.png">Rotate 90</menuitem> |
4 |
<menuitem icon="img/arrow-return-180.png">Rotate 180</menuitem> |
5 |
<menuitem icon="img/arrow-stop-180.png">Flip Horizontally</menuitem> |
6 |
<menuitem icon="img/arrow-stop-270.png">Flip Vertically</menuitem> |
7 |
</menu>
|
8 |
</menu>
|
Para finalizar, crie as regras de estilo que irão rotacionar a imagem 180 graus e virar a image. E adicione cada função ao respectivo item do menu. Veja esse exemplo em ação nesta página.
Conclusão
O elemento <menu> pode ser muito útil, tanto em aplicações web como em sites mais simples. Infelizmente o suporte ainda é muito precário.
Esperamos que o Safari, Chrome, Opera e o Internet Explorar implementem este recurso o quanto antes e também os outros tipo de menu ( popup e toolbar ). Eu estou realmente ansioso para ver como este elemento irá evoluir no próximo ano.
Outras Referências
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
