Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508668343
Vida do cache: 1508711543
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Menu com imagem deslizante no topo do Blog

Com o JQuery, é possível criar diferentes efeitos no blog, inclusive em menus.
Hoje vamos aprender a criar um menu horizontal com efeito bem legal no topo do blog.
Este menu possui um efeito deslizante, quando passamos o mouse sobre um item, ele desliza para baixo.

Demo

1. Css para Aplicar estilos ao menu:

1º passo – Vá em modelo >> Editar HTML, copie o código abaixo e cole-o ACIMA de ]]></b:skin>

/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    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:#E7F2F9; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;  /*---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.7;
    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:11px;
    color:#60ACD8; /*---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://1.bp.blogspot.com/-8kXTrCSJ6TI/T7PpNQtumCI/AAAAAAAAAF4/TfFELS_TSJk/s1600/home%2B%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(http://2.bp.blogspot.com/-8b0NOVUuGpQ/T7PpNqWONsI/AAAAAAAAAGE/ncafVsfgxg8/s1600/id_card%2B%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(http://2.bp.blogspot.com/-tmsZ5WfQVy0/T7Pp1sJqh2I/AAAAAAAAAGo/tO5AWC7Xb48/s1600/mail%2B%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(http://1.bp.blogspot.com/-jMeVHtFdzbc/T7Pp1Qq2rtI/AAAAAAAAAGc/HaGlP612qSE/s1600/rss%2B%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(http://3.bp.blogspot.com/-WWPgJGVlBZU/T7PpNy2-9fI/AAAAAAAAAGQ/Z2aP6VN4SKA/s1600/images.png);
}

2. Incluir o Javascript:

Vá no menu modelo >> Editar HTML, e procure pela tag </head>
E cole logo ACIMA dela o código a seguir

<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;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });
 
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>

3. Estrutura HTML:

Agora devemos inserir o código html do menu para que ele fique visível no topo do blog.

Se estiver usando algum modelo de template do “designer de modelo do blogger“, procure por: <header>
e cole o código html logo ACIMA dele.

Se estiver usando modelo de template mínima ou modificados, procure por: <body>
e cole o código html logo ABAIXO dele.

Código html:

<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='contato'><a href='URL-AQUI'><span>Contato</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li>
</ul>

Se quiser acrescentar mais itens ao menu, lembre-se que você deverá incluir mais uma linha de código css e nomear uma “class”:

ul#navigation .NOME DA CLASS AQUI a     {
    background-image: url(URL DA IMAGEM);
}

E deverá, também acrescentar mais uma linha de código html na estrutura HTML:

<li class='NOME DA CLASS AQUI'><a href='URL-AQUI'><span>NOME DO ITEM</span></a></li>

[dica]Eu recomendo que você só acrescente itens ao menu se você for usuário com conhecimento maior em códigos.[/dica]

[alerta]
ATENÇÃO:
Este menu funciona a base de arquivo javascript da biblioteca JQuery e sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.[/alerta]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

