右侧菜单显示隐藏

<style>
.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{ background:#f1103a;border-radius:50px;color: #FFF;cursor: pointer;display: block;font-family: Courier New;font-size: 25px;font-weight: bold;width: 30px;height: 30px;line-height: 35px;text-align: center;text-shadow: 0 -4px;}
#wrap > label:hover{ background:#000; }
</style>

<input type='checkbox' id='sideToggle'>
<aside>Side Menu</aside>
<div id='wrap'>
<label id='sideMenuControl' for='sideToggle'>=</label>
</div>

转载于:https://www.cnblogs.com/ince/p/9801840.html