Menu de navegação em HTML

Por sugestão de uma seguidora do TumbleTricks, vou ensinar como fazer um menu de navegação dropdown que usa apenas HTML. Um exemplo de como o menu ficará, basta você acessar a página onde você posta qualquer tipo de post do seu Tumlr, e ver  menu onde você escolhe “publish now”.

Primeiro você deve escolher onde seu menu ficará, você pode usá-lo diretamente no seu código (para por na barra lateral ou outro lugar), no menu flutuante, ou na sua Description.

Para fazer o menu, basta colar o seguinte código:

<select onchange="location=this.options[this.selectedIndex].value;">
<option value="#">NOME DO SEU MENU</option>
<option value="ENDEREÇO">Opção 1</option>
<option value="ENDEREÇO">Opção 2</option>
<option value="ENDEREÇO">Opção 3</option>
<option value="ENDEREÇO">Opção 4</option>
</select>

Onde está escrito “#”, você não deve alterar esta linha. Coloque um nome para o seu menu (o que ficará escrito antes do usuário clicar), e ponha um nome para cada opção, e a qual endereço ela vai levar. O menu não se restringe a ter só 4 opções, você pode por quantas opções quiser, basta adicionar mais linhas iguais a essa:

<option value="ENDEREÇO">OPÇÃO</option>

Mas atenção, todas as novas linhas tem que estar antes de </select>.

Você pode usar este menu tanto para páginas do seu Tumblr, quanto para linkar para outros sites, como seu Twitter, seus blogs favoritos, e coisas do tipo.

Depois é só salvar e está tudo pronto ;)

O menu será parecido com este:



Opcional: Você pode personalizar o menu em CSS também, se quiser saber como, dê uma olhada neste post: Onde estudar CSS.