07/01/2008

Menu expansivel





Para ter um menu que se expande, como este acima, copie o código abaixo, vá até o HTML do seu blog, procure pelo código




<head>



e abaixo dele, cole o próximo código.




<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>


Salve.



Agora vá em layout,




Clique em "Adicionar um Gadget"






Clique então em HTML/Javascript




E cole o código abaixo, inserindo os links nos locais indicados.




<a href="javascript:void(0);" onclick="expandcollapse('lista de link 1')"><img border="0" src="http://4.bp.blogspot.com/-s6CyqbxG9Qc/UMKEo45Z7LI/AAAAAAAACe8/bTD9N7yu_8E/s1600/lista+de+links+1.png"/></a><br/>
<ul id="lista de link 1" 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>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 2')"><img border="0" src="http://2.bp.blogspot.com/-DIaFqV2Y_KE/UMKEpsgfXMI/AAAAAAAACfE/jDn-3w4Kdxw/s1600/lista+delink+2.png"/></a><br/>
<ul id="lista de link 2" class="texthidden">
<li><a href="http://templateseacessorios.blogspot.com" target="_blank">Templates & Acessórios </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>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
 </ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 3')"><img border="0" src="http://1.bp.blogspot.com/-R-cXvTSU2bA/UMKEqRb7DCI/AAAAAAAACfM/cz940vn6Fqo/s1600/lista+delink+3.png"/></a><br/>
<ul id="lista de link 3" 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>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
 </ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de link 4')"><img border="0" src="http://4.bp.blogspot.com/-ItZuoIN3y4U/UMKNauNSyFI/AAAAAAAACf0/zqYnY8_CrMc/s1600/lista+delink+4.png"/></a><br/>
<ul id="lista de link 4" 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>
<li><a href="http://endereço.com/" target="_blank">Escreva aqui o nome do blog</a></li>
 </ul>
<a href="javascript:void(0);" onclick="expandcollapse('lista de links 5')"><img border="0" src="http://2.bp.blogspot.com/-yT6HAEY6Yvo/UMKGX8xpCAI/AAAAAAAACfc/GWTvsb1CYcU/s1600/lista+de+link+5.png"/></a><br/>
<ul id="lista de links 5" class="texthidden">
<li><a href="http://endereçodofcebook.com" target="_blank">Facebook</a></li>
<li><a href="http://endereçodotwittercom" target="_blank">Twitter</a></li>
<li><a href="mailto:endereçodoseuemail@seuservidor.com" target="_blank">Email</a></li>
 </ul>


No código acima é perceptível uma variedade de cores, fiz isso para facilitar para vocês.

Azul-------------------Código do endereço dos botões, troque-os se forde seu agrado.
Vermelho-------------Código para a troca de endereço dos links
Rosa-----------------Código que é a chave para abrir o menu, não precisa mexer senão quiser
Laranja--------------Código dos nomes dos links


Abaixo 4 modelos de boões, caso prefira colocar sua inscrição:






10 comentários:

  1. Eu adorei, e estou testando em meu blog de teste. Eu usaria mais em posts. E percebi que cada post o id ñ pode ter o mesmo nome do id anterior. E tbm percebi que se fecha com a tag [/ul] Ms eu não gostaria de usar a tag [ul] pois deixa o formato estranho, tem como ñ usar o ul?

    ResponderExcluir
  2. He he he he....funcionou beleza e nao saco nada de programação, estou aposentado e fico o tempo todo fuxicando esse negócio de blog.
    Obrigado pela dica, assinarei com prazer seu blog.
    Um Abraço

    ResponderExcluir
  3. Olá querida... legal esse tuto, mas eu queria saber como faço pra colocar menu expansivo na minha navbar (menu horizontal) já existente em meu template.
    Se puder me ajudar ficarei grata!
    BjOs^^

    ResponderExcluir
  4. Como eu coloco essa setinha ao lado dos comentarios

    ResponderExcluir
  5. Quando cliquei no link aqui foi para o WordPress e não apareceu ninhem código!

    ResponderExcluir
    Respostas
    1. Oi Niker, depois demais de ano, atualizei o código. Abraços.

      Excluir
  6. como baixar o arquivo do segundo codigo , tentei mas entra na pagina do word press e nao sai

    ResponderExcluir
    Respostas
    1. Oi Zaraki, acabei de atualizar o código. Obrigada pelo aviso. Abraços.

      Excluir

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