話不多說，直接上代碼。
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title></title> | |
| <base target="content" /> | |
| <script type="text/javascript" src="js/jquery.min.js"></script> | |
| <link rel="shortcut icon" href="favicon.ico"> | |
| <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> | |
| <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
| <style> | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .page{ | |
| position: absolute; | |
| /*left: 300px;*/ | |
| width: 100%; | |
| height: 100%; | |
| background-color: lavender; | |
| } | |
| .top{ | |
| position: fixed; | |
| width: 100%; | |
| height: 60px; | |
| background-color: royalblue; | |
| z-index: 500; | |
| } | |
| .mybtn{ | |
| margin-top: 15px; | |
| margin-left: 15px; | |
| color: #FFFFFF; | |
| font-size: 28px; | |
| } | |
| .mybtn:hover{ | |
| cursor: pointer; | |
| } | |
| .backimg{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| background-color: black; | |
| opacity: 0.3; | |
| display: none; | |
| } | |
| .right-dh{ | |
| border: 1px solid #000000; | |
| position: absolute; | |
| left: -300px; | |
| background-color: black; | |
| width: 300px; | |
| height: 100%; | |
| z-index: -10; | |
| } | |
| .right-dh-tx{ | |
| text-align: center; | |
| } | |
| .right-dh-tx img{ | |
| display: block; | |
| width: 110px; | |
| border-radius: 50%; | |
| border: 3px solid #FFFFFF; | |
| margin: 100px auto 30px; | |
| } | |
| .right-dh-tx span{ | |
| color: #FFFFFF; | |
| } | |
| .cont iframe{ | |
| position: absolute; | |
| top: 65px; | |
| width: 100%; | |
| height: 100%; | |
| border: 0px; | |
| /*background-color: brown;*/ | |
| } | |
| .dh-btn{ | |
| margin-top: 50px; | |
| /*border-top: 1px solid gray;*/ | |
| } | |
| .dh-btn a{ | |
| display: block; | |
| color: #FFFFFF; | |
| text-decoration: none; | |
| /*border-bottom: 1px solid gray;*/ | |
| height: 60px; | |
| line-height: 60px; | |
| text-indent: 20px; | |
| } | |
| hr{ | |
| width: 200px; | |
| color: gainsboro; | |
| opacity: 0.3; | |
| margin-top: 50px; | |
| } | |
| </style> | |
| <script> | |
| $(document).ready(function(){ | |
| //側滑按鈕點擊事件 | |
| $(".mybtn").click(function(){ | |
| //頁面整體側滑 | |
| $(".page").animate({ | |
| left:'300px' | |
| }); | |
| //顯示透明度div層 | |
| $(".backimg").css({ | |
| "display":"block" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'0px' | |
| }); | |
| }); | |
| //還原點擊事件 | |
| $(".backimg").click(function(){ | |
| //頁面整體左滑動 | |
| $(".page").animate({ | |
| left:'0px' | |
| }); | |
| //顯示透明度div層隱藏 | |
| $(".backimg").css({ | |
| "display":"none" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'-300px' | |
| }); | |
| }); | |
| //欄目選擇事件 | |
| $(".dh-btn a").click(function(){ | |
| //頁面整體左滑動 | |
| $(".page").animate({ | |
| left:'0px' | |
| }); | |
| //顯示透明度div層隱藏 | |
| $(".backimg").css({ | |
| "display":"none" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'-300px' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!--右側導航--> | |
| <div class="right-dh"> | |
| <!--右側導航頭像--> | |
| <div class="right-dh-tx"> | |
| <img src="img/tx.jpg" /> | |
| <span>劉德華</span> | |
| </div> | |
| <hr /> | |
| <!--導航欄--> | |
| <div class="dh-btn"> | |
| <a class="dj" href="grzl.html"> | |
| <i class="fa fa-bars"></i> 個人資料 | |
| </a> | |
| <a href="zpzs.html"> | |
| <i class="fa fa-bank"></i> 作品展示 | |
| </a> | |
| <a href="ysxz.html"> | |
| <i class="fa fa-beer"></i> 藝術寫真 | |
| </a> | |
| <a href="yyjl.html"> | |
| <i class="fa fa-bold"></i> 演繹經歷 | |
| </a> | |
| </div> | |
| </div> | |
| <!--左側界面--> | |
| <div class="page"> | |
| <div class="backimg"></div> | |
| <div class="top"> | |
| <!--向右滑動按鈕--> | |
| <i class="mybtn fa fa-user"></i> | |
| </div> | |
| <!--主要內容--> | |
| <div class="cont"> | |
| <iframe name="content" src="shouye.html"></iframe> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |