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>
