Menu de topo com imagem deslizante
Autor: Hudson | Publicado: 2013-01-28T15:20:00-02:00



&nbsp; 
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:


&lt;/head&gt;

Adicione o código a seguir:

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



Agora vamos ao CSS, procure pela tag:

]]&gt;&lt;/b:skin&gt;

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(http://1.bp.blogspot.com/-8kXTrCSJ6TI/T7PpNQtumCI/AAAAAAAAAF4/TfFELS_TSJk/s1600/home%2B%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(http://2.bp.blogspot.com/-8b0NOVUuGpQ/T7PpNqWONsI/AAAAAAAAAGE/ncafVsfgxg8/s1600/id_card%2B%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(http://2.bp.blogspot.com/-tmsZ5WfQVy0/T7Pp1sJqh2I/AAAAAAAAAGo/tO5AWC7Xb48/s1600/mail%2B%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(http://1.bp.blogspot.com/-jMeVHtFdzbc/T7Pp1Qq2rtI/AAAAAAAAAGc/HaGlP612qSE/s1600/rss%2B%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(http://3.bp.blogspot.com/-WWPgJGVlBZU/T7PpNy2-9fI/AAAAAAAAAGQ/Z2aP6VN4SKA/s1600/images.png);
}
Pronto, agora por último, a estrutura HTML, que deverá ficar acima da tag:

&lt;header&gt; ou &lt;div id='header-wrapper'&gt; 

O código a ser adicionado é:

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

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

Tutorial adaptado de: Mundo Blogger