blog 菜单栏 nbsp function ref bsp ctu 代码
最终效果图:
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
- });
jQuery 制作一个多彩下拉菜单按钮
来源: http://www.bubuko.com/infodetail-2043912.html