Menus Vanessa S.
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.
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;
$('#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>
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]
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?!
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..
Clau,acabei de colocar no meu blog.
Obrigada!!!
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á.
fiz todos os procedimentos, mas as imagens não aparecem.Por que?
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.
Como mudo a fonte do menu?
Eu retirei a imagem, como eu altero o tamanho da caixa (background)?
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!
Olá, gostaria de saber como que faz pro menu ficar centralizado.
Obrigada!
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.
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?
A ordem é vc mesmo que decide. Tenta colocar como 2º.
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?
Infelizmente alguns scripts entram em conflito mesmo. Lamento mas não sei como resolver.
Como que Faço Pro Menu Não Ficar Flutuando na Pagina ao Rolar Pra Baixo ?
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?
Lamento,mas não sei o que pode ter acontecido no seu template.
o meu blog quando aperto no menu só diz isso
A página que você está procurando neste blog não existe.
por que?
Vc não deve ter incluido os links no seu menu.
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
Experimenta retirar o position: fixed;
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.
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
Eu já vi esse menu em muitos blogs, só que com cores diferentes. Eu queria saber se tem como mudar a cor, do menu..
Eu nao consegui!! segui as instruções mais nao da certo, tentei dos dois geitos e nao deu.
Como crio menus no meu blog?
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.
ai que pena no meu blog nao aparece a tag :/
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.
arrumando a frase: quando coloco o Javascript antes da tag head
A funcionalidade do script pode variar de acordo com o template.Templates que possuem muitos scripts, acabam gerando “conflitos” entre si. 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.
Tem como deixar o menu, no canto da página, tipo, ao lado dos posts ?
O efeito deste menu é esse que está ai..se existe uma outra forma, eu desconheço.
Ok, obrigada.
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?
Tem sim:
https://www.mundoblogger.com.br/2011/08/area-dos-posts-dividida-em-colunas.html
Tem como eu deixar esse menu no lado esquerdo do meu blog ?
Experimente trocar
right: 10px; por
left:10px;
Obrigada (: Vou tentar ^^
Oi, de novo ! rs.’ Acabei de fazer o teste, o menu ficou do lado esquerdo no topo do blog, o que na verdade eu quero, é deixar ele no canto da página, entende ? É possível ?
Obrigada !
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?
Opa, desculpa. Eu vi que acabei esquecendo de colocar a informação do local onde se deve colar o código javascript, por isso que estava dando problema. Já inclui a informação. Refaça o tutorial que agora vai dar certo 😉
Muito obrigado pela atenção, Vanessa. Seus tutoriais são demais. 😉
Agora ficou uma maravilha. Muitíssimo obrigado, Vanessa.
onde eu coloco o java script ?????
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!
Nossa, nem sabia que existia isso :/
Vlw!
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.
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!:)
Até achei legal, porque ele rola junto com a página, e é transparente, parabéns.
como colocar num site com wordpress
Vinicius,
Não sei..não testei.
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
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: https://mundoblogger.com.br/licenca
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?
Hendrik,
Vc deve ter feito algo errado, ou então pode ser que seu blog possua algum arquivo javascript que dê conflito com JQuery.
ameiiiiiiiiiiiiiii vou usa-lo concertesa ^^ bjaoo linda
Que bom que vcs gostaram 🙂
UAU. Incrível!
Muro chique ele! Parabéns Vanessa!
A chefe ensinando seu funcionário rsrs..
Vou personalizar um pouco mais este menu e usar na página pessoal que estou fazendo 🙂
Bom, muiiito legal este menu!