63 Comentários

  1. Fran Cisco disse:

    Gente, eu não encontrei esses códigos como ]]> (para falar a verdade não encontrei nem um) no meu blog! Alguém pode me ajudar, por favor?!

  2. Bom dia queria saber se te m como trocar a cor deste menu.
    Tipo de azul claro para esculro. Se tiver como me avise obrg..

  3. Graça disse:

    Clau,acabei de colocar no meu blog.
    Obrigada!!!

  4. Darlo Brito disse:

    Olá, Vanessa, tudo bem? Muito obrigado pelo tutorial, era exatamente o que eu estava procurando. Melhor explicado impossível. Poderia me dizer, por gentileza, se é possível deixar esse menu centralizado, independente da resolução de tela? Eu fiz alguns testes no CSS, inclusive alterando o float, mas não obtive sucesso. É possível?

    Grato desde já.

  5. fiz todos os procedimentos, mas as imagens não aparecem.Por que?

    • Vanessa disse:

      Se no seu blog está aparecendo de forma diferente, lamento, mas ou vc fez algo errado ou pode ser algum problema relacionado ao seu template. Não tenho como te ajudar.

  6. Maicon Ayres disse:

    Como mudo a fonte do menu?

  7. Eu retirei a imagem, como eu altero o tamanho da caixa (background)?

  8. Sandra disse:

    Muito obrigada pelos tutoriais, a maneira como você explica, faz com que, até pessoas leigas como eu, consigam fazer modificações no blog. Continue sempre com o ótimo trabalho!

  9. Gabi disse:

    Olá, gostaria de saber como que faz pro menu ficar centralizado.
    Obrigada!

  10. Juca disse:

    Oi equipe MB. Gostaria de saber como mudo a cor do menu. E tipo, eu tentei adicionar mais botões pro menu, mais não consegui. Aparece o código escrito na home do blog, e os botões ficam um em baixo do outro.

    Olha, eu queria saber como faço para colocar novos botões no menu. Eu sei que vocês mostraram como colocar mais botões, mais quero saber em que ordem, onde eu coloco. Eu tentei colocar em baixo do “” e não deu certo. Por favor, me ajudem…

    Abraços.

    • Juca disse:

      Digo do código, aff, na moral, sou um lesado ¬¬’

      A última parte do código que se chama ul porém, tem barra e setas juntos. Tentei colocar em baixo dali os novos botões, mais não funcionou.

      Enfim, dá pra me ajudar?

    • Vanessa disse:

      A ordem é vc mesmo que decide. Tenta colocar como 2º.

  11. Oi Vanessa! Será que poderia me ajudar?
    Instalei o menu no meu blog e tentei posteriormente incluir o seguinte slider: http://cherry-liah.blogspot.com.br/2012/08/nivo-slider.html#more
    Porém os 2 não funcionam juntos, quando eu apago um o outro funciona, acredito que seja algum conflito, você saberia me informar se há algo que eu possa fazer para que os 2 funcionem juntos?

  12. Jefferson disse:

    Como que Faço Pro Menu Não Ficar Flutuando na Pagina ao Rolar Pra Baixo ?

  13. Jaine Budke disse:

    Adorei… Parabéns! :)

    Pena que não consegui colocar imagens aos novos itens que inseri.

    Você tem alguma ideia do porque isso aconteceu? Em que eu posso ter errado?

  14. Pedro disse:

    Está tudo muito bem explicado e gostei imenso do menu. Gostava era de fazer uma pequena alteração, que é colocar o menu estático, ou seja, à medida que deslizamos no site para baixo o menu não acompanhar. Será possível?

    Obrigado

    • Vanessa disse:

      Experimenta retirar o position: fixed;

      • Pedro disse:

        Muito obrigado. O efeito pretendido foi alcançado e gostei imenso.
        Mas, aconteceu foi uma pequena alteração e tentei mudar alterando varias coisas mas nao consegui. Agora o menu esta do lado esquerdo e nao do lado direito como pretendo. Se eu colocar o position: fixed ele vai para o lado direito. Se eu retirar vai para o lado esquerdo e mesmo alterando algumas coisas ele nao vai para o lado direito o menu.

  15. Fabricio disse:

    muito bom o menu para alterar as cores do menu use esse gerador de cores studiosol.com.br/esquema-de-cores procure por background-color:#0033CC; /*—cor de fundo—*/ e mude o codigo da cor –> #0033CC

  16. Roberta disse:

    Eu já vi esse menu em muitos blogs, só que com cores diferentes. Eu queria saber se tem como mudar a cor, do menu..

  17. Cris disse:

    Eu nao consegui!! segui as instruções mais nao da certo, tentei dos dois geitos e nao deu.

  18. Gabriela disse:

    Como crio menus no meu blog?

    • Vanessa disse:

      Gabriela, temos uma categoria destinada a artigos sobre menus, que vc encontra no nosso menu “Tutoriais para Blogger”. Pode ser que vc encontre algum menu que te agrade.

  19. pepi disse:

    ai que pena no meu blog nao aparece a tag :/

  20. Bruno Staut disse:

    Primeiro parabéns pelo blog muito legal continue assim.Então vamos lá Quando adicionei esse menu deu tuto ok mas quando coloco o Javascript antes do meu slide para de funcionar será algum conflito.Preciso muito da sua ajuda…desde já te agradeço.

  21. Tem como deixar o menu, no canto da página, tipo, ao lado dos posts ?

  22. Guilherme disse:

    Achei interessante o formato dos posts no seu blog teste, um ao lado do outro, em seu blog tem um tutorial ensinando como se faz?

  23. Tem como eu deixar esse menu no lado esquerdo do meu blog ?

  24. Olá, Vanessa. Achei excelente o seu tutorial e estou ponderando seriamente em utilizá-lo no meu blog (www.vipertd.blogspot.com). Porém, no meu blog de teste (www.vipertdteste.blogspot.com.br)esse tutorial deu um certo conflito. O menu não desliza, simplesmente ele fica como se houvesse um mouse sobre. Além disso, e acho que pode ser a causa do problema, eu não tenho certeza de onde pôr o passo dois desse tutorial. Então o coloquei acima de ]]> e abaixo do primeiro passo do tutorial. Você tem algo a me sugerir?

  25. web divertida disse:

    onde eu coloco o java script ?????

  26. Herlan Santos disse:

    Olá Vanessa.

    Muito bom esse menu, gostei muito dele e principalmente de seu artigo.
    Estava olhando aqui no blog de teste e gostei mesmo do menu, ele possue um efeito bem legal.

    Abraços!

  27. Nossa, nem sabia que existia isso :/
    Vlw!

  28. Bruna R disse:

    Vanessa, preciso de uma ajuda… Não tem nada a ver com esse tutorial. Mas assim, fiz muitas mudanças no meu template a agora minha data não aparece e meu titulo de postagem não muda de cor. Poderia me ajudar?

    Obrigada.

    • Vanessa disse:

      Bruna R.,
      Lamento, mas eu não tenho como te ajudar, pois deve ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário. Por favor, peço que leia os Termos de Uso do Blog. Obrigada!:)

  29. Izaque disse:

    Até achei legal, porque ele rola junto com a página, e é transparente, parabéns.

  30. vinicius disse:

    como colocar num site com wordpress

  31. LeoTurboB13 disse:

    Olá Clau. como sempre seus tutoriais são excelente e de ótima qualidade! estarei postando alguns tutorial seu no meu blog, claro que junto com o mesmo os créditos da Autora do conteúdo e o Link direto do mesmo.
    Por favor peço que entre em contato e mim informe qualquer decisão sua. pois se for negativa estarei retirando o conteúdo ao qual se referi-se a a seu trabalho.

    (A Página de licença e Regras… está dando erro)

    Desde Já agradeço Por sua Atenção!!

    Att: LeoTurboB13

    • Vanessa disse:

      Leo:
      Eu só permito a reprodução parcial do conteúdo publicado aqui no MB, ou seja, somente trechos de nossos artigos estão permitidas, desde que haja atribuição dos créditos de autoria, e sejam utilizados apenas como fonte de informação, comentários ou citação.
      Dá uma lida na licença: http://mundoblogger.com.br/licenca

  32. Hendrik disse:

    Eu tentei colocareste menu porém não consegui, o menu aparece na página, mas os botões aparecem como se estivessem abaixadose jogou todo o resto do blog para a direita, sabe o que pode estar acontecendo?

    • Vanessa disse:

      Hendrik,
      Vc deve ter feito algo errado, ou então pode ser que seu blog possua algum arquivo javascript que dê conflito com JQuery.

  33. ameiiiiiiiiiiiiiii vou usa-lo concertesa ^^ bjaoo linda

  34. Vanessa disse:

    Que bom que vcs gostaram :)

  35. Lucas disse:

    UAU. Incrível!

  36. João Almeida disse:

    Muro chique ele! Parabéns Vanessa!

  37. Denis Gomez disse:

    A chefe ensinando seu funcionário rsrs..
    Vou personalizar um pouco mais este menu e usar na página pessoal que estou fazendo :)

  38. Oliver disse:

    Bom, muiiito legal este menu!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.