MENU HORIZONTAL COM IMAGENS QUE SE EXPANDEM

Neste lindo menu os ícones ficam ocultos aparecendo ao ser clicado.

Para isso hospede o arquivo jquery abaixo em um site, aconselho o Google Sites. 

 jquery-1.3.2.js

Agora copie o próximo código e cole no HTML/Javascript, cole então o endereço dos  ícones no seu menu, e o endereço do jquery no local indicado.

<style> .navigation{ position:relative; margin:0 auto; width:915px; } ul.menu{ list-style:none; font-family:"Verdana",sans-serif; border-top:1px solid #bebebe; margin:0px; padding:0px; float:left; } ul.menu li{float:left;} ul.menu li a{ text-decoration:none; background: #C5D25D;/*cor do menu*/ padding:15px 0px; width:128px; color:#333333; float:left; text-shadow: 0 1px 1px #fff; text-align:center; border-right:1px solid #a1a1a1; border-left:1px solid #e8e8e8; font-weight:bold; font-size:13px; -moz-box-shadow: 0 1px 3px #555; -webkit-box-shadow: 0 1px 3px #555; } ul.menu li a.hover{ background-image:none; color:#fff; text-shadow: 0 -1px 1px #000; } ul.menu li a.first{ -moz-border-radius:0px 0px 0px 10px; -webkit-border-bottom-left-radius: 10px; border-left:none; } ul.menu li a.last{ -moz-border-radius:0px 0px 10px 0px; -webkit-border-bottom-right-radius: 10px; } ul.menu li span{ width:64px; height:64px; background-repeat:no-repeat; background-color:transparent; position:absolute; z-index:-1; top:80px; cursor:pointer; } ul.menu li span.link1{ background-image:url(IMAGEM DO LINK 1); left:26px;} ul.menu li span.link2{ background-image:url(IMAGEM DO LINK 2);left:163px;} ul.menu li span.link3{ background-image:url(IMAGEM DO LINK 3);left:293px;} ul.menu li span.link4{ background-image:url(IMAGEM DO LINK 4);left:423px;} ul.menu li span.link5{ background-image:url(IMAGEM DO LINK 5);left:553px;} ul.menu li span.link6{ background-image:url(IMAGEM DO LINK 6);left:683px;} ul.menu li span.link7{ background-image:url(IMAGEM DO LINK 7);left:813px;} </style> <script src='https://sites.google.com/site/javascriptsajb/arquivos/JS%20-%20MENU%20HORIZONTAL%20COM%20IMAGENS%20QUE%20SE%20EXPANDEM.js?attredirects=0&d=1'/></script> <script type="text/javascript"> $(function() { var d=1000; $('#menu span').each(function(){ $(this).stop().animate({ 'top':'-17px' },d+=250); }); $('#menu > li').hover( function () { var $this = $(this); $('a',$this).addClass('hover'); $('span',$this).stop().animate({ 'top':'40px' },300).css({ 'zIndex':'10' }); }, function () { var $this = $(this); $('a',$this).removeClass('hover'); $('span',$this).stop().animate({ 'top':'-17px' },800).css({ 'zIndex':'-1' }); } ); }); </script>

Agora vá até o HTML de seu blog e procure pelo seguinte código:

<div id='header-wrapper'>

Acima dele cole o próximo código colocando o endereço de seus links. Preste atenção aos links para que correspondam as imagens.


<div class='navigation'> <ul class='menu' id='menu'> <li><span class='link1'/><a href='ENDEREÇO DO LINK 1'>LINK 1</a></li> <li><span class='link2'/><a href='ENDEREÇO DO LINK 2'>LINK 2</a></li> <li><span class='link3'/><a href='ENDEREÇO DO LINK 3'>LINK 3</a></li> <li><span class='link4'/><a href='ENDEREÇO DO LINK 4'>LINK 4</a></li> <li><span class='link5'/><a href='ENDEREÇO DO LINK 5'>LINK 5</a></li> <li><span class='link6'/><a href='ENDEREÇO DO LINK 6'>LINK 6</a></li> <li><span class='link7'/><a class='last' href='ENDEREÇO DO LINK 7'>LINK 7</a></li> </ul> </div>

Os ícones eu baixei do site Imagens Gratis

Gostou do tutorial? Alguma duvida deixe o seu comentário!