标签：
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>
标签：
原文地址：http://www.cnblogs.com/margin-gu/p/5015673.html
