JQuery: Efeito SlideUp / SlideDown aplicado ao rodapé do site
Mas um post bacana para o pessoal que acompanha o linhadecomando.com
JQuery realmente é fantástico. Digae se não é verdade… rs
A idéia é esconder o rodapé e só mostrar quando clicar no botão; se clicar novamente o rodapé recolhe.
“Nossa era isso que eu precisava” – veio ao lugar certo.
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 | <style type="text/css"> *{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; color:#000; } #containerRodape{ position:fixed; bottom:0; width:100%; color:#FFFFFF; border-top:4px solid #0099FF; } #rodape{ display:none; /* esconde o rodape */ width:100%; height:200px; margin:0 auto; text-align:center; background-color:#0066CC; color:#FFFFFF; } #icone{ position:absolute; top: -28px; /* posicionamento */ right:5px; float:right; z-index:9999; /* sobrepondo */ height:24px; /* altura do icone */ width:24px; /* largura do icone */ cursor:pointer; } .plus{ background:url(plus.png) no-repeat; } .minus{ background:url(minus.gif) no-repeat; } </style> |
<script type="text/javascript"> $(function() { $("#icone").click(function(){ var rodape = $("#rodape"); if (rodape.is(":visible")){ rodape.slideUp( 500 ); $("#icone").removeClass('minus').addClass('plus'); } else { rodape.slideDown( 500 ); $("#icone").removeClass('plus').addClass('minus'); } }); }); </script> |
<div id="containerRodape"> <div id="icone" class="plus"></div> <div id="rodape">RODAPÉ DO SITE</div> </div> |
Baixe os ícones aqui:
– mais
– menos
Veja o funcionamento clicando aqui.
Espero que gostem!
Olá Tiago, boa tarde.
Muito legal esse seu script, tem muita gente que “carrega” o rodapé de informações e essa solução deixa livre ao usuário ver ou não o conteúdo.
Parabéns, muito legal mesmo.
Por exemplo: kero que ao entrar no site o rodapé JA ESTEJA ABERTO, ai ao clicar ele se esconda, como faço dai?
Olá Rony,
para fazer o que você quer, basta fazer 2 pequenas alterações:
1ª: na linha 16 você deve comentar essa linha display:none;
2ª: antes dessa linha $(“#icone”).click(function(){ você acrescenta essa $(“#icone”).removeClass(‘plus’).addClass(‘minus’);
Espero ter ajudado.
Maluco, ganhei minha madrugada, vou poder dormir agora as três da manhã e não às 7 da manhã. Era isso que eu precisava cara! Kkkkkk
Valeu
Boa noite,
Gostaria de parabenizar pelo site e seus post’s, porem, tenho um problema.
Eu não consigo animar o rodapé, fiz todo o passo explicativo, fiz aparecer os icones, mais ele não abre o rodapé, fica estático. O que será que eu fiz de errado?
Obrigado!
Obrigado por participar do blog.
No código que compartilho eu não coloquei a chamada a biblioteca do JQuery.
Veja se não é isso que está faltando.
Boa noite Tiago,
Obrigado pela resposta.
Realmente, sou iniciante no assunto e não havia percebido, fiz a chamada do “jquery” e deu certíssimo!
Muito obrigado novamente!
Vai me ajudar e muito cara, Valeu!
tem como fazer isso sem click? que abra sozinho sem o click.
Muito legal, pena que ele faz o OneMenu object do Primefaces parar de funcionar, terei que arrumar outro. Mas obrigado pelo post.
Olá,
Inseri todo o código dentro da página, no blogger. Porém o rodapé não se move.
Creio que o problema seja no script, porém já alterei de várias maneiras e ainda continua do mesmo jeito.