JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div class="stickyfooter">
    <div id="sticky_footer_title"><a class="show_hide" href="#">Toggle Menu &#x25BC;</a></div>
    <div id="stickyfooter">
        <ul id="footer_menu"> 
            <li class="imgmenu"><a href="#"></a></li>
            <li><a href="#intro">Intro</a></li>
            <li><a href="#photos">Photos</a></li>
        </ul>
    </div>
</div>

CSS

#sticky_footer_title { 
    position:absolute; 
    bottom: 40px; 
    left: 50px; 
    background-color:#FF0000; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 18px; 
    color:#FFF; 
    text-shadow:none;
    line-height: 34px; 
    padding: 0px 20px 0px 20px; 
}
   

.stickyfooter {
    position: fixed;
    bottom: 0px;
    margin:0 auto;
    width: 400px;
}

#stickyfooter {
    height: 40px;
    background:#e9e9e9;
    border-top: 1px solid #e9e9e9;
    padding:0px 10px 0px 10px;
    font-family:Arial, Helvetica, sans-serif;
    z-index:1200;

    
    /* CSS3 Stylings - Creates the double top border */
    -moz-box-shadow: 0px -1px 0px #e9e9e9;
    -webkit-box-shadow:  0px -1px 0px #e9e9e9;
    box-shadow:  0px -1px 0px #e9e9e9;
    
    /* CSS3 Rounded Corners */
    -moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
    
    /* CSS3 Stylings - Creates the gradient background */
    background: -moz-linear-gradient(top, #FFF, #e9e9e9);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e9e9e9), to(#FFF));
}

/* General typography stylings, paragraphs and H2 tags */

#stickyfooter h2 {
    font-size:24px;
    line-height:24px;
    color:#FF6600;
    letter-spacing:-1px;
    font-weight:400;
    padding:0px 10px 0px 10px;
    margin:12px 0;
}
#stickyfooter p {

    color:#cccccc;
    font-size:18px;
    padding:0 10px 0 10px;
    line-height:18px;
    float:left;
    margin:10px 0;
}
#stickyfooter img {
    border:none;
}
#stickyfooter a {
    color:#FF6600;
    text-decoration:none;
}
#stickyfooter li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}

#stickyfooter .strong { /* Forcing a bold text */
    font-weight:bold;
}
#stickyfooter .italic { /* Forcing an italic text */
    font-style:italic;
}
.clear { /* Use this class between rows of content when you use columns */
    clear: both;
    display: block;
    overflow: hidden;
   ...

JavaScript

var $showhide = $(".show_hide");
var $stickyfooter = $("#stickyfooter");
var $stickyfootertitle = $("#sticky_footer_title ");

$stickyfooter.show();
$showhide.show();

$showhide.click(function(){
    var showMenu = $("#stickyfooter").css("display") == "block";

    $stickyfooter.slideToggle("slow");

    if(showMenu )
    {
        $stickyfootertitle.animate({
            bottom:'0px'
        }, "slow");
    }
    else
    {
       $stickyfootertitle.animate({
            bottom:'40px'
        }, "slow");
    }
});