Portuguese (Português) translation by thierry rene matos (you can also view the original English article)
Um dos padrões de design mais populares para websites responsivos é expandir o menu de navegação utilizando o elemento select. Apesar disso, representar uma hierarquia ou diferenciar categorias no elemento select as vezes pode implicar em algumas gambiarras com HTML e muito espaco . Neste tutorial vou apresentar uma tag HTML um pouco obscura, chamada optgroup, que permite, de maneira simples e semântica, agrupar itens relacionados em um menu com select.
Introdução
Imaginar como otimizar o menu de navegação para uma apresentação ideal em telas pequenas de dispositivos móveis, parece ser um desafio para o web design responsivo. Existem vários padrões de design responsivo que já executam muito bem este trabalho. Um dos métodos mais conhecidos e utilizados, é agrupar o menu de navegação em um elemento select.
Essa técnica vem sendo utilizada e disseminada em diversos tutoriais na internet, incluindo um artigo do Ian Yates para o Webdesigntuts+ : Criando um layout responsivo com o Skeleton. De qualquer forma, converter a navegação de um site em um elemento especifico para formulários pode ser um pouco inadequado. Alguns argumentam que isso é uma péssima ideia, já que um elemento para formulário não apresenta nenhuma afinidade com navegação em menu.
select: Análise Rápida
O elemento select é um elemento UI muito útil, pois com ele é possível esconder diversas opções dentro de um único controle, o que beneficia muito o espaço livre no design da interface (o que é um atrativo para dispositivos móveis). Também permite que designers mantenham a navegação no topo da página, onde os usuários estão acostumados a encontra-la.
Além disso, existe um recurso bem interessante baseado no elemento select que outros elementos HTML não possuem: controle nativo. Quando ativo, menus com base no elemento select permitem acesso a recursos nativos, o que provavelmente garante uma melhor interação no elemento, independente do dispositivo do usuário ou método do input.
Como designer, você deve decidir se layout para dispositivos móveis vai utilizar ou não o elemento select para menus. Cada caso é um caso. Se você decidir seguir em frente, no restante do tutorial vamos analisar como podemos melhorar a organização dos links utilizando a tag HTML optgroup.
Exemplo: Webdesigntuts+
Vamos utilizar o "Webdesigntuts+" como exemplo para utilizar a tag optgroup.
Nota: esse exemplo não representa nenhuma intenção de resolver ou melhorar problemas de design no Webdesigntuts+ ou qualquer outro site. É apenas um simples exemplo de como podemos utilizar o elemento optgroup.
Digamos que a intenção é agrupar três elementos de navegação da página do Webdesigntuts+ em um unico elemento select.
Sem o recurso optgroup
Converter links de navegação em elementos select enquanto tenta manter o agrupamento por grupo pode ser bem confuso se não for feito de maneira simples. Alguns designers/desenvolvedores criam um menu select gigante, utilizando espaço manual ( ) e hífen como separador.
1 |
<select>
|
2 |
<option value="Without Optgroup">Nav Without <optgroup></option> |
3 |
|
4 |
<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option> |
5 |
<option value="Home"> - Home</option> |
6 |
<option value="Home"> - Tutorials</option> |
7 |
<option value="Articles"> - Articles</option> |
8 |
<option value="Tips"> - Tips</option> |
9 |
<option value="Sessions"> - Sessions</option> |
10 |
<option value="Videos"> - Videos</option> |
11 |
<option value="Premium"> - Premium</option> |
12 |
|
13 |
<option value="About Webdesign Tuts+">About Webdesign Tuts+</option> |
14 |
<option value="Advertise"> - Advertise</option> |
15 |
<option value="Write For Us"> - Write For Us</option> |
16 |
<option value="About"> - About</option> |
17 |
<option value="Usage"> - Usage</option> |
18 |
|
19 |
<option value="Tuts+ Network">Tuts+ Network</option> |
20 |
<option value="Tuts+ Hub"> - Tuts+ Hub</option> |
21 |
<option value="Psdtuts+"> - Psdtuts+</option> |
22 |
<option value="Nettuts+"> - Nettuts+</option> |
23 |
<option value="VectorTuts+"> - VectorTuts+</option> |
24 |
<option value="Audiotuts+"> - Audiotuts+</option> |
25 |
<option value="Aetuts+"> - Aetuts+</option> |
26 |
<option value="Cgtuts+"> - Cgtuts+</option> |
27 |
<option value="Phototuts+"> - Phototuts+</option> |
28 |
<option value="Mobiletuts+"> - Mobiletuts+</option> |
29 |
<option value="Webdesigntuts+"> - Webdesigntuts+</option> |
30 |
<option value="Wptuts+"> - Wptuts+</option> |
31 |
<option value="Mactuts+"> - Mactuts+</option> |
32 |
<option value="Gamedevtuts+"> - Gamedevtuts+</option> |
33 |
<option value="Crafttuts+"> - Crafttuts+</option> |
34 |
</select>
|
Utilizando o optgroup
Utilizar o elemento optgroup ajuda a manter um código limpo e já possui um recurso para categorização da lista do menu select. Utilizamos o atributo label para determinar o que deve ser apresentado:
1 |
<select>
|
2 |
<option value="With Optgroup">Nav With &lt;optgroup></option> |
3 |
|
4 |
<optgroup label="Browse Webdesign Tuts+"> |
5 |
<option value="Home">Home</option> |
6 |
<option value="Home">Tutorials</option> |
7 |
<option value="Articles">Articles</option> |
8 |
<option value="Tips">Tips</option> |
9 |
<option value="Sessions">Sessions</option> |
10 |
<option value="Videos">Videos</option> |
11 |
<option value="Premium">Premium</option> |
12 |
</optgroup>
|
13 |
|
14 |
<optgroup label="About Webdesign Tuts+"> |
15 |
<option value="Advertise">Advertise</option> |
16 |
<option value="Write For Us">Write For Us</option> |
17 |
<option value="About">About</option> |
18 |
<option value="Usage">Usage</option> |
19 |
</optgroup>
|
20 |
|
21 |
<optgroup label="Tuts+ Network"> |
22 |
<option value="Tuts+ Hub">Tuts+ Hub</option> |
23 |
<option value="Psdtuts+">Psdtuts+</option> |
24 |
<option value="Nettuts+">Nettuts+</option> |
25 |
<option value="VectorTuts+">VectorTuts+</option> |
26 |
<option value="Audiotuts+">Audiotuts+</option> |
27 |
<option value="Aetuts+">Aetuts+</option> |
28 |
<option value="Cgtuts+">Cgtuts+</option> |
29 |
<option value="Phototuts+">Phototuts+</option> |
30 |
<option value="Mobiletuts+">Mobiletuts+</option> |
31 |
<option value="Webdesigntuts+">Webdesigntuts+</option> |
32 |
<option value="Wptuts+">Wptuts+</option> |
33 |
<option value="Mactuts+">Mactuts+</option> |
34 |
<option value="Gamedevtuts+">Gamedevtuts+</option> |
35 |
<option value="Crafttuts+">Crafttuts+</option> |
36 |
</optgroup>
|
37 |
</select>
|
Note que agora, utilizando apenas marcação HTML, conseguimos categorizar os itens da lista, de forma que conseguimos compreender com facilidade a relação de itens pai/filho, sem precisar utilizar marcação especial, hifens ou algo do tipo.
Dispositivos Móveis
Como mencionado anteriormente, a vantagem de utilizar o elemento select, é o acesso a controles nativos em dispositivos móveis com telas touch. Abaixa temos alguns exemplos de como os menus ficam em diferentes plataformas móveis:
Conclusão
Isso é tudo! Apenas se lembre do elemento optgrout que utiliza marcação semântica e de fácil manutenção, com recurso para categorizar grupos em uma lista com o elemento select. Utilizar ou não um menu com base no elemento select para websites responsivos é uma decisão que você precisa fazer como designer; de qualquer forma, agora você tem um conhecimento adicional para agregar ao seu conjunto de soluções responsivas!
Demais referências
- <optgroup> no Mozilla Developer Network
- <optgroup> especificações by W3C
Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!
