Advertisement
  1. Web Design
  2. HTML

Dica rápida: não se esqueça do elemento "optgroup"

Scroll to top
Read Time: 5 min
This post is part of a series called Strange and Unusual HTML.
Getting Started With Scalable Vector Graphics (SVG)
Quick Tip: Using the HTML5 Download Attribute

() translation by (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 &lt;optgroup></option>
3
4
	<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option>
5
	<option value="Home">&nbsp;&nbsp; - Home</option>
6
	<option value="Home">&nbsp;&nbsp; - Tutorials</option>
7
	<option value="Articles">&nbsp;&nbsp; - Articles</option>
8
	<option value="Tips">&nbsp;&nbsp; - Tips</option>
9
	<option value="Sessions">&nbsp;&nbsp; - Sessions</option>
10
	<option value="Videos">&nbsp;&nbsp; - Videos</option>
11
	<option value="Premium">&nbsp;&nbsp; - Premium</option>
12
13
	<option value="About Webdesign Tuts+">About Webdesign Tuts+</option>
14
	<option value="Advertise">&nbsp;&nbsp; - Advertise</option>
15
	<option value="Write For Us">&nbsp;&nbsp; - Write For Us</option>
16
	<option value="About">&nbsp;&nbsp; - About</option>
17
	<option value="Usage">&nbsp;&nbsp; - Usage</option>
18
19
    <option value="Tuts+ Network">Tuts+ Network</option>
20
    <option value="Tuts+ Hub">&nbsp;&nbsp; - Tuts+ Hub</option>
21
    <option value="Psdtuts+">&nbsp;&nbsp; - Psdtuts+</option>
22
    <option value="Nettuts+">&nbsp;&nbsp; - Nettuts+</option>
23
    <option value="VectorTuts+">&nbsp;&nbsp; - VectorTuts+</option>
24
    <option value="Audiotuts+">&nbsp;&nbsp; - Audiotuts+</option>
25
    <option value="Aetuts+">&nbsp;&nbsp; - Aetuts+</option>
26
    <option value="Cgtuts+">&nbsp;&nbsp; - Cgtuts+</option>
27
    <option value="Phototuts+">&nbsp;&nbsp; - Phototuts+</option>
28
    <option value="Mobiletuts+">&nbsp;&nbsp; - Mobiletuts+</option>
29
    <option value="Webdesigntuts+">&nbsp;&nbsp; - Webdesigntuts+</option>
30
    <option value="Wptuts+">&nbsp;&nbsp; - Wptuts+</option>
31
    <option value="Mactuts+">&nbsp;&nbsp; - Mactuts+</option>
32
    <option value="Gamedevtuts+">&nbsp;&nbsp; - Gamedevtuts+</option>
33
    <option value="Crafttuts+">&nbsp;&nbsp; - 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 &amp;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

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.