Search code examples
jqueryhtmlcsssticky-footer

Sliding up footer

I would like to make a sliding up footer on hover with a footer that stick at the bottom of the page. I manage to stick my footer and make it behave like a button but it doesn't slide up on hover to show the content of the footer.

here is my code:

<html>
<head>
<meta charset='UTF-8'>
<title>sliding footer</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>

<style>
html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

.slide { 
    border:1px solid black;
    width:100%; 
    height:150px; 
    display:none; 
    position:absolute;
    left: 0px;
    right:0px;
    bottom: 25px;   
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;
       left: opx;
       right: 0px;
       border:1px solid black;
       display: inline-block;
       overflow: hidden;
       cursor:pointer;
           background:#FFE4E1;
    }
</style>
</head>


<body>              

<script type="text/javascript">

 $(".footer").hover(function () {
    $(this).children('.slide').slideToggle("fast");
  });

</script>

<div class="footer" > 
    Footer Button
   <div class="slide">

    <a href="#"> footer content 1</a>
    <a href="#"> footer content 2</a>
    <a href="#"> footer content 3</a>

   </div>
</div>

</body>
</html>
Solution

  • I changed up some of the css that I didn't need for JSFIDDLE and made it look slightly different.

    JS:

     $(".footer").hover(function () {
    $(".slide").slideToggle("fast");
  });

    HTML:

    <div class="footer" > 
    <div class="slide">
        <a href="#"> footer content 1</a>
        <a href="#"> footer content 2</a>
        <a href="#"> footer content 3</a>
    </div>
    Footer Button   
</div>

    CSS:

    .slide { 
    border:1px solid black;
    height:125px;    
    left: 0px;
    right:0px;
    bottom: 25px;
    display: none;    
    position: absolute;
}

.footer {
       position:absolute;
       bottom: 0px;
       height:25px;
       width: 100%;       
       left: opx;       
       right: 0px;
       border:1px solid black;
       display: inline-block;       
       cursor:pointer;
       background:#FFE4E1;       
    }