Novidades

09 setembro 2012

Tutorial - Menu deslizante



Hello pessoal tudo bem como vocês?bom esse tutorial e de como colocar aquele menu "deslizante" esse:







que conserteza estarem usando em meus próximos Layouts que vai ser lá pro dia 20/09 
mas deixando um pouco de lado os Layouts e voltando ao tutorial, esse menu e lindo né? e facil  de fazer basta esforçar-se um pouco e prestar mais atenção! veja o tutorial:




vá em modelo -> editar HTML aperte F5 e pesquise por

   ]]></b:skin>
depois de achar a tag cole o seguinte código acima dela:


/* 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/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);}


No margin: -25px;

Almente esse número se tiver algum espaço quando você passa o mouse

depois procure por:

 em modelo -> editar HTML aperte F5 e pesquise por
      </head>
e cole acima da tag o 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> 
agora pesquise por:

      <header> 
e cole esse 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='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>
e cole acima da tag o código


depois de tudo seu menu está pronto! 

PS: Se você errar algo pode sair outro menu!

beijos, fabi

créditos dos códigos: The baby
post: Bloguinho Cute

crédite os dois se reblogar.

3 comentários:

Regrinhas!
1- aceito seguindo segue de volta
2- sem xingamentos! se expresse de uma maneira mais civilizada.
3- aceito criticas e Elogios