Menu que ao passar o mouse sobre a imagem ele mostra os links “escondidos”.
Pode também pode ser usado como outras ferramentas além do menu ;)

Exemplo:

1. Acrescente o código abaixo antes da tag </head>:

<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".l-corpo").hide();
$(".l-top").click(function(){
$(this).next(".l-corpo").slideToggle('fast');
}); }); </script>

2. Depois coloque no seu CSS:

.lista {
 margin:0px;
 padding:0px;
 width:130px; /*largura*/
 }
.l-top {
 cursor:pointer;
 position:relative;
 text-align:center;
 }
.l-corpo {
 padding:10px;
 text-align:left;
 color: #000;  /*cor da fonte quando não tem link*/
 font-family:Verdana;
 font-size:11px;
 display:none;
 }
.l-corpo a{
 color: #49aec0;  /*cor da fonte link*/
 text-decoration:none;
 }
.l-corpo a:hover{
 color: #fe5a27;  /*cor da fonte ao passar o mouse sobre o link*/
 text-decoration:none;
 }

3. Onde quer que apareça o menu, adicione:

<div class="lista">
<img src="www.LINKDASUAIMAGEM" class="l-top">
<div class="l-corpo">
<center>
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a><br />
<a href="www.SEULINKAQUI.com">Link</a>
</center>
</div>
</div>

Obs: Se possível, sempre deixe a largura da class .lista da mesma largura da sua imagem para que não desconfigure a centralização dos links escondidos.

Créditos: Everything 4 Tumblr

Posts Relacionados:

Menu que ao passar o mouse sobre a imagem ele mostra os links “escondidos”. Pode também pode ser usado como outras ferramentas além do menu ;) Exemplo: 1. Acrescente o código abaixo antes da tag </head>: 2. Depois coloque no seu CSS: 3. Onde quer que apareça o menu, adicione: Obs: Se possível, sempre deixe [...]

Pra quem não sabe o que é Tooltip, trata-se de daquele balãozinho com alguma frase/palavra quando você passa o mouse em cima de um link, como esse aqui do blog:

Tooltip

Nesse tutorial vou ensinar à vocês como colocar no seu blog e/ou site do mesmo jeito que está no meu ;) e o detalhe é: sem precisar utilizar plugin, ha!

1º Passo. Procure pela tag  </head>  e cole antes dela o código abaixo:

<script type="text/javascript" language="JavaScript" src="http://dl.dropbox.com/u/51756503/qTip.js"></script>
<script src="http://dl.dropbox.com/u/51756503/jquery.min.js"></script>

2º Passo. No seu CSS, cole o código abaixo e modifique as cores, formas, como quiser:

div#qTip {
padding: 3px;
border: 1px solid #1caffa;  /*------ COR DA BORDA -----*/
display: none;
background: #1caffa; /*------ COR DO PLANO DE FUNDO-----*/
color: #ffffff; /*------ COR DA FONTE -----*/
font: bold 9px Verdana, Arial, sans-serif; /*------ ESTILO DA FONTE, TAMANHO E TIPO -----*/
position: absolute;
z-index: 1000;
}

Para que seu tooltip fique com cantos arredondados*, acrescente no css acima, após border:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

*Não funciona no navegador Internet Explorer.

3º Passo. Para que seu tooltip apareça, acrescente o Title=”Seu texto aqui“, por exemplo:

<a title="Seu texto aqui" href="www.seu_link.com">Nome do link</a>

ou

<img title="Seu texto aqui" src="www.link_da_imagem.com" alt="" />

Posts Relacionados:

Pra quem não sabe o que é Tooltip, trata-se de daquele balãozinho com alguma frase/palavra quando você passa o mouse em cima de um link, como esse aqui do blog: Tooltip Nesse tutorial vou ensinar à vocês como colocar no seu blog e/ou site do mesmo jeito que está no meu ;) e o detalhe [...]