标签:
1.减少js的使用,用html5+css3代替
原理是利用一个隐藏的多选框的条件选择符进行CSS的覆盖,配合css3的缓动效果
#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> <input type=‘checkbox‘ id=‘sideToggle‘> <aside><h2>Side Menu</h2></aside> <div id=‘wrap‘> <label id=‘sideMenuControl‘ for=‘sideToggle‘>=</label> <p>HTML5/CSS3点击显示侧边框 </p> </div> </body>
标签:
原文地址:http://www.cnblogs.com/lichuntian/p/4581335.html