Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

16 abril 2010

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() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag
  
    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });
  
    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //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:

 em container, determinamos as dimensões ocupadas pelo menu, bem como sua posição na página:

.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

Artigos Relacionados

18 comentários:

Aldéryck Riptor disse...

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.

CHEZ CAROL BAR LOUNGE disse...

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

Leonardo Marques disse...

Deu tudo certo, só existe um problema: toda vez que eu coloco alguma postagem nova desregula a posição do menu. Como Resolver?!

Ariane disse...

Leonardo não vi o menu no seu blog por isso não tenho como ver onde está o erro

Leonardo Marques disse...

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 Marques disse...

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 disse...

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.

Anônimo disse...

perfects!
Muito obrigado!

Kaito Queiroz disse...

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?

Professor Telmo disse...

Muito legal esse blog valeu pela ajuda

Luccas A. disse...

Ariane, você é a salvação da minha lavoura :).

@gnfull disse...

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.

CLIMATIZADOR NO SUDESTE disse...

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

RICARDO ASSIM disse...

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

Lucas disse...

como mudo a cor do texto ?

Gonsa FC disse...

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 "".

Nex Download disse...
Este comentário foi removido pelo autor.
Anônimo disse...

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.