效果體驗：http:///keleyi/phtml/html5/11.htm
請使用支持HTML5的浏覽器
以下是完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3點擊顯示</title>
<style>
*{ 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; }
#footer {
position:relative;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444; transition:0.25s ease-out; -webkit-transition:0.25s ease-out;
}
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
#sideToggle:checked ~ #footer{margin-left:200px; }
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>
</head>
<body>
<input type='checkbox' id='sideToggle'>
<aside><h2>Side Menu</h2></aside>
<div id='wrap'>
<label id='sideMenuControl' for='sideToggle'>=</label>
<p>HTML5/CSS3點擊顯示側邊框 <a href="http:///a/bjac/7h7u8wq3.htm">原文</a></p>
</div>
<div id="footer">
<div style="margin:80px 0px 0px 60px;">
<ul>
<li><a href="http:///a/bjac/jp71q5jt.htm">jQuery簡便實現遮罩層</a></li><li><a href="http:///a/bjac/fqla3dg9.htm">jQuery插件的編寫技巧</a></li><li><a href="http:///a/bjac/xnoksy9i.htm">jQuery插件開發示例</a></li><li><a href="http:///a/bjac/tv16sjeb.htm">jquery只能輸入數字方法</a></li><li><a href="http:///a/bjac/82awhkfg.htm">jquery背景圖片滑動效果</a></li><li><a href="http:///a/bjac/06r1x7tg.htm" title="美女畢業了 好強大的jquery相冊實例">美女畢業了 好強大的jquery相冊實...</a></li><li><a href="http:///a/bjac/iihv7dpq.htm">jquery選擇id為keleyi的a元素</a></li><li><a href="http:///a/bjac/rgqhstpb.htm">jquery name 選擇器</a></li><li><a href="http:///a/bjac/equl0nue.htm" title="jQuery.attr(elem, name, value, pass)從1.9開始已經移除">jQuery.attr(elem, name, value, p...</a></li><li><a href="http:///a/bjac/uxcoggkn.htm">jquery1.9移除和修改的apis</a></li><li><a href="http:///a/bjac/vc7cmipj.htm" title="jquery 1.10.2和2.0.3以及migrate 1.2.1下載">jquery 1.10.2和2.0.3以及migrate ...</a></li><li><a href="http:///a/bjac/brpi6t6h.htm">jquery升級到1.9以上</a></li><li><a href="http:///a/bjac/wtiuxpsu.htm" title="jQuery 1.9 移除了 $.browser 的替代方法">jQuery 1.9 移除了 $.browser 的替...</a></li><li><a href="http:///a/bjac/no0m3cb1.htm" title="jquery自定義對話框alert、confirm和prompt">jquery自定義對話框alert、confirm...</a></li><li><a href="http:///a/bjac/gucmqug3.htm">jquery圖片上下自動或箭頭控制滾動</a></li><li><a href="http:///a/bjac/lgg5u5qk.htm">獲取div等元素的相對位置</a></li><li><a href="http:///a/bjac/x1dd7ulx.htm">獲取DIV的高度</a></li><li><a href="http:///a/bjac/amrfcwa3.htm" title="select下拉列表 改變事件 jquery change">select下拉列表 改變事件 jquery c...</a></li><li><a href="http:///a/bjac/lxpaofwu.htm" title="Jquery通過改變img的src地址動態換圖片">Jquery通過改變img的src地址動態換...</a></li><li><a href="http:///a/bjac/dikbieq9.htm">jQuery attr() 屬性操作方法</a></li><li><a href="http:///a/bjac/x8v9lfew.htm">jquery添加和除移DOM</a></li><li><a href="http:///a/bjac/h0fmaco7.htm" title="常用的JQuery數字類型驗證正則表達式">常用的JQuery數字類型驗證正則表達...</a></li><li><a href="http:///a/bjac/3n8d6g5f.htm">jstree樹形菜單</a></li><li><a href="http:///a/bjac/j4kedhuq.htm">jquery彈窗</a></li><li><a href="http:///a/bjac/et551617.htm">圖片延遲加載</a></li><li><a href="http:///a/bjac/waljhxqw.htm">jquery圖片延時加載（特效）</a></li><li><a href="http:///a/bjac/uk9m33s4.htm">jQuery UI 菜單</a></li><li><a href="http:///a/bjac/2ntd93mh.htm">jquery獲取元素到頁面頂部距離</a></li><li><a href="http:///a/bjac/7cc2358ac924ebc5.htm">藍色方塊返回頂部</a></li><li><a href="http:///a/bjac/471b2cd96e43c94d.htm">jquery 1.10.1和2.0.2下載</a></li>
</ul>
</div>
</div>
</body>
</html>