Menu deslizante no topo



Boa tarde leitores! Hoje vou ensiná-los a fazer o menu deslizante. Já viram em algum blog um menu que fica no topo da página e que desliza quando você passa o cursor? Não sabem do que eu estou falando? Olha então qual é o menu:


Já sabe de qual menu eu estou falando agora né? Eu já vi muito blogs usando esse tipo de menu, mas não achei quase nenhum tutorial só o do Mundo Blogger e resolvi postar de um jeito que fosse mais fácil para vocês entenderem!


Clique em "continue lendo" por obséquio ...


Abra seu HTML, aperte ctrl+f e procure por ]]></b:skin>

Abaixo da tag destacada cole o seguinte código:
/* Menu deslizante por mustachevintage.blogspot.com * não retire os créditos */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:#DBDBDB; /*---cor de fundo---*/    background-repeat:no-repeat;    background-position:50% 10px;    border:1px solid #BCBCBC;  /*---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:#BCBCBC;opacity: 1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}ul#navigation li a span{    letter-spacing:2px;    font-size:11px;    color:#fff; /*---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(URL da imagem);}ul#navigation .sobre a      {background-image: url(URL da imagem);}ul#navigation .contato a    {background-image: url(URL da imagem);}ul#navigation .faq a   {    background-image: url(URL da imagem);}


Agora procure por </head> e antes da tag cole o seguinte código:
<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>



E pra terminar procure por <header> e cole o seguinte código acima da tag:

 
<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='faq'><a href='URL-AQUI'>
<span>F.A.Q</span></a></li></ul>

Bom Domingo! 

2 leitores soltaram o verbo:

  1. no meu blog n ta funcionando o primeiro código fica visível para todos que entrarem
    www.clubdafa.blogspot.com

    ResponderExcluir

Leia, é importante!

- Todos os comentários serão lidos e quando possível, respondidos;
- Comentários com apenas "Oi, segue o meu blog?" não serão publicados;
- No final do comentário deixe o link do seu site ou blog para que eu possa retribuir a visita;
- Encomendas e pedidos deverão ser feitos na Ask (menu).

Obrigada por comentar e volte sempre!