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- 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- 200px) and (max- 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 }