使用css3 的 animation 属性实现的点击滑出侧栏

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

        <meta name="author" content="TKB-nice" />

        <style>

        *{

                margin: 0;

                padding: 0;

        }

        body{

                height: 100%;

                position: relative;

                top: 0;

                left: 0;

        }

        html{

                height: 100%;

                background-color: #eee;

        }

        li{

                list-style: none;

        }

        .page{

                height: 100%;

                width: 100%;

                overflow: hidden;

        }

        .list li:last-child{

                margin-top: 5px;

                background-color: skyblue;

        }

        .text{

                height: 50%;

        }

        .close{

                height: 50%;

        }

        .side-bar{

                display: none;

                width: 100%;

                height: 100%;

                background-color: orange;

                position: absolute;

                top: 0;

                z-index: 99;

                }

                @keyframes mymove

                {

                from {left:100%;}

                to {left:50%;}

                }

                @-webkit-keyframes mymove

                {

                from {left:100%;}

                to {left:0;}

                }

                @keyframes myleave

                {

                from {left:50%;}

                to {left:100%;}

                }

                @-webkit-keyframes myleave

                {

                from {left:0;}

                to {left:100%;}

                }

    </style>

    </head>

<body>

        <div class="page">

                <div class="mian">

                        <ul class="list">

                                <li class="item1" id="item1">侧栏1</li>

                                <li class="item2" id="item2">侧栏2</li>

                        </ul>

                </div>

                <div class="side-bar" id="side-bar1">

                        <p class="text">我是侧栏111111111</p>

                        <p class="close" id="close1">点击关闭</p>

                </div>

                <div class="side-bar" id="side-bar2">

                        <p class="text">我是侧栏2222222</p>

                        <p class="close" id="close2">点击关闭</p>

                </div>

        </div>

    <script>

    document.getElementById('item1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar1').style.display = 'block';

    }

    document.getElementById('item2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'mymove 0.5s ease forwards';

        document.getElementById('side-bar2').style.display = 'block';

    }

    document.getElementById('close1').onclick=function(){

        document.getElementById('side-bar1').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar1').style.display = 'none';

        },500);

    }

    document.getElementById('close2').onclick=function(){

        document.getElementById('side-bar2').style.animation = 'myleave 0.5s ease forwards ';

        setTimeout(function(){

                document.getElementById('side-bar2').style.display = 'none';

        },500);

    }

    </script>

</body>

</html>

CSS3侧栏滑出简单实现的更多相关文章

  1. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  2. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  3. 一款效果精致的 jQuery 多层滑出菜单插件

    想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...

  4. Slideout.js – 触摸滑出式 Web App 导航菜单

    Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是 ...

  5. 玩转Firefox侧栏

    偶然看到煎蛋网的"玩转firefox侧栏",才注意到它. Firefox侧栏有啥不一样? Firefox可以在侧栏中打开网页. 于是,一系列玩法就出来了... 侧栏打开在线应用 G ...

  6. CSS3多栏布局

    CSS3多栏布局 分栏数: column-count:auto|num: auto为默认值,表示元素只有一列.num取值为大于0的整数 每栏宽度: column-width:auto|<leng ...

  7. 使用django开发博客过程记录3——博客侧栏实现

    说起这个侧栏真是苦恼我很长时间,一开始以为和之前的一样传递额外参数就可以了就像下面这样: class IndexView(ListView): template_name = 'apps/index. ...

  8. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  9. 一款jQuery打造的滚动条在底部滑出信息提示层

    一款jQuery打造的滚动条在底部滑出信息提示层, 当滚动鼠标滚轮,或者滚动条往下拉的时候,在右下角,弹出一个信息提示框. 有一点仿的是一个插件工具,就是网页中大家都长用到的友荐. 这款特效算一款简单 ...

随机推荐

  1. Directx11教程(53) D3D11管线(8) GS的调度执行

    原文:Directx11教程(53) D3D11管线(8) GS的调度执行        在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行 ...

  2. get请求url中带有中文参数出现乱码情况

    在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. get请求url中带有 ...

  3. Framework7 无限滚动

    html结构 <div class="page"> <div class="page-content infinite-scroll"> ...

  4. jsp项目中整个项目没有问题但是servlet报错

    项目没问题但是serverlet报错 项目右键 buildPath-->configure build path -->Myeclipse Library-->J2EE 1.3 Li ...

  5. UVALive - 4787 ICPC WF 2010 Tracking Bio-bots【dp】

    UVa 4787 WF题果然不一样,本来想暴力搜索,数据太大了,数组都开不了.看题解也不太懂,记录一下书上的题解,以后再看: 此题是给出N*M的格子,有些地方是墙,不可走.求所有不能只通过向上或者向右 ...

  6. WPF Binding ElementName方式无效的解决方法--x:Reference绑定

    原文:WPF Binding ElementName方式无效的解决方法--x:Reference绑定 需求: 背景:Grid的有一个TextBlock name:T1和一个ListBox,ListBo ...

  7. qt 中创建一个工作线程（例子）

    当一个事件需要很长的处理时间,就创建一个工作线程,防止主界面卡死. 1.新建一个QT的gui项目,里面包含main.cpp,mainwindow.h,mainwindow.cpp,mainwindow ...

  8. 10Redis键空间通知(keyspace notifications)

    Redis的键空间通知(keyspace notifications)功能是自2.8.0版本开始加入的,客户端可以通过订阅/发布(Pub/Sub)机制,接收那些以某种方式改变了Redis数据空间的事件 ...

  9. jmeter日期处理beanshell(2)

    import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.text.P ...

  10. saltStack_安装和使用

    服务端: yum install -y salt-master 客服端: yum install -y salt-minion 服务端启动: systemctl restartsalt-master ...