Menu Horizontal com CSS e Jquery (efeito hover) para Blogger - BlogSpot 1

João Santos | 12:30 |



Olá pessoal. Rodando pela net, e ao me deparar com o blog Template novo Blog, vi um artigo que ensinava passo a passo como instalar um menu horizontal com CSS e Jquery com efeito hover, Veja o demo > AQUI < e me lembrei que um leitor do blog me pediu para publicar o tal menu. O criador do menu foi o Soh do blog Soh Tanaka. O  menu é ótimo para quem gosta desse efeito e para aqueles que não tem nenhum menu horizontal, será ótimo. Fiz algumas alterações, pois os iniciantes, não iriam entender. Vamos ao que interessa...

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:





Feito a figura, hospede em seu site preferido, pode ser em qualquer lugar, reserve o link da imagem. Agora vá em Design ~> Editar HTML e procure por esse trecho no seu template  ]]></b:skin>, adicione todo o código ABAIXO desse trecho.



<style type='text/css'> .container {     width: 520px;     height: 100px;     position: absolute;     top: 10%; left: 60%;     margin: 0px 0 0 -80px;     overflow: hidden; } img {border: none;} ul#topnav {     margin: 10px 0 20px;     padding: 0;     list-style: none;     font-size: 1.1em;     clear: both;     float: left;     width: 520px; } ul#topnav li{     margin: 0;     padding: 0;     overflow: hidden;     float: left;     height:40px; } ul#topnav a, ul#topnav span {     padding: 10px 10px;     float: left;     text-decoration: none;     color: #fff;     clear: both;     height: 20px;     line-height: 20px;     background: #1d1d1d; } ul#topnav a {    color: #7bc441; } ul#topnav span {     display: none; } ul#topnav.v2 span{     background: url(coloque aqui a url da imagem) repeat-x left top; } ul#topnav.v2 a{     color: #555;     background: url(coloque aqui a url da imagem) repeat-x left bottom; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() {            $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag     $(&quot;#topnav li&quot;).each(function() { //For each list item...         var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag         $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag     });     $(&quot;#topnav li&quot;).hover(function() {    //On hover...         $(this).find(&quot;span&quot;).stop().animate({             marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels         }, 250);     } , function() { //On hover out...         $(this).find(&quot;span&quot;).stop().animate({             marginTop: &quot;0&quot; //Move the span back to its original state (0px)         }, 250);     });     }); </script>



Feito isso, altere as partes de vermelho com a URL da imagem que você hospedou anteriormente, salve,  volte em Design, ~> Elementos da Página  ~> Adicione um Gadget HTML/JavaScript e em seguida, cole todo o código abaixo.


<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Portfolio</a></li> <li><a href='#'>Blog</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Contact</a></li> </ul>


Feito tudo, procure uma posição acima das postagens e abaixo do seu banner.(header), como mostra o demo que vimos no início do artigo. Lembrando que temos que alterar as seguintes partes do código acima. onde está # é o lugar que será inserido o seu link desejado. E de acordo com o que você quer que apareça nos botões, você irá alterar onde está "home" ou "services", ai vai de sua imaginação.
Qualquer dúvida não deixe de me contatar.

Até a próxima!

Gostou do artigo? Assine via e-mail e receba atualizações do blog imediatas em sua caixa de entrada ou se preferir assine via RSS/Feed. Vira fã no Facebook.

1 Responses So Far:

Jessica disse...

Muuuuuuiiito obrigado!
Tu explico direitinho e agora funciono no meu blog antes não aparecia nada :)

- Comentário Moderados -

Não aceitamos por aqui:

- comentário nada a ver com o artigo.

- Links de propaganda (Spam).

- Link de divulgação de seu Blog/Site.

- Pedido de parcerias.

- Com palavrões e onfensas.

Enfim, é simples coisas desnecessárias serão removida, qualquer dúvida temos uma página de Contato.
Agradeço pela compreensão.

 
DiretorioUP Copyright © 2010 is Designed by Lasantha Page Rank Technology Blogs - Blog Rankings Technology (Electronics) - TOP.ORG Home | RSS Feed | Comment RSS