Menu de topo com Imagem Deslizante

Nesse tutorial, você vai aprender a adicionar um menu em JQuery que ficará no topo do blog.

Demostração

É recomendável que você faça um backup completo de seu template antes de prosseguir.

Vamos começar adicionando o script. Procure por:

</head>

Adicione o código a seguir:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });
 
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>

Agora vamos ao CSS, procure pela tag:

]]></b:skin>

Acime dela adicione o código:

/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;  /*---cor da borda---*/
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
background-color:#CAE3F2;
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8; /*---cor do link---*/
    text-shadow: 0 -1px 1px #fff;      
}

/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbfBgazGWjqt4w-NhXam3w_1rCQqNVLcUak3tcgv3JKdMkN2Yi6LujmWIVZRbwECX55EH3o-OFuKIn9bQ8RChWdizoXTrrvUwyqhuXHkBrRb5VUBSfGDHGSaflpBLrOk6W-XnYFrTgnsg/s1600/home+%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRBVvd844xEC3uq-42esp_U93F7ld_vPDXVY7pgz7eK94IhD9vUlmGQ1e-hRUkNSQF3Fx9LEPOYGan09UDpCGnLWgkPo9WS3dFc-_FQi8pnl5VfK-IFwn-RBquBRAHEZpYPXBspE1wVGM/s1600/id_card+%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSKmsruprRmgPVjKsNcwGEiAowTzBemNFOKqhlhOzIDLLX1knKHjlz1h1z4ENVeNVB8M3Yz77Gnko1EzyHfolk_ykyURhkCSAfO8zIFzxYTnn22PdbEB2EboPfVdYWf22TXkco0pTj8s/s1600/mail+%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4MhF7gDj09qDA4V2VJ4R-lx6GDsCYNlTLgPch_vfn4IT9bYCL75w7TImTU0Y-6t-ykLWBaKGXYTVb37SrWPH0toLwZGLsLPDOp_lFqh_i_K1uPCX_e8VOxeveIiJzvhYi9WhOwL33T2g/s1600/rss+%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirk1JUYTJY2Srw4BaFmIjihu0NUf55DYbgGaP84OzB3Ivwj1eT0u4rHsNR4rKgtwE7n4SDLWDR4GIoS81Nv9tdSq19zRYn_AulbFHSARqNOb_3wwt1KAoftVAAOWPXvtUldmdbbXTNSoQ/s1600/images.png);
}

Pronto, agora por último, a estrutura HTML, que deverá ficar acima da tag:

<header> ou <div id='header-wrapper'>

O código a ser adicionado é:

<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Contato</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li>
</ul>

Pronto, seu menu está adicionado, agora é só editar ao seu gosto.

Nenhum comentário:

Postar um comentário