html css 浮层侧边栏

2019-7-1 16:02:25 星期一
实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去
 1 <!DOCTYPE HTML>
 2 <html lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>无标题文档</title>
 6     <style>
 7         
 8         #tl {
 9             width: 240px;
10             overflow: hidden;
11             position: absolute;/*这里一定要设置*/
12             z-index: 500;
13             margin-top: 0;
14             margin-left: -200px; 
15             -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
16             -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/
17             -o-transition: .5s ease-in-out;
18             background-color: gray;
19         }
20             
21     </style>
22 </head>
23 
24 <body>
25 <script>
26 function sider()
27 {
28     var a = document.getElementById('tl');
29     
30     if (a.style['margin-left'] == '0px') {
31         a.style['margin-left'] = '-200px';
32     } else {
33         a.style['margin-left'] = '0px';
34     }
35     
36 }
37 </script>
38 
39 <div id="tl" onclick="sider();">
40     <div class="in">
41         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
42         <div class="in">
43             bbbbbb1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
44         </div>
45         <div class="in">
46             bbbbb2
47         </div>
48         <div class="in">
49             bbbbb3
50         </div>
51     </div>
52 </div>
53 <div>
54 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
55 </div>
56 
57 </body>
58 
59 </html>
html css 浮层 侧边栏

html css 浮层侧边栏
