Menu com efeito acordeon

Ola amigos, destaque os assuntos mais populares e preferidos no seu blog de uma forma diferente. Hoje vamos aprender a fazer um menu super útil com um efeito semelhante ao acordeon.



Clic e Veja o exemplo


-------------------------------------------------------------------------------------
Copie o código abaixo, cole antes de </Head>

    <script src='https://sites.google.com/site/baixardp/slide/mootools-core.js'
type='text/javascript'/>
<script src='https://sites.google.com/site/baixardp/slide/byslidemenu.js'
type='text/javascript'/>
<style type='text/css'>
ul.bsm{
margin: 0px auto;
border:1px solid #ffffff;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
    </style>

-------------------------------------------------------------------------------------
Agora copie o código abaixo, cole antes de </Body> e salve

    <script type='text/javascript'>
window.addEvent('load', function(){ var slideMenu = new BySlideMenu(); var verticalmenu = new BySlideMenu('verticalmenu',
{vertical: true}); });     </script>

Cada código abaixo corresponde a direção do menu, Vertical ou Orizontal.
-------------------------------------------------------------------------------------
Escolha o efeito desejado e cole em HTML/Java Script.

Menu Orizontal

<ul class="bsm" id="byslidemenu">
<li class="first">
<a href="Endereço da Página"><img src=" Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
</ul>

Menú Vertical

<ul class="bsm vertical" id="verticalmenu">
<li class="first">
<a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
<li><a href="Endereço da Página"><img src="Endereço da Imagem" /></a></li>
</ul>

 Creditos : Dany Place