Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1502920770
Vida do cache: 1502963970
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Menu Vertical Accordion com JQuery

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.

Menu Vertical Accordion com JQuery


Demo

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!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

14 Comentários

  1. marcia bispo disse:

    Olá Vanessa, retorno para dizer que consegui um outro menu sanfona que funciona como quero, são as condicionais que fazem a diferença. Mesmo assim agradeço por seus posts que são ótimos.

  2. Thassiano disse:

    muito legal esse menu porem estou com um problema, so funciona perfeitamente no google chrome. nos outros como opera,mozilla,ie n funciona. se puder me ajudar agradeço

  3. Thassiano disse:

    ola estou com um problema no meu site eu coloquei certinho esse menu so que so fica bom no google chrome, ja tentei no opera,no mozilla, Ie e nada. se puder me ajudar

  4. Sebastian83 disse:

    O que eu fiz só se expande o primeiro título, os demais não se abrem, o que será?

  5. Taillard disse:

    Amiga aqui nao funciona nem com a mulestiaaa!kkkkkkkkkkkk

    Blogger ta bugado meu blog opoderdamente.com ta todo bagunçado!
    Quase pirandooo!

  6. Raphael disse:

    Muito boa essa dica, já estou usando no meu blog em uma página estática dentro do post ao invés de usar na sidebar, mas tenho uma dúvida. Existe algum limite de menus que eu posso colocar ? Porque eu coloquei 18 menus seguidos e funcionaram perfeitamente mas quando coloco mais eles nao abrem ao se passar o mouse em cima, o que será que estou fazendo de errado ?

  7. Raphael disse:

    Ótima dica, mas como faço para colocar um menu desse dentro de um post, em uma página estática para que eu pudesse inserir vários tópicos, cada um com seus conteúdos ?

  8. Állefy Max disse:

    Excelente postagem, Srtª Clau.

    Seres humanos costumam ter grandes imaginações.
    Eu pensei no seguinte:

    "Será que teria como 'juntar' esse post com o post de mostrar somente o título dos posts na página inicial?!"

    Creio que você entendeu o que eu quero fazer: "Ao entrar no blog, aparece somente os títulos do blog. Ao por o mouse sobre cima, a postagem do respectivo título se expande. Isso ficaria ótimo se também viesse acompanhado com um 'leia mais'.

    E então? Tem como fazer isso? Disponibilizaria para nós?

  9. JonathanFelipe disse:

    Muito bem, existem diveeersos tipos de menu legais, mais esse é o melhor!

  10. Fraan Simas disse:

    Muito legal… Gostei muiito!!
    Eu nem sabia que isso podia ser feito no blogger!!

    Obg! Beijos !

  11. .:: Clau ::. disse:

    FCAMC
    Eu já publiquei uma série de modelos de menus horizontais.
    Vc pode consultar este tutorial:

    http://www.mundoblogger.com.br/2009/09/varios-menus-horizontais-para-blog.html

    e escolher o seu e instalar no seu blog. Se preferir, no marcador: Menu vc encontra vários outros artigos sobre diversos tipos de menus.

  12. ' FCAMC ' FÃ CLUBE AMO MILEY CYRUS disse:

    Olá clau, adorei, eu queria saber como coloca um menu horizontal em cima do cabeçalho, igual do site mundoblogger?????

  13. Andreza disse:

    Muito legal este menu!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.