Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

Introdução aos Elementos "Menu" e "Menuitem" do HTML5

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Set Relative URLs With the “base” Tag
How to Create Your Own HTML Elements With Web Components

Portuguese (Português) translation by Cassio Cardoso (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

Menu Blur (desfoque) no Photoshop

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.

Menu contextual nativo no OS X e no Ubuntu

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.

Menu contextual customizado no Google Drive

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".

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.

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.

O novo item do menu, "Hello World", é carregado como parte do menu contextual nativo.

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:

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.

E ai está o ícone, como você pode ver abaixo.

Cada sub-menu agora possui um ícone ilustrativo. Ícones por Fugue icon.

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:

Com a regra de estilo especificada, nós precisamos escrever a função para aplicá-la a imagem:

Adicione esta função ao respectivo <menuitem> através do atributo onclick e passe o parâmetro com a classe, rotate-90:

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.