menu personalizado blog |
Olá pessoal, sempre achei que o menu pode fazer uma diferença e muita no blog. Quando a pessoa visita a página, logo vê o menu, e claro se tiver um super-menu, irá chamar mais atenção e trazer um ar de profissionalismo, gerando assim uma confiança no visitante, fazendo com que ele volte mais vezes e até divulgue seu blog. Então vamos lá, mãos á obra.
/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 0px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 72px; margin: -40px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("http://perfeitodownload.webs.com/PERFEITO%20DOWNS%20IMG/lavalampd.png") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
font: bold 12px tahoma, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #fff;
outline: center;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
padding:5px 13px 0px 0px;
margin:3px 0px 0px 15px;
}
Agora vamos para o script coloque ele antes de </head>
<script src='https://dl.dropbox.com/u/8526013/jquery-1.2.3.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/8526013/jquery.lavalamp.min.js' type='text/javascript'/>
<!-- Optional -->
<script src='https://dl.dropbox.com/u/8526013/jquery.easing.min.js' type='text/javascript'/><script type='text/javascript'>
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});</script>
Coloque abaixo de <body> ou onde quiser deixar o menu
Atenção! Caso tenha erro apague esse código: <div id='topo-menu'>
<div id='topo-menu'>
<div id='menu'>
<ul>
<li class='back'><div class='left'/></li>
<ul class='lavaLamp'>
<li><a href='http://perfeitodowns.blogspot.com/'>Home</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/termos-de-parceria-nos-do-perfeito.html'>Parceria</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/07/fale-conosco.html'>Contato</a></li>
<li><a href='http://perfeitodowns.blogspot.com/p/mapa-do-site.html'>Mapa Do Site</a></li>
<li><a href='http://perfeitodowns.blogspot.com/2010/11/pedido.html'>Pedidos</a></li>
</ul>
<li class='back' style='left: 10px; width: 57px; display: block; overflow: hidden;'><div class='left'/></li></ul>
Qualquer dúvida ou sugestões, deixe um comentário!
4 Comentários
gostaria de inserir esse menu diferenciado em meu blog meu amigo como eu faço isso? Ha parabens pelo blog muito bom viu ha espero por suas visitas tbm acessa aí espero que goste
ResponderExcluirhttp://juniorcis.blogspot.com
http://junior-juniorcis.blogspot.com
grato
junior
Oi, Parabéns pelo blog. Gostaria de inserir um menu com submenu igual ao seu, a casinha do home ficou um charme. Pode me ajudar?
ResponderExcluirboa tade
ResponderExcluireu tenho muita dificuldade de que site eu baixo o office 2010 pois não estou conseguindo ou eu tenho que entra no site da morosoft e baixar a ai sim desconectar da rede internet e inseri os códigos, minha maior duvida de onde baixo, obrigado
alguém pode me passar o link onde eu consiga baixar o office 2010 pois tem tanto e estou apavorado em fazer besteira
Excluir