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:
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; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
$('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },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!
no meu blog n ta funcionando o primeiro código fica visível para todos que entrarem
ResponderExcluirwww.clubdafa.blogspot.com
Você colou o código abaixo da tag "]]>" ?
Excluir