1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
5 </script>
6 <script>
7 $(document).ready(function(){
8 $(".Menu h3").click(function () {
9 if ($(this).next("ul").css("display") == "block")
10 $(this).next("ul").slideUp();
11 else {
12 var uls = $(this).parent().children("ul");
13 uls.slideUp();
14 $(this).next("ul").slideDown();
15 }
16 });
17 });
18 </script>
19 <style type="text/css">
20 .hamburgermenu {
21 background: none repeat scroll 0 0 #373737;
22 box-shadow: 3px 0 7px rgba(0, 0, 0, 0.55);
23 height: 100%;
24 overflow: hidden;
25 width:150px;
26 }
27 .Menu {
28 text-align: center;
29 width: 100%;
30 }
31
32 .Menu h3 {
33 cursor: pointer;
34 margin: 0;
35 color: #ccc;
36 padding: 14px 8px;
37 text-align: center;
38 text-decoration: none;
39 }
40
41 .Menu h3:hover {
42 background-color: #2c2c2c;
43 color: #fff;
44 }
45
46 .Menu ul {
47 list-style-type: none;
48 margin: 0;
49 padding: 0;
50 display: none;
51 background-color: #222;
52 }
53
54 .Menu ul li {
55 font: 13px/31px "Microsoft YaHei";
56 height: 31px;
57 }
58
59
60 .Menu a {
61 text-decoration: none;
62 color: #fff;
63 }
64 }
65 </style>
66 </head>
67 <body>
68 <div class="hamburgermenu">
69 <div class="Menu">
70 <h3>菜单一</h3>
71 <ul>
72 <li>
73 <a href="javascript:void(0)">子菜单一</a>
74 </li>
75 <li>
76 <a href="javascript:void(0)">子菜单二</a>
77 </li>
78 </ul>
79 <h3>菜单二</h3>
80 <ul>
81 <li>
82 <a href="javascript:void(0)">子菜单一</a>
83 </li>
84 <li>
85 <a href="javascript:void(0)">子菜单二</a>
86 </li>
87 </ul>
88 <h3>菜单三</h3>
89 <ul>
90 <li>
91 <a href="javascript:void(0)">子菜单一</a>
92 </li>
93 <li>
94 <a href="javascript:void(0)">子菜单二</a>
95 </li>
96 </ul>
97 <h3>菜单四</h3>
98 <ul>
99 <li>
100 <a href="javascript:void(0)">子菜单一</a>
101 </li>
102 <li>
103 <a href="javascript:void(0)">子菜单二</a>
104 </li>
105 </ul>
106 </div>
107 </div>
108 </body>
109 </html>
时间： 2024-11-09 00:10:12