web-侧边栏

来源：互联网发布：免费手机qq群发软件编辑：程序博客网时间：2024/06/04 20:38

简单实现侧边栏弹如弹出效果

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>侧边栏</title>    <style type="text/css">        body{            margin: 0;            padding: 0;        }        header{            height: 52px;            width: 100%;            background-color: #4f4f4f;            position: fixed;/*生成绝对定位的元素，相对于浏览器窗口进行定位。*/        }        nav{            top: 0;            position: fixed;            width: 100%;            height: 100%;            background-color: black;            filter: alpha(opacity=10);/*IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。*/            opacity: 0.1;/*IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。*/            display: none;        }        .menu{            width: 150px;            height: 100%;            background-color: #4f4f4f;            position: fixed;            transform: translateX(-150px);        }    </style>    <script type="text/javascript">        window.onload = function(){            var oHeader = document.getElementById('_header');            var oNav = document.getElementById('_nav');            var oMune = document.getElementById('_mune');            oHeader.onclick = function(){                oNav.style.display = "block";                oMune.style.transform = "translateX(0px)";                oMune.style.transition = "transform 0.5s linear";            }            //点击透明画布，当前窗口画布消失，菜单消失动画。            oNav.onclick = function(){                oNav.style.display = "none";                oMune.style.transform = "translateX(-150px)";                oMune.style.transition = "transform 0.5s linear";            }        }    </script></head><body>    <header id="_header"></header>    <nav id="_nav"></nav>    <div id="_mune" class="menu"></div></body></html>

没有做浏览器兼容这一块，本人测试用的是Firefox。

阅读全文

0 0