Menu Deslizante

Olá putchutchecos, Como estão? espero que bem.

Bom hoje vou ensinar a vocês um tutorial muito lindo que é o menu deslizante,ele é divo de mais ,deixa o blog com um outro visual,fica muito lindo ,eu mesma já utilizo ele em um dos meus blogs...

Bom vamos logo aprender rs, let's go!!!

 1 - Vá em Design > Editar HTML e procure por:

 ]]></b:skin>

2 - Acima da tag, cole:

/* Aqui definimos as propriedades CSS para a lista do menu */

ul#navigation {

    position: absolute;

    margin: -25px;

    padding: 0px;

    top: 0px;

    right: 150px;

    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: 5px;

    background-color:#d4d4d4; /*---cor de fundo---*/

    background-repeat:no-repeat;

    background-position:50% 10px;

    border:1px dashed #8d898b;  /*---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.8;

    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:13px;

    color:#3e3d3e; /*---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://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);

}

ul#navigation .sobre a      {

background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);

}

ul#navigation .foryou a    {

background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);

}

ul#navigation .tutoriais a   {

    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);

}

ul#navigation .png a     {

    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);

}

3 - Procure por:

 </head>

4 - Acima da tag cole:

<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>

5 - Agora procure por:

<header>

6 - Acima da tag cole:

<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='foryou'><a href='URL-AQUI'><span>For You</span></a></li>

 <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li>

 <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li>

</ul>

Prontinho gente espero que gostem... 

créditos Kawaii