最终效果图：
html代码：
1 <div id="list"> 2 <div id="btn"> 3 <div class="icon"> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div> 8 </div> 9 <ul> 10 <li class="photograph"><a href="#"><span></span></a></li> 11 <li class="remark"><a href="#"><span></span></a></li> 12 <li class="game"><a href="#"><span></span></a></li> 13 </ul>
css代码：
1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 padding: 0; 5 margin: 0; 6 } 7 #list{ 8 position: absolute; 9 top: 10px; 10 left: 10px; 11 border: 1px solid red; 12 } 13 #btn{ 14 position: absolute; 15 top: 0; 16 left: 0; 17 width:50px; 18 height: 50px; 19 border-radius: 50%; 20 /* border: px solid blue;*/ 21 background-color: white; 22 } 23 .icon{ 24 width: 20px; 25 height: 20px; 26 position: absolute; 27 top: 50%; 28 left: 50%; 29 margin-left: -10px; 30 margin-top: -10px; 31 } 32 #btn span{ 33 display: block; 34 width:20px; 35 height: 3px; 36 background-color: black; 37 margin-top: 3px; 38 } 39 #list ul{ 40 width:50px; 41 height: 215px; 42 /* border: 1px solid black;*/ 43 border-radius: 50px; 44 position: absolute; 45 top: 0; 46 left: 0; 47 z-index: -1; 48 display: none; 49 } 50 #list li{ 51 list-style: none; 52 width: 50px; 53 height: 80px; 54 /* border: 1px solid pink;*/ 55 border-bottom-left-radius: 50px; 56 border-bottom-right-radius: 50px; 57 position: absolute; 58 /* box-shadow: 0px 1px 1px 0px gray;*/ 59 } 60 .photograph{ 61 top:25px; 62 z-index: -1; 63 background-color: aqua; 64 } 65 .remark{ 66 top:80px; 67 z-index: -2; 68 background-color: lightcoral; 69 } 70 .game{ 71 top: 135px; 72 z-index: -3; 73 background-color: lightgoldenrodyellow; 74 } 75 .photograph span{ 76 display: block; 77 width:50px; 78 height: 30px; 79 margin-top: 28px; 80 background: url(picture/相册.png); 81 } 82 .remark span{ 83 display: block; 84 width:50px; 85 height: 30px; 86 margin-top: 28px; 87 background: url(picture/remark.png); 88 } 89 .game span{ 90 display: block; 91 width:50px; 92 height: 30px; 93 margin-top: 28px; 94 background: url(picture/game.png); 95 }
js代码：
1 var flag=0; 2 $(".icon").click(function(){ 3 if(flag==0){ 4 $("ul").slideDown("slow");//菜单栏缓慢显示 5 flag=1; 6 }else{ 7 $("ul").slideUp("slow"); 8 flag=0; 9 } 10 });