Foi testado na plataforma Tumblr, mas acredito que funcione aqui no Blogger também. Vamos ao tutorial.
Veja Online {xx}
Lembrando mais uma vez, que esses códigos foram retirados de themes blogskins, porém modifiquei algumas coisas para você entender melhor.
Vamos ao código. Adicione o código abaixo em seu css (style):
/****** css do botao, menu por gallyack learn-html*******/ .botmenu { letter-spacing: 1px; background: #; font-size: 10pt; font-family: georgia, tahoma; color: #28dbb1; display: block; margin: 1px 0; padding: 3px 3px 3px 3px; text-align: left; text-decoration: none; text-transform: none; text-align:center; -webkit-transition-duration:0s; cursor: pointer; width: 200px;} .botmenu:hover { border: 0px solid #ddd; border-bottom: transparent; border-right: transparent; text-transform: uppercase; background: transparent; letter-spacing: 3px; } /****** css das caixas onde ficará o menu por gallyack learn-html*******/ .nav{position:fixed; background:#eee; padding:7px; top:200px; left:100px; width:200px; } .navcaixa{ padding: 7px; font-family: georgia; font-size: 11px;}
Bom, é ai que você deve modificar tamanho, cores, fonts, etc. Acho que todos sabem como fazer isso, não é?
Agora adicione o código abaixo depois de <body>:<!----------NAO MODIFIQUE NADA NESTE CODIGO----------> <script type="text/javascript"> function navigate(id) { document.getElementById('main').innerHTML=document.getElementById(id).innerHTML }</script> <script>function changeNavigation(id){document.getElementById('main').innerHTML=document.getElementById(id).innerHTML}</script> <base target='_blank'> <script language="JavaScript1.2"> var ns6=document.getElementById&&!document.all?1:0 var head="display:''" var folder='' function expandit(curobj){ folder=ns6?curobj.nextSibling.nextSibling.style:document.all[curobj.sourceIndex+1].style if (folder.display=="none") folder.display="" else folder.display="none" }</script>Agora, adicione o código abaixo onde você quer que apareça o menu:
<div class="nav"> <div class="botmenu" onClick="expandit(this)">menu1</div> <span style="display:none" style=&{head};> <div class="navcaixa"> Então ficaria assim aqui. Então ficaria assim aqui. Então ficaria assim aqui. Então ficaria assim aqui. </div> </span> <div class="botmenu" onClick="expandit(this)">menu2</div> <span style="display:none" style=&{head};> <div class="navcaixa"> Aqui ficaria assim então.... Aqui ficaria assim então.... Aqui ficaria assim então.... Aqui ficaria assim então.... </div> </span> <div class="botmenu" onClick="expandit(this)">menu3</div> <span style="display:none" style=&{head};> <div class="navcaixa"> Exemplo de como iria ficar aqui.... Exemplo de como iria ficar aqui.... Exemplo de como iria ficar aqui.... Exemplo de como iria ficar aqui.... </div> </span> </div>Modifique o nome de cada menu, e a descrição. Somente isso.
Se você fizer tudo certinho, irá funcionar ^^
Se usar já sabe, né? Comente aqui. Qualquer dúvidas, fiquem a vontade para tirar-las.
Não Repasse!!
0 comentários :
Postar um comentário