Para ter um menu que se expande, copie o código abaixo, vá até o HTML do seu blog, procure pela tag <head>
Agora cole o codigo abaixo depois da tag <head>
<style type='text/css'>.texthidden {display:inline}.shown {display:block}</style><script type='text/javascript'>document.write('<style>.texthidden {display:none} </style>');</script><script type='text/Javascript'>function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>
<style type='text/css'>
#dolphincontainer{position:relative;height:43px;color:#f06214;background:#ffffff;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:34px;font-size:12px;text-transform:uppercase;
font-weight:bold;background:#F06214 url() repeat-x bottom left;
padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#ffffff;text-decoration:none;
padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#000000;
background:transparent url() repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#FCD9B6;
background:#ffffff url() no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 18px 0 0;width:auto;
background:#805E5E url() no-repeat top right;height:33px;}
</style>
Agora clique em "Elementos de página e depois em "Adicionar novo elemento de página" ao abrir a tabela, clique em HTML/Javascript
Agora pegue o segundo código:
<a href="javascript:void(0);" onclick="expandcollapse('favoritos')"><img border="0" src="
http://img175.imageshack.us/img175/3509/1favoritosbrancobutoniud1.jpg"/></a><br/>
<ul id="favoritos" class="texthidden">
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
</ul>
Modifique onde estão escrito "favoritos" pelo nome do menu que você quiser,mas atenção tem que mudar e escrever igual nos dois lugares onde estão escrito"favoritos".
Onde esta em amarelo você pode modificar por link de outra imagem
Fazendo um menu expansivel
Marcadores: TutoriaisPostado por Ev@dro às 08:20
Assinar:
Postar comentários (Atom)
1 comentários:
Ótima dica sobre menu expansível.
Coloquei no meu blog e deu certo.
Agora uma pergunta:
Tem como colocar outro menu expansível? (um independente do outro)
Walteir Freire
Postar um comentário