[Tutorial] Menu Expansivel Vertical

Tutorial de Hoje: Menu Expansível Vertical
Este tutorial será feito com base nos blog da Blogger, mais também funciona em outros locais.

O Menu Expansível Vertical, é aquele menu que você pode utilizar nas colunas esquerda e direita do seu blog/site e também é ideal caso você queira economizar espaço nas colunas do seu site.

Primeiro vamos entender como esse menu expansível funciona. Ele é formado pelo Menu e o Submenu. O menu é o campo que ira hospedar os submenu dentro dele, e quando a pessoa clicar sobre este menu, ele irá exibir abaixo dele os submenu. Os submenu são os botão que será exibido ao clicar no menu, esses botões contém um link que levará a pessoa para uma determinada página ao clicar nele. Por exemplo: Eu quero criar um menu expansível sobre Planos de fundo. Então teremos que fazer o menu com o nome "Plano de Fundo" e os Submenus com o nome de "Paisagem", "Abstrata", "Lugares", "Animais". E vou criar outro menu contando sobre as Redes Sociais, ele vai ficar assim: Nome do menu "Redes Sociais", submenus: "Facebook", "Twitter", "Orkut" e "MSN".

Esses menu irão ficar assim quando ninguem clicar sobre eles:

Planos de Fundo

Redes Sociais

Agora se alguém clicar nos 2:

Planos de Fundo
Paisagem
Abstrata
Lugares
Animais

Redes Sociais
Facebook
Twitter
Orkut
MSN

---

Agora vamos para a parte prática do assunto.

Copie o código abaixo;

Código:

<script>function doload(){document.getElementById("load").style.display="none";}window.onload=doload;</script>
<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>


Entre no seu Blog (link para acessar: www.blogger.com );
Selecione o Blog que você vai por este código;
Clique em Modelo;
Depois em 'Editar HTML';
Pressione Ctrl + F ;
Digite </head> ;
Localize esta palavra no seu HTML;
Cole o código antes dessa palavra;
Clique em Salvar Modelo e Feche;
Agora clique em Layout;
Adicionar Widget em uma das colunas ou em outro lugar de sua preferencia;
Localize e clique no quadro HTML/JavaScript;
Coloque um titulo, no caso pode ser Menu;
Coloque o Código Abaixo (Atenção este código deve ser preenchido com as informações correta nas partes colorida.);

<a href="javascript:void(0);" onclick="expandcollapse('Nome do Menu')"><img border="0" src="Imagem do Menu" /></a>
<ul id="Repita o Nome do Menu" class="texthidden">

Agora vamos adicionar os submenus desse código do menu que acabamos de por, para isso copie o código abaixo, lembrando que as partes coloridas devem ser editadas com o que se pede.

<li>
<a dir="ltr" href="Link que a pessoa vai ir quando clicar"><img border="0" src="Imagem do botão do sub menu" /></a>
</li>

Esse ultimo código como dito é o código de cada submenu de um menu, então caso você queira um menu com 2 submenu você coloca 2 vezes esse código, se quiser com 5 menu, coloca 5 vezes esse ultimo código.

Se você quiser um novo Menu basta copiar novamente este código e colocar no fim da página depois é só repetir o código dos submenu acima.

<a href="javascript:void(0);" onclick="expandcollapse('Nome do Menu')"><img border="0" src="Imagem do Menu" /></a>
<ul id="Repita o Nome do Menu" class="texthidden">