9 de out. de 2008

Menu accordion

Encontrei este menu no blog Link Duzão. Fiz algumas alterações pois havia alguns intens sobrando (eu acho, rsrrsrs).







A primeira coisa a fazer é ir até o HTML do seu blog, procure pelo código:

<HEAD>

*Números em veremelho representam as cores do menu. Troque-as se quiser.

Agora cole todo código abaixo DEPOIS dele.



<script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js">
</script>
<style type="text/css">
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: #000000;
}
.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}
.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}
.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}
</style>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
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: false, //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: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(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
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //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: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(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>



Agora copie este segundo código e cole no HTML/Javascript em seu blog. Faça as modificações necessárias e salve. Você poderá colocar textos, códigos e imagens dentro deste menu.





<h3 class="mypets">LINK 1</h3>
<div class="thepet">

AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 2</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 3s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 4s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 5s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 6s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

<h3 class="mypets">LINK 7s</h3>
<div class="thepet">
AQUI DENTRO O QUE QUISER
</div>

17 comentários:

  1. Olá, olá!
    Sempre com boas dicas!
    Que esse parto seja rapidinho e que a felicidade de teres o teu bébé nos braços seja o principio de uma nova vida ainda com mais alegrias.
    Beijokas e obrigado por dares a hipótese de ficar a saber tanta coisa.

    ResponderExcluir
  2. Também vim trazer votos de um bom parto, hehehe com a disposição deve estar pra nascer, kkkkkkkk fiz até post com gabrielzinho voando na mamadeira do vacas hehehehe, adorei esta dica, minha nossa, tenho que colocar uma pá de coisinhas, é ótimo! beijos elkeeeeeeeeeee

    ResponderExcluir
  3. Ei Mimo, obrigada. Estou aqui ruinzinha, mas na demais. Beijos

    ResponderExcluir
  4. Mary, muito obrigada ! Daqui a duas semanas no máximo estará aqui o esfomeadinho, hehhee

    Beijos

    ResponderExcluir
  5. Olá elke , estou aqui , perguntando onde eu coloco pra fazer esse tipo de expladir tipo o que está no seu assim [+/-] ??

    ResponderExcluir
  6. Gostei muito do menu, mas eu tive q dar uma editada xD

    ResponderExcluir
  7. Parabéns esse menu é muito bom,
    Amei.
    Tenha uma ótima semana.
    Loira

    ResponderExcluir
  8. Ola elki adorei o menu mais eu queria saber se tem como mante-los fechados a cada vez que atualizar a pagina.

    ResponderExcluir
  9. massa esse blog
    eu reformei meu blog td aq
    parabéns ao dono

    ResponderExcluir
  10. Oi :D é possível colocar uma lista de LINKS dentro? Pq pelo que percebi só da pra colocar UM item... E eu gostei muito deste aqui xD Se puder ajudar! (: tem meu e-mail: damn-boi@hotmail.com valeu t+

    ResponderExcluir
  11. ÓTIMO ESSE BLOG. USEI ALGUMAS DICAS QUE ENCONTREI AQUI E VOU USAR MAIS KKKK. PARABENS!AMEI

    ResponderExcluir
  12. ótimo menu ,mas tem com coloca ele na horizontal?
    muito grato

    ResponderExcluir
  13. Amada Elke!
    Meu menu do meu blog simplesmente parou de funcionar,e esta abertooo deixando o blog bem compridoooo!
    Estou buscando um scrypt para baixar e colocar o endereço no lugar do antigo.
    De qualquer forma fico muito grata contigo.Porque na maioria das vezes somente,os tutoriais aqui do seu blog que realmente funcionam.
    Olha amiga explica em um tutorial como tu da estilo as paginas estaticas.
    Eu não achei ainda por aqui rainha.
    Beijos enormes!

    ResponderExcluir
  14. La vem moi de novo !!!
    Amiga o que ocorre que não podemos colocar mais de 7 itens nesse menu?
    Muito Grata!

    ResponderExcluir
  15. Elke ja podemos fazer esse menu no CSS sem necessidade de usar o javascrypte rainha!

    De qualquer forma muito grata pela sua boa vontade conosco!

    Vou deixar a fonte: O Blog da Gem@ que esta fornecendo o tutorial e redirecionando ao link de css play.

    Beijao!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube