MENU HORIZONTAL COM IMAGENS QUE SE EXPANDEM

MENU HORIZONTAL COM IMAGENS QUE SE EXPANDEM

. Elke di Barros | 00:06 

Vi este menu e adorei ! Os ícones ficam ocultos aparecendo ao ser clicado em um belo efeito.  Veja AQUI o efeito.                      

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='AQUI O ENDEREÇO DO JQUERY'/></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 Dry Icons

Codigo CSS Codigos HTNL 14:32:00