9 de out de 2011

Menu horizontal com efeito jquery



 Ví esse menu no excelente blog Tympanus e trouxe o código adaptado para o Blogger para vocês. Veja AQUI o DEMO e AQUI ele instalado no footer de um blog hospedado no Blogger. Não há muito segredo, o que haverá necessidade é de atenção absoluta para implementa-lo no blog.






Vá até o Modelo de seu blog, clique em Editar modelo
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011


Agora procure por: ]]></b:skin>  

 
 
Substitua então pelo código abaixo:


/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:3px 10px 10px -30px;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
 background: -webkit-linear-gradient(#042746, #fff);
   background: -moz-linear-gradient(#042746, #fff);
   background: -o-linear-gradient(#042746, #fff);
float:left;
width:170px;
height:77px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(http://lh6.ggpht.com/_NLOc3R4Yqfs/TN7g7VT6viI/AAAAAAAAB6I/ASvXrGS3N-c/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#E7EAED;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:12px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#E7EAED;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#000;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}
]]></b:skin>

 Procure agora por:

</head>


E substitua por este código abaixo

<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
</script>
  </head>


Salve.  Agora clique em Layout


Clique em Adicionar um Gadegt




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias, arrastando o widget para onde você quer mostrar o menu. (códigos na cor azul representam as imagens)


<ul id="sdt_menu" class="sdt_menu">

<li><a href="ENDEREÇO DO LINK 1"><img src="http://2.bp.blogspot.com/-0l1IrMTho4w/TmgqnYZGUfI/AAAAAAAAAyM/w0q8F2vB6DY/s1600/MENU1.png" alt=""/><span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 1</span>
<span class="sdt_descr">BLÁ 1</span></span></a></li>
<li><a href="ENDEREÇO DO LINK 2">
<img src="http://1.bp.blogspot.com/-qk1VO5etPyk/TmgqnqIV5cI/AAAAAAAAAyQ/bH8NYilj6M0/s1600/MENU2.png" alt=""/>
<span class="sdt_active"></span>

<span class="sdt_wrap">
<span class="sdt_link">LINK 2</span>
<span class="sdt_descr">BLA 2</span>
</span>
</a>
<div class="sdt_box">
<a href="ENDEREÇO DO LINK 1-A">LINK 1-A</a>
<a href="ENDEREÇO DO LINK 2-A">LINK 2-A</a>
<a href="ENDEREÇO DO LINK 3-A">LINK 3-A</a>
</div>
</li>
<li>
<a href="ENDEREÇO LINK 3"><img src="http://3.bp.blogspot.com/-UmhQ7Ewq8-E/TmgqoJMA6aI/AAAAAAAAAyU/mG9_yiVTW8w/s1600/MENU3.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 3</span>
<span class="sdt_descr">BLA 3</span>
</span>
</a>
</li>
<li>
<a href="ENDEREÇO LINK 4">
<img src="http://1.bp.blogspot.com/-5qKaJFTlKO4/TmgqogXXwSI/AAAAAAAAAyY/g_iV22dcsqg/s1600/MENU4.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 4</span>
<span class="sdt_descr">BLA 4</span>
</span>
</a></li>
<li>
<a href="ENDEREÇO LINK 5">
<img src="http://4.bp.blogspot.com/-VbzlF88hYvo/Tmgqo0zqEBI/AAAAAAAAAyc/v7GrQHD-qC4/s1600/MENU5.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 5</span>
<span class="sdt_descr">BLA 5</span>
</span>
</a>
</li>
<li>
<a href="ENDEREÇO LINK 6">
<img src="http://3.bp.blogspot.com/-TZHvBQYSFFg/Tmgrug524UI/AAAAAAAAAyg/I4-XRzwXhr4/s1600/MENU6.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">LINK 6</span>
<span class="sdt_descr">BLA 6</span>
</span>
</a>
<div class="sdt_box">
<a href="ENDEREÇO DO LINK 6-A">LINK 6-A</a>
<a href="ENDEREÇO DO LINK 6-B"> LINK 6-B</a>
<a href="ENDEREÇO DO LINK 6-C">LINK 6-C</a>
</div>
</li>
</ul>


Agora...
conteudo.

6 comentários:

  1. Olá,. Eu tenho uma dúvida se puder me ajudar, fico muito agradeçido. Eu queria saber como adiciono imagem mapeada com links no HTML do blogger ou como gera link de imagens mapeadas. No meu caso, eu queria adicionar a imagem mapeada com links no foot do html. Pode me ajudar? Desde já, muito obrigado!

    ResponderExcluir
  2. então ele até colocou o menu mas quando passo com o mouse encima dele a imagem não aparece, e eu nem modifiquei nada so coloquei no blog os mesmos codigos que estão aqui no seu blog, se poder me ajudar agradeço aqui está o link com o menu com problema
    http://musculaointensa.blogspot.com/

    ResponderExcluir
  3. Dona do blog quero fazer uma pergunta bem simples que você deve saber quando ajente passa o mause em cima da letra , fica laranja o seu né ? quero o meu rosa mais não consigo achar em lugar nenhuma tem como me ajudaR?

    ResponderExcluir
  4. é o seguinte deu tudo serto poren nao aparece as imagens se puder ajuda agradeço

    ResponderExcluir
  5. Oi boa noite,

    Testei menu no modelo simples conforme mencionado no passo a passo porem ele não funcionou...
    poderia me informar se tem algo errado com codigo ou se problema é blogger???

    fico no aguardo obrigado

    ResponderExcluir
  6. Amei este menu, infelizmente não funcionou, será que está faltando algo?

    ResponderExcluir

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