Quer agilizar o acesso a um conteúdo em seu blog e economizar espaço? Uma boa dica é a utilização de um menu suspenso, igual ao da imagem ao lado. Neste menu, que sempre fica minimizado, o usuário clica e será exibida as opções. Por exemplo. Você quer listar opções para ser acessado conteúdos referente a sucos. Então aparecerá o título SUCO, quando for clicado em cima dele, será listado os tipos de "SUCOS"..capiche?
> Criando o menu
Para inserir em seu blog um menu suspenso, utilize o seguinte código, colando dentro de um elemento de página do tipo HTML/Javascript:
<form>
<select onchange="top.location.href=this.form.links.options [this.form.links.selectedIndex].value" name="links">
<option selected/>TÍTULO PRINCIPAL
<option value="http://link1"/>Link Um
<option value="http://link2"/>Link Dois
</select>
</form>
O que está destacado em PRETO, é o título principal que ficará aparecendo...
O que está destacado em AZUL é o link da opção que está destacada em VERMELHO
Para inserir uma nova opção, basta copiar a linha e colar uma abaixo da outra, após <option value....
>> Melhorando a aparência do menu com CSS
Agora iremos customizar através do CSS este menu simples. Se você deseja vários menus iguais ou deseja apenas um, vamos customizar com o código a seguir:/********* MENU SUSPENSO SELECT ***************/
select {
background-color: #fff; /* cor do fundo */
font:12px verdana, arial, helvetica, sans-serif; /* fonte */
color: #cc0000; /* cor da fonte */
}
Esse código deve ser colado dentro do HTML do seu blog dentro da tag <HEAD> e </HEAD>.
0 comentários:
Postar um comentário
OPINE