Hóyy gente u_u <3 então vocês já viram o projeto do blog né? então
participem aqui eu vou divulgar bastante u-u convenhamos, vamos para o post. Bem acho que pelo titulo já sabem do que se trata, foi um pedido da Ask, um pedido Anonimo '-' mas estou atendendo, é o menu deslizante a hover, quem chegou a ver o lay antigo, eu usava esse menu, e ele é mais ou menos assim:
Curtiu, quem aprender a fazer? continue lendo
Então vá no seu HTML (avah) e procure por:
]]></b:skin>
/* 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); }
Altere o
"http://3.bp ..." = url da imagem que vai aparecer.
E o resto está especificado no código.
Ainda não acabou agora vá em </head>
Cole isso
ACIMA da tag
<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>
Não mude
NADA
Agora vam em
<header> e cole Acima da tag isso
<ul id='navigation'>
<li class='home'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
<li class='sobre'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
<li class='contato'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
<li class='feedrss'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
<li class='imagens'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
</ul>
URL-AQUI = Url da página
Nome da página = Nome da página (
não me diga)
Visualize se estiver tudo certo salve! joinha?
Imagens para usar... procurem no Tumblr u_u eu Juro que vocês acham, ou façam as próprias imagens XP Se quisere algo especifico peçam na ask.
Crédito a
: If I Ruled The World
