• » Introdução PHP
  • » Box em Video
  • » Adicionando PHP á HTML
  • » Postagem com PHP
  • » Progamas Atualizados!
  • » Concurso de Layout!

  • Nesse tutorial, você vai aprender a adicionar um menu em JQuery que ficará no topo do blog.


    Demostração



    É recomendável que você faça um backup completo de seu template antes de prosseguir. 

    Vamos começar adicionando o script. Procure por: 

    </head>

    Adicione o código a seguir:

    <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 vamos ao CSS, procure pela tag:

    ]]></b:skin>

    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:

    <header> ou <div id='header-wrapper'>

    O código a ser adicionado é:

    <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='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li> <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li> </ul>

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

    Nenhum comentário:

    Postar um comentário