html css3侧边栏

by gothic

HTML

<input type="checkbox" id="sideToggle">
	<aside><h2>Side Menu</h2></aside>
	<div id="wrap">
		<label for="sideToggle">=</label>
		<p>HTML5/CSS3点击显示侧边框   </p>
	</div>

CSS

*{ margin:0; padding:0; }
		html{ height:100%; }
		p{ padding:10px 0; }
		body{ min-height:100%; font-family:arial; position:relative; }
		body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
		#sideToggle{ display:none; }
		#sideToggle:checked + aside{ left:0; }
		#sideToggle:checked ~ #wrap{ padding-left:220px; }
		body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
		body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
		#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
		#wrap > label{ display:inline-block; }
		#wrap > label{display: block;width: 30px; height: 30px;line-height: 35px;border-radius:50px; text-align: center;
			background:#f1103a;   
			font-family: Courier New;
			font-size: 25px;
			font-weight: bold;
			color: #FFF;
			cursor: pointer;
			text-shadow: 0 -4px;
		}
		#wrap > label:hover{ background:#000; }