|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <body>
| |
| − | <style>
| |
| − | .top {
| |
| − | position: absolute;
| |
| − | left: 0; right: 0;
| |
| − | height: 72px;
| |
| − | }
| |
| − | .sidebar {
| |
| − | position: absolute;
| |
| − | left: 0; top: 72px; bottom: 0;
| |
| − | width: 178px;
| |
| − | }
| |
| − | .content {
| |
| − | position: absolute;
| |
| − | left:178px; top: 72px; right: 0; bottom: 0;
| |
| − | }
| |
| − | #sideToggle {
| |
| − | display: none;
| |
| − | }
| |
| − | .sidebar {
| |
| − | display: none;
| |
| − | }
| |
| − | .content {
| |
| − | position: absolute;
| |
| − | left:0; top: 72px; right: 0; bottom: 0;
| |
| − | }
| |
| − | #sideToggle:checked + .sidebar{display: block}
| |
| − | #sideToggle:checked ~ .content{left: 178px}
| |
| | | | |
| − | .nav {
| |
| − | list-style: none;
| |
| − | position: absolute;
| |
| − | left: 0;right: 0;
| |
| − | padding: 0;
| |
| − | }
| |
| − | .nav a:link{color: #000}
| |
| − | .nav a:visited {color: #000}
| |
| − | .nav a:hover {
| |
| − | color: #aaaaaa;
| |
| − | }
| |
| − | .nav li {
| |
| − | border: solid 1px;
| |
| − | padding: 5px 0 5px 0;
| |
| − | border-bottom-width: 0px;
| |
| − | }
| |
| − | /*选择最后一个元素*/
| |
| − | .nav li:last-child {border-bottom-width: 1px}
| |
| − | .nav a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <div class="top">
| |
| − | <label id="sideBarControl" for="sideToggle">显示/隐藏菜单</label>
| |
| − | </div>
| |
| − | <input type="checkbox" id="sideToggle">
| |
| − | <div class="sidebar">
| |
| − | <p>菜单内容</p>
| |
| − | <ul class="nav">
| |
| − | <li><a id="_1" href="#">Menu1</a> </li>
| |
| − | <li><a id="_2" href="#">Menu2</a> </li>
| |
| − | <li><a id="_3" href="#">Menu3</a> </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div class="content">
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
