18 de dez de 2012

Menu Deslizante

Olá Anjos! 
Hoje vou ensinar a colocar o menu deslizante que nem no Template Magic Wing. Eu aprendi no Mundo Blogger e no Kawaii World, fiquei em dúvida qual deles creditar, então vai os dois ^^


1- Vá no HMTL do seu blog, aperte CTRL+F e procure por:

]]></b:skin>
 2- ACIMA disso, 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: 25px;
    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/sobre.png);
}
ul#navigation .tutoriais a   {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}
ul#navigation .png a     {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}

Não vou explicar todo o código, mas acho que dá para entender só olhando.

3- Procure por:

 </head>
4- Acima disso, 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 disso, 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>
 Mude as partes em vermelho para a url e o nome da sua página.


6 comentários:

  1. nao intendi muito nao! Sera que vc pode postar mais tempolates?

    ResponderExcluir
    Respostas
    1. É só seguir os passos que dá certinho ;)
      Hmm vou ver se faço mais alguns quanto tiver tempo ^^

      Excluir
  2. É CADA TUTORIAL SURPREENDENTE ! O LAYOUT JÁ É UM SHOW, OS POSTS SÃO TUDO ORGANIZADOS . IMAGINA UM BLOG DESSES CHEIO DE TUTORIAIS, VAI PASSAR DO CHERRY BOMB DAQUI UNS DIAS RSRS ! PARABÉNS FOFA . E EU FIZ UM TESTE EM UM BLOG MEU COM ESSE TUTO DO "MENU DESLIZANTE", SAIU PERFEITO, PORÉM QUANDO EU PASSO O MOUSE EM CIMA ELE DESLIZA EM UMA VELOCIDADE MENOR QUE A DO SEU BLOG AQUI ! TENHO QUE VER ISSO . VLW LINDA *-*

    ResponderExcluir
    Respostas
    1. Obrigada! Fico feliz em saber que você gosta *--*

      Muito estranho, não tem nada pra mudar a velocidade ali. Talvez seja o navegador ^^

      Excluir
  3. Oi! Eu simplesmente AMO seu blog, sigo muitos tutoriais sobre layout de blog, porém esse tutorial em especial não consegui! Quando havia terminado tudo, seguido todos os passos e instruções, o código que deveria ficar acima de ]]> ficou no cabeçalho do meu blog! O que eu faço?

    ResponderExcluir
    Respostas
    1. Oi tudo bem? Você tentou fazer o tutorial novamente? Pode ser que alguma linha do código tenha ficado em um lugar errado, ou que tenha "ficado para trás" na hora de copiar o código da postagem. Isso acontece com bastante frequência, tente de novo que vai dar certo ;)

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!