Oi lindas , hoje venho trazendo um tutorial do menu aqui do blog que foi a pedido da Vitoria
Vamos conferi ??
Exemplo do menu ;
]]></b:skin>
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);}
</head>
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>
<header>
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>
É isso créditos ; ♥ ♫ ♥
Esse menu é super lindo. Ótimo tutorial *u*
ResponderExcluirGarota Differente
Que bom que gostou beijos ♥
ExcluirNossa! Fico muito muito muito feliz que meu pedido está sendo atendido. Tudo bem explicadinho.
ResponderExcluirAmei!
http://aerafeminina.com
Obrigada
Bjos!
Que bom que gostou linda , estou fazendo com o maior carinho beijos
ExcluirEsse menu é lindo <3
ResponderExcluirQue bom que gostou beijos ♥
ExcluirAmei o tutorial *-*
ResponderExcluirhttp://fasesdegarota.blogspot.com.br
Que bom que gostou fofinha beijos ♥
ExcluirEu não entendo nadica de nada de html e olha que tenho um curso basiquinho de webdesign, rs. Acho que foquei mais no photoshop do que no resto, kkk.
ResponderExcluirBjus
Rafa
Rafaelando.com
OMG kkkkk '
ExcluirJá usei um menu desses no meu antigo lay... da um up no visu! - Gostaria de saber se vc deseja fazer troca de seguidores, (vc segue meu blog e eu sigo o seu) Diz a resposta, deixa um comentario no meu blog... Abraços!
ResponderExcluirdocefuturo.blogspot.com.br
Haha com certeza ele é lindo , pronto fofinha seguindo :)
ExcluirOOi hanny Claro que o Inspires 7 pode ser afiliado do 'HM :)
ResponderExcluirJá vou te colocar! pode me colocar também
beijoos//nspires7
Oi de novo kkkk, vc pode fazer um tutorial ensinando a como colocar
ExcluirAtualmente
185 Postagens
567 Comentários
Aiim obrigada linda , já te coloquei também , é logico que eu faço o tuto linda , estou terminando um post , assim que termina-lo atendendo o seu pedido !
ExcluirVlw Lo , vou tentar fazer rsrsrs ,agora não sei se va dar certo !Bjos até mais ♥
ResponderExcluirlouquita.blogspot.com.br
Eu testei e deu certo mais foi no modelo travel do blog , espero que der certo fofinha beijinhos
ExcluirOii , gostei muito de seu blog. Ele é muito lindinho, organizado demais.
ResponderExcluirConheci hoje e já me apaixonei . Volto aqui hein , pode me esperar.
Seu blog é muito maravilhoso e merece sucesso.
Visita o meu , se puder seguir me sentirei honrada. Só não repara porque ainda está em fase de mudanças.
Que Deus te abençoe ! (:
Booas Feestas !
Beijinhos , a paz de Christ ;* ;*
>> http://girls-of-christ.blogspot.com.br
Ooi linda , obrigada pelo carinho e com toda certeza do mundo vou te seguir , aim te espero sim aqui :) seja muito bem vinda beijiinhos e boas festas para você também ♥
ExcluirQue menu divo *u*
ResponderExcluirJá to usando .
Amor ser não for incomodo faz afiliação comigo ?
Kissus ,
my-doce-kawaii.blogspot.com.br ♥
Claro linda , já te coloquei nos meus afiliados beijinhos ♥
ExcluirAmei seu blog parabéns você explica super bem explicado.
ResponderExcluir