自适应左右型网站框架模板

2019-11-10 17:08:10 星期日

在宽屏上是左右型, 在窄屏上是需要点击按钮, 左侧内容会滑动出来

HTML代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
 7     <link rel="stylesheet" href="/my/css/frame.css?v=1">
 8 </head>
 9 <body>
10     <div id="container">
11         <!-- 左侧目录开始  -->
12         <div id="sidebar" >
13             <div id="sidebar-title">目录标题</div>
14             <div id="sidebar-menu">
15                 <div class="sidebar-menu-item">目录子标题1</div>
16                 <div class="sidebar-menu-item">目录子标题2</div>
17                 <div class="sidebar-menu-item">目录子标题3</div>
18                 <div class="sidebar-menu-item">目录子标题4</div>
19             </div>
20         </div>
21         <!-- 左侧目录结束  -->
22 
23         <!-- 右侧内容开始  -->
24         <div id="content">
25             右侧内容: 
26             hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
27         </div>
28         <!-- 右侧内容结束  -->
29     </div>
30 
31     <div id="list_note_icon" onclick="showSider();"></div>
32     <script>
33         function showSider() {
34             let sidebar = document.getElementById('sidebar');
35             let windowWidth = window.screen.width;
36 
37             if (sidebar.style['margin-left'] === '0px') {
38                 sidebar.style['margin-left'] = '-'+windowWidth+'px';
39             } else {
40                 sidebar.style['margin-left'] = '0px';
41             }
42         }
43     </script>
44 </body>
45 </html>

 

css样式:

  1 html, body {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 
  6 /*宽屏*/
  7 @media screen and (min-width: 501px) {
  8     #container {
  9         display: -webkit-flex; /* Safari */
 10         display: flex;
 11         flex-direction:row;
 12         flex-wrap: nowrap;
 13         justify-content: center;
 14         align-items: stretch;
 15         min-height: 100vh;
 16         /*overflow: auto;*/
 17     }
 18 
 19     #sidebar {
 20         order:0;
 21         flex-grow: 1;
 22         padding: 0.5rem 0.5rem 0 0.5rem;
 23         background-color: #404c57;
 24         color: #f2f4f6;
 25     }
 26 
 27     #content {
 28         order:1;
 29         flex-grow:12;
 30         padding-left: 1rem;
 31         padding-top: 0.5rem;
 32     }
 33 
 34     #list_note_icon {
 35         display: none;
 36     }
 37 }
 38 /*小屏幕*/
 39 @media screen and (min-width: 200px) and (max-width: 500px) {
 40     #container {
 41         width: 100%;
 42         min-height: 100%;
 43     }
 44 
 45     #sidebar {
 46         padding: 0;
 47         margin: 0;
 48         background-color: #fbfbfb;
 49         color: #404c57;
 50         width: 100vw;
 51         height: 100vh;
 52         overflow: auto;
 53         opacity: 0.95;
 54         position: fixed;/*这里一定要设置*/
 55         top: 0;
 56         right: 0;
 57         left: 0;
 58         bottom: 0;
 59         z-index: 500;
 60         -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
 61         -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/
 62         -o-transition: .5s ease-in-out;
 63     }
 64 
 65     #content {
 66         width: 100%;
 67         padding: 0.5rem;
 68     }
 69 
 70     .root-title {
 71         padding-left: 0.5rem;
 72     }
 73 }
 74 
 75 #sidebar-title {
 76     width: 100%;
 77     text-align: center;
 78     font-size: 1.6rem;
 79     margin-top: 0.5rem;
 80     margin-bottom: 1rem;
 81 }
 82 
 83 .sidebar-menu-item {
 84     margin: 0.5rem 0 0 0.5rem;
 85 }
 86 
 87 
 88 /** 右下角跳转按钮 跳转到列表 */
 89 #list_note_icon
 90 {
 91     position: fixed;
 92     bottom: 7%;
 93     right: 8%;
 94     z-index: 900;
 95     background: #eee;
 96     width: 50px;
 97     height: 50px;
 98     border-radius: 25px;
 99     /*box-shadow: 2px 2px 2px #888888;*/
100     opacity:0.7 ;
101 }
102 
103 #list_note_icon:before
104 {
105     content: "";
106     display:block;
107     background:#555;
108     position:absolute;
109     height:2px;
110     width:28px;
111     top:13px;
112     left:11px;
113     box-shadow:0 10px #555, 0 20px #555, 0 30px #555;
114     -webkit-box-shadow:0 8px #555, 0 16px #555, 0 24px #555;
115     -moz-box-shadow:0 10px #555, 0 20px #555, 0 30px #555;
116 }
117 
118 footer {
119     height:32px;
120     line-height: 32px;
121     text-align: center;
122 }

举例: https://doc.hearu.top

posted @ 2019-11-10 17:12  myD  阅读(1156)  评论(0)  编辑  收藏  举报