自己做了一个左边侧边栏展开的效果

html

<div class="left">
  <ul class="left_ul" id="leftUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        
  </ul>
    
</div>
<div class="footer" id="footer">
  <div class="footer_close" id="footerClose">×</div>
<div class="footer_cont">
    <div class="cont_one">此处显示 1111111111111 的内容</div>
    <div class="cont_two">此处显示22222222222222 的内容</div>
    <div class="cont_three">此处显示33333333333333 的内容</div>
  </div>
</div>

css 

*{ margin:0; padding:0;}
ul,li { list-style:none;}
.left { width:50px; height:100%; position:absolute; left:0px; top:0px; border-right:solid 1px #ccc; box-shadow:0px 2px 1px #555 ; z-index:5; background-color:#fff;}
.left_ul { position:absolute; top:50%; height:150px;  width:50px; margin-left:5px; margin-top:-100px;}
.left_ul li { margin-bottom:8px; height:40px; width:40px; border-radius:50%; background-color:#f4f4f4; cursor:pointer; line-height:40px; text-align:center;}
.left_ul li:hover { background-color:#0Cf; color:#fff;}
.footer { width:200px; height:100%; position:absolute;  background-color:#f3f3f3;box-shadow:1px 0px 2px #ccc;  overflow:hidden; display:none;}
.footer_cont { padding-top:100px; padding-left:5px; padding-right:5px;}
.footer_cont>div{ border:solid 1px #0CF; height:100px; display:none; overflow:hidden;}
.footer_close { background-color:#ccc; color:#fff; text-align:center; width:20px; height:20px; border-radius:50%; position:absolute; right:5px; top:5px; cursor:pointer; line-height:20px; font-family:Arial, Helvetica, sans-serif;}
.footer_close:hover { background-color:#0CF; color:#fff;}

js

var  leftUl = document.getElementById("leftUl");
var list = leftUl.getElementsByTagName("li");
var footer = document.getElementById("footer");
var Istanchu = false ;
window.onload = init ;
function init(){
for (var i=0;i<list.length;i++){
    list[i].setAttribute("index",i);
    list[i].addEventListener("click",tanchu);
    }

}

function tanchu(e){
    
    var num = this.getAttribute("index");
    
    var footerList = footer.querySelectorAll(".footer_cont>div");
    for(var l =0; l<footerList.length ; l++){footerList[l].style.display= "none"; }
    if(Istanchu){
        footerList[num].style.display = "block";
        footerList[num].style.height = "0px";
        slidUp(footerList[num]);
        }
    else {
    footerList[num].style.display = "block";
    footer.style.display= "block";
    footer.style.left= "-50px";
    move(footer);
    }
    var footerClose = document.getElementById("footerClose");
    footerClose.addEventListener("click",shoudiao);
    
    
}
function move (ele){
    this.ele = ele ;
    ele.style.left = parseInt(ele.style.left)+20+"px";
    time = setTimeout("move(this.ele)",50);
    if(parseInt(ele.style.left)>=50){
        clearTimeout(time);
        ele.style.left = "50px";
        Istanchu = 1 ;
        
        }
    }
// 关闭弹出框
function shoudiao(){
    footer.style.left = parseInt(footer.style.left)-20+"px";
    time = setTimeout(shoudiao,50);
    if(parseInt(footer.style.left)<=-150){
        clearTimeout(time);
        footer.style.left = "-150px";
        footer.style.display= "none";
        Istanchu = 0 ;
        
        }
    }

// 子模块向上弹出
function  slidUp (ele){
    this.ele = ele ;
    //console.log(ele);
    ele.style.height = parseInt(ele.style.height)+20+"px";
    time = setTimeout("slidUp(this.ele)",50);
    if(parseInt(ele.style.height)>=100){
        clearTimeout(time);
        ele.style.left = "100px"
    }
}

写的不好，多谅解