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!