Menu Vertical Accordion com JQuery

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Eu já publiquei um tutorial ensinando a instalar um Menu Sanfona Accordion com CSS3, construído apenas com o uso de CSS.
Hoje veremos como instalar um outro menu vertical com efeito deslizante, que funciona à base de Jquery.

Este Menu funciona á base de script em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela.

1º passo:

Copie o código abaixo e cole-o ACIMA de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='http://dl.dropbox.com/u/3173073/HacksBlogger/ddaccordion.js' type='text/javascript'/>
<script type='text/javascript'>
ddaccordion.init({
headerclass: &quot;silverheader&quot;, //Shared CSS class name of headers group
contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group
revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot; or &quot;mouseover
mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>
<style type='text/css'>
.applemenu{
margin: 5px 0;
padding: 0;
width: auto; /*largura do menu*/

}
/*---títulos do menu---*/
.applemenu div.silverheader a{
color: #FFF; /*cor dos links dos títulos */
background:#BEBEBE url(ENDEREÇO-DA-SUA-IMAGEM) repeat; /* cor de fundo dos títulos*/
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border-top:1px solid #CCC; /* borda no topo*/
border-bottom:1px solid #CCC; /* borda no bottom*/
font-size:120%; /* tamanho da fonte dos títulos*/
font-family:Arial, Tahoma, Verdana; /* tipo de fonte dos títulos*/
font-weight:bold;
text-shadow: #000 1px 1px 1px; /* efeito sombreado nos títulos*/
display: block;
position: relative;
width: auto;
padding: 5px 0 ;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: #FFF; /* cor dos links dos títulos ativos e visitados */
}

.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(http://3.bp.blogspot.com/_q4j3j-JA2ro/SXe2S_YaNmI/AAAAAAAAIyQ/9AneWEYwVXw/s320/silvergradient.gif); /* cor de fundo dos títulos no estado hover*/
color: #FFF;/*cor dos links dos títulos no estado hover*/
}
/*---conteúdo do menu---*/
.applemenu div.submenu{
background-color:#F4F4F4; /*cor de fundo do conteúdo*/
color:#333; /* cor do texto do conteúdo*/
padding: 5px;
height:auto;
}
</style>

As partes que você pode e deve editar relacionadas ao estilo CSS do menu, estão destacadas em vermelho no código.
Este campos foram destacados para você conseguir identificar melhor no código os elementos que deverão ser editados por você de acordo com as cores do seu blog.
Lembrando que onde está: url(ENDEREÇO-DA-SUA-IMAGEM) se refere ao local que você poderá inserir o endereço da sua imagem, se caso você quiser utilizar uma imagem para seu menu. Se preferir utilizar apenas cores, apague esta parte do código.

Para a cor de fundo dos títulos no estado hover, eu utilizei esta imagem:

Caso você queira usar a mesma imagem, eu recomendo que você salve-a e hospede-a no seu álbum preferido para evitar problemas eventuais de hospedagem e a imagem sumir.
Depois de hospedada, substitua o endereço da imagem no trecho

background-image: url(http://3.bp.blogspot.com/_q4j3j-JA2ro/SXe2S_YaNmI/AAAAAAAAIyQ/9AneWEYwVXw/s320/silvergradient.gif); 

Se você quiser pode utilizar uma outra imagem, fica a seu critério.

2º passo:

Para o menu funcionar, você deve inserir o código HTML.
Vá no menu “Layout” ? clique em “Adicionar um gadget” ? Escolha tipo “HTML/Javascript” e cole o seguinte código lá:

<div class="applemenu"><!-- Inicio Menu Vertical Accordion JQuery-->

<div class="silverheader">
<a href="LINK-AQUI">Título 1</a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 1<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 2 </a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 2<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 3 </a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 3<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 4 </a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 4<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 5 </a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 5<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 6</a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 6<br />
</div>

<div class="silverheader">
<a href="LINK-AQUI">Título 7 </a></div>
<div class="submenu">
Coloque aqui o conteúdo para o Titulo 7<br />
</div>

</div><!-- Fim Menu Vertical Accordion JQuery-->

Acrescente seus links, títulos e conteúdo ao seu menu e pronto!

Antes que me perguntem: O efeito deste menu é exatamente este que está no tutorial e funciona à base de javascript. Quaisquer alterações que você queira fazer relacionadas ao efeito deste menu ficará por sua própria conta. Se quiser alterar o efeito, “fuce” o script e boa sorte!