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

Posted 2020-09-14 法克大叔叔

最终效果图：

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     });