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!

9 comentários em “JQuery: Efeito SlideUp / SlideDown aplicado ao rodapé do site

  • 3 de outubro de 2012 em 16:54
    Permalink

    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.

    Resposta
  • 5 de janeiro de 2013 em 17:24
    Permalink

    Por exemplo: kero que ao entrar no site o rodapé JA ESTEJA ABERTO, ai ao clicar ele se esconda, como faço dai?

    Resposta
    • 13 de janeiro de 2013 em 9:36
      Permalink

      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.

      Resposta
  • 29 de junho de 2013 em 3:57
    Permalink

    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

    Resposta
  • 23 de julho de 2013 em 0:36
    Permalink

    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!

    Resposta
    • 24 de julho de 2013 em 17:38
      Permalink

      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.

      Resposta
  • 24 de julho de 2013 em 21:42
    Permalink

    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!

    Resposta
  • 2 de agosto de 2013 em 11:06
    Permalink

    Vai me ajudar e muito cara, Valeu!

    Resposta
  • 22 de setembro de 2014 em 10:43
    Permalink

    Muito legal, pena que ele faz o OneMenu object do Primefaces parar de funcionar, terei que arrumar outro. Mas obrigado pelo post.

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *