How to make a fixed and retractable footer similar to the Economy page of the Earth portal?

Asked

Viewed 1,731 times

6

I have the idea of building a fixed footer on the page similar to that of the portal Earth Economy. Such functionality will allow me to expose a chat in this space.

I like the Earth solution because it is possible to retract the object and still keep it in the lower right corner without disturbing the reading of the page.

I need to know the name of the property and technologies involved.

http://economia.terra.com.br/

javascript html css
  • 2

    CSS with display: fixed and JS to hide and display, plus the two arrow images...

  • Is there a property regarding? I found a solution called "Sticky footer" but still have to solve the retractable bar problem.

2 answers

2

Create a footer with a id="rodape" and then put in 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;
  }

the width: 100% and the height: 50px are optional. If you don’t want one width: 100% aligns with the left:.

script to hide/appear

    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 = "<";
    }
}

And to appear when the user is at the end this link can help you http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

2

You can use the .animate() jquery to hide the display footer

Follow an example:

Jsfiddle

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.