使用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. kibana一直弹出来报错?

    1,这个我们需要授权 2.授予安全

  2. scala2.11读取文件

    1.读取行 要读取文件的所有行,可以调用scala.io.Source对象的getLines方法: import scala.io.Source val source = Source.fromFil ...

  3. 错误信息：FATAL: No bootable medium found! System halted.

    一.解决方法 先上1张图,显示的错误信息 再上2张图,幸好在之前安装了XP系统,不然还真不好解决.从图中可以看出WIN-XP和Linux系统安装好之后的差异,Linux的的存储信息上显示“第二通道没有 ...

  4. 解决eclipse不会自动弹出Console控制台的问题

    有时候Eclipse启动,控制台console不会自动跳出来,需要手工点击该选项卡才行, 解决方案: windows  ->   preferences   ->  run/debug   ...

  5. Gym - 101962K _ Rei do Cangaço

    题意:给予n个房间,每个房间可以的到x个金币(x可能为负数),可以进行两种操作: 右移3i个房间,并且打开除最后一个的所有房间,如在1号房间,第一次移动可以移动到4号,并且打开1,2,3三个房间. 只 ...

  6. HDU_1061:Rightmost Digit

    Problem Description Given a positive integer N, you should output the most right digit of N^N.   Inp ...

  7. TreeSet的运用之使用内部比较器实现自定义有序（重要）

    Student.java package com.sxt.set3; /* * TreeSet:有序 * implements Comparable<Student> * 如果用内部比较器 ...

  8. C++中用stringstream类进行数据类型的转换

    我们在进行C++编程过程中,经常需要进行数据类型的转换. stringstream 类的作用就是进行数据类型转换.要想在程序中使用 stringstream 类,我们需要在源程序文件中包含头文件inc ...

  9. oracle函数 TRANSLATE(c1,c2,c3)

    [功能]将字符表达式值中,指定字符替换为新字符 [说明]多字节符(汉字.全角符等),按1个字符计算 [参数] c1   希望被替换的字符或变量 c2   查询原始的字符集 c3   替换新的字符集,将 ...

  10. selenium webdriver学习（十）------------如何把一个元素拖放到另一个元素里面(转)

    selenium webdriver学习(十)------------如何把一个元素拖放到另一个元素里面 博客分类: Selenium-webdriver 元素拖放drag and drop  Q群里 ...