原文:

效果演示

 

 

实现原理

1. 使用3个div（一个是顶部栏，一个是左侧栏，一个是右侧栏）；
2. 使用checkbox作为判断是否显示和隐藏右侧栏，点击显示和隐藏label实现最终效果。

 

代码说明

css

　　

1. 设置了顶部div，height为30px，width为100%，底部有边框的效果；
2. 设置了左侧div，top为32px，距离右侧301px，距离底部1px，width为auto的效果；
3. 设置了右侧div，top为31px，width为300px，距离底部1px，左侧有边框的效果；
4. 设置了用于点击切换效果的区域，top为49%，width为15px，height为50px，距离右侧301px，同时设置左上及左下为圆角效果；
5. 设置用于标识右侧div显示和隐藏效果的样式。

 

html

     
	
      	
      
		
       
        Top panel
       
	
      
	
      
		
       
        Content		Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content 
       
	
      
	
      
		
       		
       	
      
	
      
		
       
			
        
				
         
Right panel
			
        
		
       
	
      
     

 运行后，就可以看见效果了。