javascript:网站后台左侧菜单宽度可以调节的特效
1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 body{ 6 margin:0px; 7 } 8 #box{ 9 width:200px; 10 float:left; 11 border-bottom:solid 1px green; 12 } 13 h5{ 14 font-weight:normal; 15 text-align:center; 16 font-size:14px; 17 color:#333333; 18 line-height:25px; 19 margin:0px; 20 clear:both; 21 background-color:lightgreen; 22 cursor:pointer; 23 border:solid 1px green; 24 border-width:1px 0px; 25 } 26 ul.menu{ 27 list-style-type:none; 28 border:solid 0px #aaaaaa; 29 margin:8px 18px; 30 margin-top:0px; 31 } 32 ul.menu li{ 33 line-height:25px; 34 font-size:12px; 35 color:green; 36 text-align:center; 37 } 38 div.submenu{ 39 } 40 #box_right{ 41 float:right; 42 border:solid 0px green; 43 height:580px; 44 } 45 #middle{ 46 background-color:#eeeeee; 47 float:left; 48 width:3px; 49 cursor:e-resize;/*col-resize*/ 50 } 51 </style> 52 </head> 53 <body> 54 <div id='main_div'> 55 <div id='box'> 56 <div class='div_submenu'> 57 <h5 onclick="fun('menu1');">菜单大类</h5> 58 <ul class='menu' id='menu1'> 59 <li>菜单各项1</li> 60 <li>菜单各项2</li> 61 <li>菜单各项3</li> 62 <li>菜单各项4</li> 63 </ul> 64 </div> 65 <div class='div_submenu'> 66 <h5 onclick="fun('menu2');">菜单大类</h5> 67 <ul class='menu' id='menu2'> 68 <li>菜单各项1</li> 69 <li>菜单各项2</li> 70 <li>菜单各项3</li> 71 <li>菜单各项4</li> 72 </ul> 73 </div> 74 <div class='div_submenu'> 75 <h5 onclick="fun('menu3');">菜单大类</h5> 76 <ul class='menu' id='menu3'> 77 <li>菜单各项1</li> 78 <li>菜单各项2</li> 79 <li>菜单各项3</li> 80 <li>菜单各项4</li> 81 </ul> 82 </div> 83 <div class='div_submenu'> 84 <h5 onclick="fun('menu4');">菜单大类</h5> 85 <ul class='menu' id='menu4'> 86 <li>菜单各项1</li> 87 <li>菜单各项2</li> 88 <li>菜单各项3</li> 89 <li>菜单各项4</li> 90 </ul> 91 </div> 92 </div> 93 <div id='middle' onmousedown="start();"> 94 </div> 95 <div id='box_right'><br/> 96 <font size='6' color='orange'>hello world</font> 97 </div> 98 </div> 99 <script language='javascript'> 100 function fun(str){ 101 var object=document.getElementById(str); 102 if(object.style.display=='none'){ 103 object.style.display=''; 104 }else{ 105 object.style.display='none'; 106 } 107 } 108 var all=document.getElementById('main_div'); 109 var left=document.getElementById('box'); 110 var right=document.getElementById('box_right'); 111 var middle=document.getElementById('middle'); 112 function start(){ 113 left.onmousemove=move1; 114 middle.onmouseup=over; 115 right.onmousemove=move2; 116 right.onmouseup=over; 117 left.style.cursor="e-resize"; 118 right.style.cursor="e-resize"; 119 } 120 function over(){ 121 right.onmousemove=null; 122 right.onmouseup=null; 123 left.onmousemove=null; 124 middle.onmouseup=null; 125 left.style.cursor="auto"; 126 right.style.cursor="auto"; 127 } 128 //6-37.html 129 function move1(){ 130 left.style.width=event.offsetX+'px'; 131 right.style.width=(all.offsetWidth-event.offsetX-3)+'px'; 132 } 133 function move2(){ 134 left.style.width=(left.offsetWidth+event.offsetX)+'px'; 135 right.style.width=(right.offsetWidth-event.offsetX)+'px'; 136 } 137 window.onresize=function(){ 138 right.style.width=(all.offsetWidth-left.offsetWidth-3)+'px'; 139 } 140 window.onload=function(){ 141 right.style.width=(all.offsetWidth-left.offsetWidth-3)+'px'; 142 middle.style.height=right.offsetHeight+'px'; 143 } 144 </script> 145 </body> 146 </html>