Menu Horizontal com CSS e Jquery
Em um dos meus blogs de teste eu instalei este menu criado por Soh do site SohTanaka e que tem um efeito bastante interessante. Você pode conferir o demo aqui.
Me pediram para explicar como colocar este menu no Blogger, então lá vai:
Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:
Hospede a imagem (pode ser no próprio Blogger) e guarde o link. Agora vá em Editar HTML e cole no código do seu template, abaixo de ]]></b:skin>
<style type='text/css'>
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
depois, no HTML ( após a tag <body> ) coloque o seguinte trecho, antes ou depois de <div id='header-wrapper'>....</div> :
<div class='container'>
<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
No meu exemplo, os códigos foram colocados abaixo de header, assim:
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
width: largura total ocupada pela div que contém o menu.
note que em ul#topnav o valor se repete (width: 520px)
top: 10% - distância do menu para o topo da página
left: 60% - distância do menu para o lado esquerdo da página
com margin você também controla a posição do menu. Veja que o menu está a 60% da esquerda da página menos 80px. Vá alterando os valores para que melhor se encaixe no seu layout.
Coloque a url da sua imagem hospedada (no Blogger ou em outro site) onde está indicado no código CSS em negrito. Substitua os # no HTML do menu pelos links que desejar.
 |
| resultado |
18 comentários:
Eu agradeço por sua vontade e ação de ensinar. Caso não fosse desnecessário, eu comentaria isto em cada um de seus posts. Seu blog se destaca facilmente no nincho "aprender códigos html e css para blogger". Obrigado e parabéns.
Pois é desde que iniciei no mundo blogger ,pela primeira vez achei essa escola.
Hoje virou meu vicio!
Obrigada rainha por tudo enclusive seus templates doados gratuitamente ou mesmo os pagos.
Gratidao profunda!
Taillard
Deu tudo certo, só existe um problema: toda vez que eu coloco alguma postagem nova desregula a posição do menu. Como Resolver?!
Leonardo não vi o menu no seu blog por isso não tenho como ver onde está o erro
Ariane, é porque eu estou fazendo o teste em um blog teste primeiro. Esse é o link: http://obaobalegriadeviver.blogspot.com/
o problema é quando eu coloco uma nova postagem a menu muda de lugar. Ou sobe ou desce, não fica fixo em baixo do cabeçalho.
Ariane, é porque eu estou fazendo o teste em um blog teste primeiro. Esse é o link: http://obaobalegriadeviver.blogspot.com/
o problema é quando eu coloco uma nova postagem a menu muda de lugar. Ou sobe ou desce, não fica fixo em baixo do cabeçalho.
Leonardo as medidas de .container estão erradas, o height deve ser apenas de 100px (está 1024px) e os valores para alinhar na página também devem ser modificados.
perfects!
Muito obrigado!
No meu blog não tem o trecho "<'div id='header-wrapper'>.... "
e também diz que não aceita o tipo "style" como resolver?
Muito legal esse blog valeu pela ajuda
Ariane, você é a salvação da minha lavoura :).
Obrigado pelo poster...
Só tenho uma pergunta a respeito.
como faço pra duplicar ou usar imagens de fundo diferentes nos botoes ?
Obrigado.
Aguardo resposta.
cara ficou massa os botões em meu blog usando o CRHOME, mas quando vai abrir pelo IE ou FIREFOX, os botões ficam fora.
www.climatizo.com.br
VEJA SE PODE ME AJUDAR
Caso tenha recebido minha pergunta por favor descarte esta.
Meu blog ficou muito massa com os botões, porem funciona bem no GOOGLE CRHOME, quando vou abrir no IE ou FIREFOX, os botões mudam de lugar para cima. Se puder ajudar agradeço.
www.climatizo.com.br
como mudo a cor do texto ?
Porque esta dando este erro:
Não foi possível salvar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "a" must be terminated by the matching end-tag "".
Olá Ariane, gostaria de saber como eu faço para colocar os artigos relacionados no templastes mundo verde, tentei usar o tutorial que vc postou sobre postagensd populares na horizontal mais não não consegui aplicar ao templaste e na demostração dele apareçe. Gostaria que vc me ajudasse. www.mikaeluke.tk.
Aguardo respostas.
Postar um comentário
Os comentários são moderados.