Agregando conhecimento…
Para se fazer um menu flutuante que acompanhe a página durante a rolagem do scroll apenas configuramos a posição y de um elemento conforme o scroll.
No CSS você deixa o menu/elemento com posição absoluta e crie o efeito que desajar no hover e/ou no animate() do jquery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Menu Flutuante com jQuery</title> <script src="http://www.shiguenori.com/jquery/jquery-1.3.1.js"></script> <script language="javascript"> $(document).ready(function(){ var y_fixo = $("#menu").offset().top; $(window).scroll(function () { $("#menu").animate({ top: y_fixo+$(document).scrollTop()+"px" },{duration:500,queue:false} ); }); }); </script> <style type="text/css"> #menu { left:0px; margin:0; padding:0; position:absolute; top:100px; width:150px; } #menu ul { list-style:none; margin:0; padding:0; } #menu ul li { margin-bottom:2px; } #menu ul li a { background-color:#333; border:1px solid #999; color:#FFF; display:block; padding:5px 5px 5px 15px; text-decoration:none; } #menu ul li a:hover { background-color:#ccc; color:#333; } </style> </head> <body> <h2>Exemplo de menu flutuante simples</h2> <p style="height:2000px;"> Este efeito só será visível quando houver barra de rolagem. Quando utlizarem a rolagem para navegação, o menu irá acompanhar a área vísivel. </p> <div id="menu"> <ul class="menu"> <li><a href="#" onclick="return false;"> Menu 1 </a></li> <li><a href="#" onclick="return false;"> Menu 2 </a></li> <li><a href="#" onclick="return false;"> Menu 3 </a></li> <li><a href="#" onclick="return false;"> Menu 4 </a></li> <li><a href="#" onclick="return false;"> Menu 5 </a></li> </ul> </div> </body> </html> |
jquery-1.3.1.js
Exemplo On-line
Página para publicar e armazenar conteúdo relacionado a Desenvolvimento Web:
PHP, MySQL, Javascript, JQuery, CSS e as novas tecnologias do momento.
Façam comentários, perguntas e sugestões que ficarei satisfeito por recebê-los.
Shiguenori Junior
Altair
novembro 11th, 2009 at 10:29
Meu caro, estou tentando utilizar este código nume index.php, porem não consigo fazer a div flutuante, alguma sugestão?
Junior
novembro 12th, 2009 at 15:22
Olha, se você copiar o código e salvar como um arquivo html ou php ele irá funcionar. Você está rodando ele num servidor Apache, certo? Esclareça melhor sua dúvida, ou poste o seu código em algum lugar para que eu possa dar uma olhada.
Danilo
novembro 24th, 2009 at 11:32
Cara, muito show depois de dar uma boa procurada encontrei o tuto ideal e funcionando, valeu!
Kleberson Leite
dezembro 15th, 2009 at 11:48
Olá kra.. vou utilizar o seu script num site aqui e posto o resultado.
Abraços e obrigado pelo tutorial.
Kleberson Leite
dezembro 15th, 2009 at 16:32
Olá, tentei usar o script na barra lateral do meu site,mas não conskegui.. poderias me ajudar?
Junior
dezembro 16th, 2009 at 12:15
Saudações Kleberson,
Dá algum erro de script? Você incluiu todos os arquivos necessários e na ordem correta? O menu é exibido e fica parado?
Qualquer coisa me passa o link do teste que você fez, daí eu tenho uma noção maior do problema.
Ricardo
dezembro 17th, 2009 at 8:18
Olá, coloquei o menu dentro de uma div lateral na direita; mas o menu esta ficando no lado esquerdo;
alguma idéia de solução?
Ricardo
dezembro 17th, 2009 at 8:19
Aliás, muito bom o seu blog;
=D
Junior
dezembro 17th, 2009 at 9:43
@Ricardo, mas o efeito deslizar do plugin funciona? Se for apenas o lado que está errado, faça o seguinte, retire o plugin e veja como está o CSS. Se continuar do mesmo lado é porque o CSS ou a ordem do HTML está incorreta. Se for erro no plugin, publica os arquivos numa hospedagem/site temporário e me envia o link para eu analisar melhor. E obrigado pelo elogio, até mais…
Ricardo
dezembro 17th, 2009 at 22:45
Consegui fazer funcionar;
Coloquei a seguinte tag na div;
position: relative;
estou com outra dúvida, como faço para coloca-lo mais para cima, tipo perto do topo; pq esse efeito basicamente o menu fica no centro tdo o tempo; e gostaria de coloca-lo perto do topo.
Obrigado pela ajuda,
Junior
dezembro 18th, 2009 at 18:37
@Ricardo, troque a linha var y_fixo = $(“#menu”).offset().top;
por algo como var y_fixo = 0;// ou a distância do topo que você quer
Essa variável especifica a distância quando a barra de rolagem se mover. A posição inicial é definda por seu CSS
Ricardo
dezembro 18th, 2009 at 20:31
Muito obrigado Junior;
vc tem twitter?
grande abraço
Junior
dezembro 19th, 2009 at 11:50
@Ricardo, obrigado e tenho sim é http://twitter.com/shiguenori
Shiguenori é meu primeiro nome, Junior é o último, até mais…
Clayton
maio 7th, 2010 at 12:50
Muito bom o script, parabéns. Só tem um detalhinho que queria implementar no meu site. Fazer com que a div só percorra até um determinado ponto embaixo do site. Como o código está a div vai até o fim da página. Tem como?
Obrigado
Junior
maio 7th, 2010 at 13:39
@Clayton não entendi muito bem o que vc quis dizer com “Fazer com que a div só percorra até um determinado ponto embaixo do site.” Você quer que o menu sempre fique “grudado” no rodapé do site? Se for isso tente trocar
top: y_fixo+$(document).scrollTop()+”px”
por
bottom: “0px”
Acredito que isso resolva, qualquer coisa é só perguntar
Clayton
maio 7th, 2010 at 16:33
Olá. obrigado por responder. No rodapé do meu site tem várias imagens e a div acaba ficando por cima delas. Ela não poderia descer até o fim da página, teria que parar um pouco antes…
Clayton
maio 7th, 2010 at 17:08
Obrigado consegui o que eu queria fazer. Abraço,
Euller
maio 31st, 2010 at 12:53
Muito bacana o turorial, era o que procurava, porem fiquei com a mesma dúvida do Clayton… preciso que o menu flutue só até determinado ponto da pagina ou da div onde ele esta, pois assim como no projeto do Clayton o site o qual estou desenvolvendo tem um rodapé no qual o menu esta sobrepondo. Preciso que o menu fique um pouco acima do rodapé. se puder me ajudar fico extremamente agradecido.
Junior
maio 31st, 2010 at 13:01
@Euller conforme eu respondi para o Clayton, substitua a linha:
por
No lugar de 100px coloque a altura do rodapé, se o rodapé tiver o tamanho dinamico, coloque uma id, div_rodape por exemplo e use:
bottom:$('#div_rodape').height();Se quiser adicionar um espaço adicional fique avontade
Euller
maio 31st, 2010 at 13:20
Junior, obrigado pela breve resposta… Eu tentei aqui da forma que vc falou mais não funcionou nesse meu site, mais vou tentar mudar a estrutura aqui, mais antes só pra saber… existe a possibilidade de fazer com que a Div do menu flutue dentro de uma div específica a qual tem uma altura dinâmica???
EX: flutua dentro da … desde ja agradeço.
Junior
junho 1st, 2010 at 14:02
@Euller tem sim, na div mae coloca postion:relative e na filha position:absolute, depois é só animar com jquery. Do problema anterior vc consegui o que queria? Qualquer coisa hospeda seus scripts num server temporário e me passa o endereço que eu vejo.
Weverton Naves
agosto 6th, 2010 at 1:37
Cara, perfeito esse código. Vc quem desenvolveu? Parabéns. Estava procurando por algum tempo e não achava de jeito nenhum. Obrigado.
Junior
agosto 7th, 2010 at 11:16
@Weverton Naves eu apenas adaptei, mas se você notar não chega a ser função ou plugin, este código está usando a função animate() do jquery. Você pode animar várias coisas de diversas formas com esta função. Até mais.
Juliano Guimaraes
setembro 16th, 2010 at 14:34
Muito bom mesmo esse esfeito, parabens Junior.
no meu site tenho o topo com um banner flash de fora a fora e abaixo dele o conteudo do meu site, apliquei este efeito na minha coluna esquerda e coloquei uma div margin top 230px para que ela fique abaixo deste banner flash, até ae tudo bem, quando rolo o scrool a caluna esquerda se movimenta como esperado porem a parte final do meu menu fica sempre escondido pela barra bottom do browser.
Tem como movimentar a coluna esquerda somente quando a barra top do browser encostar nela? Dessa forma acho resolveria
werrd
setembro 19th, 2010 at 17:20
oi eu fiz tudo certinho , fiquei com duvida foi colocar o link em nele uso o programa Adobe Dreamweaver CS5 pra colocar o link eu consigo e quando salvo como index.html , abro apagina e clico no botao e ele nao fuciona. PODE ME DAR UMA AJUDINHA ??????
Junior
setembro 21st, 2010 at 13:06
@Juliano Guimaraes tenta com CSS primeiro, coloca margin ou padding BOTTOM do mesmo tamanho que está ficando oculto.
Junior
setembro 21st, 2010 at 13:09
@werrd cara, mostra pra gente o seu código que agente te ajuda melhor ok? fico aguardando.
Juliano Guimaraes
outubro 18th, 2010 at 10:54
junior, fiz da maneira como me disse e nao obtive resultado.
resolvi colocando a camada do menu abaixo do top e do rodapé, mas dessa maneira ele “engole” o menu.
da uma onhada no link http://www.redsite.com.br/novosite/index.php/servicos/adesivagem-de-veiculo
Junior
outubro 18th, 2010 at 16:24
@Juliano Guimaraes coloca wmode=transparent para as animações que tiver e trata o z-index de todos os items que podem atrapalhar (imagem do topo, flash, o próprio menu e divs que englobam o topo e menu). Faça um teste sem a animação o CSS tem que estar corrto para o menu aparecer por cima. Já tentou inverter, colocar o menu antes do topo também?
jsebe
novembro 13th, 2010 at 0:02
funcionou bem.. localmente… vamos ter..
vlw….
Victor
dezembro 6th, 2010 at 9:52
Olá Junior, eu tentei fazer aqui com um index.html, pra testar pra ver se implemento no meu site, porem aparece tudo certo, mas a animação não acontece, o menu fica parado. O que pode ser?
Agradeço a atenção e Belo blog. Parabéns.
Junior
dezembro 6th, 2010 at 10:11
@Victor vc baixou os arquivos que disponibilizei? Estes funcionam? Poste o código ou os arquivos em algum servidor temporário que eu analiso melhor.
Fábio Reche
janeiro 7th, 2011 at 9:46
Valeu Shiguenori, funciou como proposto! implementei aqui e creditei você no código
– obrigado
Julio Takayama
fevereiro 12th, 2011 at 0:55
Muito bom!!! Simple e funciona bem!!!
Mas vc tem alguma sugestão pra ele começar a flutuar somente a partir de uma posição que não seja top=”0″?
Ana
fevereiro 15th, 2011 at 9:46
Que ótimo teu blog…
Gostaria de aplicar este código mas ao invés de a barra correr para baixo…eu quero que ande para o lado… 768X4000 por exemplo, atravessado, e posicioná-la fixa. Podes me ajudar?
Junior
fevereiro 17th, 2011 at 16:27
@Julio Takayama seja criativo, você pode especificar bottom, usar porcentagem ou quem sabem a partir de outro elemento.
Junior
fevereiro 17th, 2011 at 16:58
@Ana a função Animate() do jQuery também aceita o atributo left (right ou bottom como no CSS). Sua sintexe é $(‘.seletor’).animate(propriedades, [ duração ], [ easing ], [ completo ] )
Onde propriedades é um objeto, passando as propriedades de CSS para finalizar a animação. Duração é uma string ou número para determinhar o tempo que levará a animação. Easing é uma string para indicar o tipo de efeito de transição. E completo é uma função de retorno ou CALLBACK que é chamada ao completar a animação.
Raphael
março 18th, 2011 at 23:16
Oi Amigo
Gostei muito do código, mas só tem um problema, ele funciona sim, só que no meu caso, eu quero que quando eu mecher a barra de rolagem, o menu simplesmente acompanhe o movimento sem parecer que ele se movimenta, veja por exemplo o menu que desce e sobe desse site http://www.eztec.com.br/ – quando você desce e sobe com a barra de rolagem, você não vê ele tremendo no movimento ou correndo, ele simplesmente acompanha o movimento da barra de rolagem, conseguiu entender o que eu gostaria??
Se puder me ajudar a fazer o movimento exatamente igual ao desse site, lhe serei imensamente grato.
Grande abraço e obrigado
Junior
abril 1st, 2011 at 22:52
@Raphael o efeito que vc deseja pode ser feito com CSS, abaixo um exemplo utilizando uma imagem com ID btchat
Luciana
abril 5th, 2011 at 15:00
Era o que eu estava procurando. Obrigada, funcionou perfeitamente.
Heric Portal
maio 13th, 2011 at 3:04
ola busco aprende a fazer esse tipo de menu aqui se poderem me ajuda agradeço. E que não sei como é o nome desse efeito ,eu vi nesse site aqui http://www.portalsegmentos.com.br, no caso o que eu quero está no contador de visita quero aprender afazer não o contador e sim o efeito que ele proporcionou, pois tenho umas idéias pra um menu de um site, o mesmo faz o seguinte, quando eu mexer na barra ele fica parado como se só o conteúdo do site que se mexe-se. grato
Junior
maio 16th, 2011 at 18:56
@Heric Portal hoje (16/05) o site tá redirecionando para o site da dial host com a mensagem de página suspensa
julio viana
junho 18th, 2011 at 21:25
Junior, parabéns, seu código é ótimo só q preciso de ajuda…
http://www.ecomaquinas.com.br/ptbr/institucional.php (dee uma olhada) no pcs normais ele vai bem, mas quando abro no mac (safari, firefox, etc) o menu flutuante fica por cima do menu em flash, ja defini de varias formas o wmode do flash não tem jeito… teria alguma forma do menu flutante começar somente abaixo do menu em flash, eu coloquei este menu flutuante no site todo e agora meu patrao ta me enchendo pra mim arrumar isso e nao consigo… ajuda ae,,, abraços
Junior
junho 24th, 2011 at 17:05
@julio viana tudo bem, eu sou de campo grande/ms talvez o Luclécio não lembre mas eu trabalhei no TerrasMS quando o site dele tava lá. Quanto ao problema CSS pode resolver isto. Eu tava vendo o código fonte da página que vc passou e me assustei quando vi cerca de 6 declarações DOCTYPE > HTML > BODY
Isto está parecendo a utilização excessiva da função include(). O CSS e/ou o Javascipt do site pode ter problemas fazendo dessa forma. Uma coisa que você poderia estudar também, é fazer menos uso de tabelas para fazer o layout. Eu vi uma outra coisa preocupante, o arquivo jquery-1.3.1.js que vc está chamando está com caminho absoluto para o meu site. Já pensou se eu mudo o nome das pastas ou coloco no htaccess restrição para não utilizarem meus arquivos?
Qual valor do WMODE você está usando, como está o CSS do menu em flash e do menu flutuante? Se você deixar os dois em DIVs vizinhas e trabalhar mais o CSS você resolve o problema.
Rafael Wojcik
setembro 30th, 2011 at 11:03
Júnior, muito bom, simples e funcional, parabéns!
Estou tendo alguns probleminhas que talvez você possa me ajudar…
Primeiro:
Adaptei seu código a um menu que já uso (Menumatic), porém existe um script no Menumatic que da a ele o visual e um efeito (Mootools) e este script não ta deixando o menu flutuar. O script é esse: google.load(“mootools”, “1.2.1″);
Você pode ver um exemplo do que acontece acessando os links abaixo:
Com Script: http://m-arnaud.com.br/default2.asp
Sem o Script: http://m-arnaud.com.br/default3.asp
Segundo:
O menu está com o Scroll infinito, vc sabe o porque?
Um abraço!
Rafael Wojcik
setembro 30th, 2011 at 12:27
Uma outra coisa que verifiquei Júnior…
Tentei utilizar outras versões do Mootools, em todas as outras versões o menu flutua, porém perde os efeitos…
Agora tenho os arquivos do Mootools:
http://m-arnaud.com.br/js/api.js
http://m-arnaud.com.br/js/mootools-1.2-core.js
Obrigado
Rafael
Junior
janeiro 25th, 2012 at 12:47
@Rafael Wojcik já tentou usar antes do código o jQuery.noConflict(); utilizar frameworks diferentes no mesmo projeto não é aconselhável. Se não funcionar existem plugins do jQuery bem semelhantes ao do MooTools, o superfish ou jQuery.ui.smoothMenu. QUalquer coisa é só falar.
antonio
abril 15th, 2012 at 16:17
Muito Boum…gostei…está aprovado….