Skip to main content
added 977 characters in body
Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

Crie um footer com um id="rodape" e depois coloque no css: html:

 <footer id="rodape"><id="rodape"><a style="position: relative; right: 0px; float:left; font-size: 50px; display: block; text-decoration: none; color: #ffffff; " href="javascript:drop('fechar')" id="link"><span> < </span></a>
</footer>

css:

  #rodape{
    margin-bottom:0px;
    display: block;
    bottom: 0%;0px;
    background: #333333;
    width: 100%;
    height: 50px;
    position: relativeabsolute;
    right: 0px;
    -webkit-transition: 0.5s;
  }

o width: 100% e o height: 50px são opcionais. Se você não quiser um um width: 100% alinha-se com o left: .

script para esconder/aparecer

    function drop(ver){
    if(ver == "fechar"){
        document.getElementById('rodape').style.left = "-97%";
        document.getElementById('link').style.float = "right";
        document.getElementById('link').href = "javascript:drop('abrir')";
        document.getElementById('link').innerHTML = ">";
    }if(ver == "abrir"){
        document.getElementById('rodape').style.left = "0px";
        document.getElementById('link').style.float = "left";
        document.getElementById('link').href = "javascript:drop('fechar')";
        document.getElementById('link').innerHTML = "<";
    }
}

E para aparecer quando o usuário está no fim este link pode lhe ajudar http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

Crie um footer com um id="rodape" e depois coloque no css: html:

 <footer id="rodape"></footer>

css:

  #rodape{
    margin-bottom:0px;
    display: block;
    bottom: 0%;
    background: #333333;
    width: 100%;
    height: 50px;
    position: relative
  }

o width: 100% e o height: 50px são opcionais. Se você não quiser um um width: 100% alinha-se com o left: .

Crie um footer com um id="rodape" e depois coloque no css: html:

 <footer id="rodape"><a style="position: relative; right: 0px; float:left; font-size: 50px; display: block; text-decoration: none; color: #ffffff; " href="javascript:drop('fechar')" id="link"><span> < </span></a>
</footer>

css:

  #rodape{
    margin-bottom:0px;
    bottom: 0px;
    background: #333333;
    width: 100%;
    height: 50px;
    position: absolute;
    right: 0px;
    -webkit-transition: 0.5s;
  }

o width: 100% e o height: 50px são opcionais. Se você não quiser um um width: 100% alinha-se com o left: .

script para esconder/aparecer

    function drop(ver){
    if(ver == "fechar"){
        document.getElementById('rodape').style.left = "-97%";
        document.getElementById('link').style.float = "right";
        document.getElementById('link').href = "javascript:drop('abrir')";
        document.getElementById('link').innerHTML = ">";
    }if(ver == "abrir"){
        document.getElementById('rodape').style.left = "0px";
        document.getElementById('link').style.float = "left";
        document.getElementById('link').href = "javascript:drop('fechar')";
        document.getElementById('link').innerHTML = "<";
    }
}

E para aparecer quando o usuário está no fim este link pode lhe ajudar http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

Fonte Link
Samir Braga
  • 10,1mil
  • 6
  • 33
  • 54

Crie um footer com um id="rodape" e depois coloque no css: html:

 <footer id="rodape"></footer>

css:

  #rodape{
    margin-bottom:0px;
    display: block;
    bottom: 0%;
    background: #333333;
    width: 100%;
    height: 50px;
    position: relative
  }

o width: 100% e o height: 50px são opcionais. Se você não quiser um um width: 100% alinha-se com o left: .