.gif)
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