html css 浮層側邊欄

時間 2019-11-06

標籤 html css 側邊欄欄目 HTML 简体版

原文原文鏈接

2019-7-1 16:02:25 星期一css

實現的效果是點擊, 而後從左側滑出, 再點擊, 就滑進去html

 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>