Oi Galera! Tudo bem? Queria pedir desculpas para vocês e para Ana por não ter postado, estou em mês de provas, e ficou difícil postar, Bom mas em compensação vou postar um tuto bem legal de como colocar o menu deslizante, venham comigo!
1 - Vá em Design > Editar HTML e procure por:
]]></b:skin>2 - Acima da tag, cole:
/* 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);}
Explicar o código levaria muito tempo, vou dar a vocês o básico:
position: absolute;
Se você trocar por fixed o seu menu vai acompanhar a rolagem da página.
opacity: 0.8;
Aumente o número se quiser diminuir a opacidade do fundo.
margin: -25px;
Aumente o número MANTENDO o - se tiver algum espacinho quando você passar o mouse. Vai fazer subir mais.
margin: -25px;
Aumente o número MANTENDO o - se tiver algum espacinho quando você passar o mouse. Vai fazer subir mais.
O resto está explicado entre "/*" no código.
3 - Procure por:
</head>
4 - Acima da tag cole:
<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>
5 - Agora procure por:
<header>
6 - Acima da tag cole:
<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>
Prontinho,, agora alguma imagens para o menu deslizante
Crédito ao Kawaii Word, Beijokas
0 Sweet(s) *3*:
Postar um comentário
Aceito selinhos e tag's, encomendas e pedidos!!! *u*! O que importa é o carinho de vocês, leitores, por lembrarem do blog. Muito obrigada por comentar. Tudo que vem dos leitores no blog é bem vindo!!!