Design Fanmytsu: Menu de topo com imagem deslizante

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

Demonstraçã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/AVvXsEgnAviDoX79NWL2PL6yr9JUlcMTD9tU7yOgdZUy_SW4duLHxiqKFE5AX3crK-p6FpFf0-e1yMAfVFW0fRq0hvGdRtKIS0nvLQyJysYZkksUx-spJfv0U4cy0U6qmSua3EMtvcbUzj_O9Xo/s1600/home+%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMi8h-aVIqwIebkPRlhR3qlhTQt2zZR1rO_-dGcotDraQctLSXA4QLbW8V2qPu7Q7Rt43_N7O8X1ZKKy-nG-np392DXjvZ6Xg_IzU-liD1hOMULPX1n2UO0bevnln_EtjXf4zr6z-HzY/s1600/id_card+%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Jt6DExRtjlY4yRT6dVFJ37AqBR503jl2LZinsb7xZ2vGMFDYwZmo1DGODCzLmYE5msh40qSw7sbPG5_iT23jXM5YrQ_1c_2-6RwXvAxsaAUn8kNHrcfX-Hh3gJrpq9ot9trMi5QXpFo/s1600/mail+%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEich9vWCbRCC_YQY2Ciw56gzra9KMRdRg7gqu6YN2OiqNCsicvXn95vWwRalR_zj8e0IoMX_nCnCEyohL8zykZeap8YArnyO3dNTIKpjPzxd6g3E89kem9FLzpWH1yZEl_dUFzUaWZP2ys/s1600/rss+%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNMhH07zdFVCYE_A7_Xhb6Wq7UsljZQfSZFaEll4qVk9f-eqjpwuUPVhpaM9ToGuU0cDSTLVBPiLzyqqj9zc8pY73Tggk9WvAmY5Y4r7ZpZ8kpwutAy_idBOLnCD7z5zfKtRpD-klA7A/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.

Tutorial adaptado de: Mundo Blogger

Principal

Tutoriais

Downloads

Parceiros