2 de ago de 2010

Menu horizontal com imagens que se expandem

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
Os créditos pelo menu é do site Timpanus.

7 comentários:

  1. Aonde eexatamente deve colar o código (primeiro) ?
    por que sempre que eu tento parece uma msg dizendo que uma XSL não deu certo e que algum troço lá não foi fechado, dá pra ajudar ?

    ResponderExcluir
  2. ai naum consegui fiz tudo certo mas nao apareceu os icones?
    me ajuude

    ResponderExcluir
  3. @LSBR

    Você tem q colcar o primerio codigo em um gadget Html/Javascript

    ResponderExcluir
  4. ótima dica cara, mas fiquei meio confuso no começo. "Hospedar"? Como? Agradeço, Gigio.

    ResponderExcluir
  5. Gigio aconselho você a hospedar o arquivo jquery-1.3.2.js no DROPBOX

    ResponderExcluir
  6. não entendi nada! kk mas amei esse menu, quero mt faze-lo, pode explicar melhor? beijoos, http://imacrazy-bitch.blogspot.com

    ResponderExcluir
  7. eike, mai consegui achar esta parte do código
    <div id='header-wrapper'> ????
    O QUE FAZER? me da uma ajuda, bjs

    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