当前位置:吴康利的博客 > HTML >

html css 浮层 侧边栏

!DOCTYPE HTML html lang=en head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title无标题文档/title style #tl { width: 240px; overflow: hidden; position: absolute;/*这里一定要设置*/ z-index: 500; margin-top: 0;

admin
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
 
        #tl {
            width: 240px;
            overflow: hidden;
            position: absolute;/*这里一定要设置*/
            z-index: 500;
            margin-top: 0;
            margin-left: -200px;
            -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
            -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/
            -o-transition: .5s ease-in-out;
            background-color: gray;
        }
 
    </style>
</head>
 
<body>
<script>
function sider()
{
    var a = document.getElementById('tl');
 
    if (a.style['margin-left'] == '0px') {
        a.style['margin-left'] = '-200px';
    } else {
        a.style['margin-left'] = '0px';
    }
 
}
</script>
 
<div id="tl" onclick="sider();">
    <div class="in">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        <div class="in">
            bbbbbb1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
        <div class="in">
            bbbbb2
        </div>
        <div class="in">
            bbbbb3
        </div>
    </div>
</div>
<div>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
 
</body>
 
</html>


返回顶部