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" } }
写的不好,多谅解