Menu Accordion (sanfona)

Olá pessoas linda.
Vou colocar hoje um menu accordiano ou seja igual aquelas sanfona dos Velhos do intério. Enfim vamos ao que interessa o/ 

-1) Vá em layout e Clique em add gadgets Como sempre Use a opção Html/javascript 

E colé esse código abaixo 


<style> ul.container{width:275px;padding:5px;} li.accoi-menu{list-style:none;padding:1px;width:100%;} li.title{border-radius:5px;list-style:none;padding:5px;background-color: #069;} li.title a{color:#ffffff;display:block; padding:5px;font:14px georgia, verdana;overflow:hidden;position:relative;width:100%; text-decoration:none;} .downlistie{list-style:none;display:none;padding-top:5px;width:100%;} .downlistie li{list-style:none;border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;border-radius:5px;margin:5px;padding:4px 10px;background-color: #FF0;} .downlistie li:hover {background-color: #F93;} .downlistie li a{text-decoration:none;color:#00F;font-family: georgia, verdana;font-size: 14px;} .downlistie li a:hover {text-decoration:none;color:#333333;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" >$(document).ready(function(){ $('li.title a').click(function(e){ var dropDown = $(this).parent().next(); $('.downlistie').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); e.preventDefault(); }) });</script> <ul class="container"> <li class="accoi-menu"> <ul> <li class="title"><a href="#" >Blogger</a></li> <li class="downlistie"> <ul> <li><a href="#" >Templates</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Guides</a></li> </ul> </li> </ul> </li> <li class="accoi-menu"> <ul> <li class="title"><a href="#" >Wordpress</a></li> <li class="downlistie"> <ul> <li><a href="#" >Themes</a></li> <li><a href="#">Plugins </a></li> <li><a href="#">Guides</a></li> </ul> </li> </ul> </li> <li class="accoi-menu"> <ul> <li class="title"><a href="#" >About us</a></li> <li class="downlistie"> <ul> <li><a href="#" >About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy policy</a></li> </ul> </li> </ul> </li> </ul>



Adicionando Ou Removendo itens do menu

Embora seja um código longo ele se repete varias vezes para criar cada item do menu e submenu (menu accordion), então para editar os links do menu recomendamos que faça por partes e salve as alterações a cada trecho que terminar de editar assim não correrá o risco de perder seu trabalho.

O trecho a seguir é repetido varias vezes apenas trocando os nomes dos links (texto que aparece no menu):

<li class="title"><a href="#" >Blogger</a></li> 
<li class="downlistie">
<ul>
<li><ahref="#" >Templates</a></li>
<li><ahref="#">Widgets</a></li>
<li><a href="#">Guides</a></li>
</ul></li></ul></li>

<li class="title"><a href="#" >Blogger</a></li>
 Altere somente o texto Blogger que será o texto visível no seu menu. Mas não apague o sinal # que está no lugar do link senão o menu não funciona.

Os itens do menu (links) que aparecem são as linhas:
<li><ahref="#" >Templates</a></li> 

Que você pode ver que são repetidas varias vezes apenas com um texto diferente, portanto edite cada uma delas trocando a palavra templates pelo que deseja mostrar no seu menu.

E também altere o link apagando o sinal # e colocando no lugar dele o endereço da pagina que deseja abrir quando alguém clicar no menu. Veja abaixo um exemplo deste trecho de código alterado com links do nosso site:

<li class="title"><a href="#" >Dicas para Blogs</a></li> 
<li class="downlistie">
<ul>
<li><ahref="http://www.hqmdesign.blogspot.com/p/novas-dicas-para-blog-atualizacoes.html" >Posts Recentes</a></li>
<li><ahref="http://www.hqmdesign.blogspot.com/p/dicas-para-blogs-no-facebook.html">Mais Curtidas no Facebook</a></li>
<li><a href="www.hqmdesign.blogspot.com/2010/03/mostrar-slides-com-as-postagens.html">Criar Slides</a></li>
</ul></li></ul></li>

Créditos :
Dicas Para blogs