javascript:网站后台菜单特效
1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 #box{ 6 width:200px; 7 border:dashed 1px green; 8 float:left; 9 } 10 h5{ 11 font-weight:normal; 12 text-align:center; 13 font-size:14px; 14 color:#333333; 15 line-height:25px; 16 margin:0px; 17 clear:both; 18 background-color:lightgreen; 19 cursor:pointer; 20 border:solid 1px green; 21 border-width:1px 0px; 22 } 23 ul.menu{ 24 list-style-type:none; 25 border:solid 0px #aaaaaa; 26 margin:8px 18px; 27 margin-top:0px; 28 } 29 ul.menu li{ 30 line-height:25px; 31 font-size:12px; 32 color:green; 33 text-align:center; 34 } 35 div.submenu{ 36 37 } 38 </style> 39 </head> 40 <body> 41 <div id='box'> 42 <div class='div_submenu'> 43 <h5 onclick="fun('menu1');">菜单大类</h5> 44 <ul class='menu' id='menu1'> 45 <li>菜单各项1</li> 46 <li>菜单各项2</li> 47 <li>菜单各项3</li> 48 <li>菜单各项4</li> 49 </ul> 50 </div> 51 <div class='div_submenu'> 52 <h5 onclick="fun('menu2');">菜单大类</h5> 53 <ul class='menu' id='menu2'> 54 <li>菜单各项1</li> 55 <li>菜单各项2</li> 56 <li>菜单各项3</li> 57 <li>菜单各项4</li> 58 </ul> 59 </div> 60 <div class='div_submenu'> 61 <h5 onclick="fun('menu3');">菜单大类</h5> 62 <ul class='menu' id='menu3'> 63 <li>菜单各项1</li> 64 <li>菜单各项2</li> 65 <li>菜单各项3</li> 66 <li>菜单各项4</li> 67 </ul> 68 </div> 69 <div class='div_submenu'> 70 <h5 onclick="fun('menu4');">菜单大类</h5> 71 <ul class='menu' id='menu4'> 72 <li>菜单各项1</li> 73 <li>菜单各项2</li> 74 <li>菜单各项3</li> 75 <li>菜单各项4</li> 76 </ul> 77 </div> 78 </div> 79 <script language='javascript'> 80 function fun(str){ 81 var object=document.getElementById(str); 82 if(object.style.display=='none'){ 83 object.style.display=''; 84 }else{ 85 object.style.display='none'; 86 } 87 } 88 </script> 89 </body> 90 </html>