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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHkLnkOLWE7AqEf4Xm5N4TilfkiZxiqsB1nVdVu1Lo0pAaZ8UquU108i8HHbG3-z_e41apkORr2HQiItaKIqtQKTu-fbLhLEPzFQay5FSkLKyWq0gzTLCezJ6Fkao5Y7N9FRI_ZwhyphenhyphenUg4/s1600/home+%25281%2529.png); } ul#navigation .sobre a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxTJRkxXb5GoS-7rIAMF9gK9QW3kexmX8C4sNNbfQyujyj6DRFHy9MNY-KPUqQet_kGDU1lJHaxYfsmMk1FMLDvdCylkic6SU_NZdAZYUxe0lt4kptx1Vvc8dNZdVJvVojeGYLpSSGSu4/s1600/id_card+%25281%2529.png); } ul#navigation .contato a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ImZCQf63mrBuClS7YRO5cHFQiBF5meb8SDxNlhzYbGcdJDgdJ_UpVfgzsUVyBOapdPiqxooUeK72bouUS7qyI5ZbtFOwrBUOXhqf8nJ4PIFOYAfj-bnLl7m_drH4aNv7XTc7UNpSEU0/s1600/mail+%25281%2529.png); } ul#navigation .feedrss a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-aUWkVveFCPTguJEb2dj3rdxbJnRCTk4r3VmpcrjAen8vhCK7OndCEd-6fLyfmi-b3PVWxn3x4QS9zT8bOSeGJJZdzQxDNx3zjtfBuXC5T4ag0ON4uiMQk7xLu2qd_7ishwtUX0oF4k/s1600/rss+%25281%2529.png); } ul#navigation .imagens a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm6r1GHx5OW5bRnSSwqJle0tJdQOthTF3uM9Dai8vtq1tcfPR-_AovehhSG92AfNX6oz5uwvMmYw55bo9IppRxi-2JdDjXWghjX8cVs5QFIclsxgpZBOuXw99T61a0uBD-Y-iC_tGaXPQ/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 (
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
oi linda,amei seu blog.gostaria de ser uma de suas afiliadas.Também já vou seguir.Responde no meu blog se vc quiser a afiliação;bjs
ResponderExcluirUpgrade U
Claro que aceito flor ><
ExcluirSempre quis aprender o tutorial desse menu ^^ vlw
ResponderExcluirhttp://fabiolucas92.blogspot.com.br/
HAHA' ele é bem útil!
ExcluirDe nada ^^
wonnn que menu lindooo adoooreii o/ vc usava ele ne?
ResponderExcluiracervo-de-livros.blogspot.com
o/
ExcluirEu usava ele sim ahauahuaha'