jQuery制作一个多彩下拉菜单按钮

最终效果图：

html代码：

 <div id="list">
         <div id="btn">
             <div class="icon">
                 <span></span>
                 <span></span>
                 <span></span>
             </div>
         </div>
         <ul>
             <li class="photograph"><a href="#"><span></span></a></li>
             <li class="remark"><a href="#"><span></span></a></li>
             <li class="game"><a href="#"><span></span></a></li>
         </ul>

css代码：

 @charset "utf-8";
 /* CSS Document */
 *{
         padding:;
         margin:;
     }
     #list{
         position: absolute;
         top: 10px;
         left: 10px;
         border: 1px solid red;
     }
     #btn{
         position: absolute;
         top:;
         left:;
         width:50px;
         height: 50px;
         border-radius: 50%;
 /*        border: px solid blue;*/
         background-color: white;
     }
     .icon{
         width: 20px;
         height: 20px;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -10px;
         margin-top: -10px;
     }
     #btn span{
         display: block;
         width:20px;
         height: 3px;
         background-color: black;
         margin-top: 3px;
     }
     #list ul{
         width:50px;
         height: 215px;
 /*        border: 1px solid black;*/
         border-radius: 50px;
         position: absolute;
         top:;
         left:;
         z-index: -1;
         display: none;
     }
     #list li{
         list-style: none;
         width: 50px;
         height: 80px;
 /*        border: 1px solid pink;*/
         border-bottom-left-radius: 50px;
         border-bottom-right-radius: 50px;
         position: absolute;
 /*        box-shadow: 0px 1px 1px 0px gray;*/
     }
     .photograph{
         top:25px;
         z-index: -1;
         background-color: aqua;
     }
     .remark{
         top:80px;
         z-index: -2;
         background-color: lightcoral;
     }
     .game{
         top: 135px;
         z-index: -3;
         background-color: lightgoldenrodyellow;
     }
     .photograph span{
         display: block;
         width:50px;
         height: 30px;
         margin-top: 28px;
         background: url(picture/相册.png);
     }
     .remark span{
         display: block;
         width:50px;
         height: 30px;
         margin-top: 28px;
         background: url(picture/remark.png);
     }
     .game span{
         display: block;
         width:50px;
         height: 30px;
         margin-top: 28px;
         background: url(picture/game.png);
     }

js代码：

     var flag=0;
     $(".icon").click(function(){
         if(flag==0){
             $("ul").slideDown("slow");//菜单栏缓慢显示
             flag=1;
         }else{
             $("ul").slideUp("slow");
             flag=0;
         }
     });