使用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. 了解apache与tomcat的关系

    较多的了解过apache,但对tomcat却了解不多: 使用LAMP构建网站毕竟还是有很大局限,越来越多的网站将给予java构建了. http://developer.51cto.com/art/20 ...

  2. MYSQL中LIMIT用法_后台分页

    LIMIT是MySQL内置函数,其作用是用于限制查询结果的条数. 1)其语法格式如下: LIMIT[位置偏移量,]行数 其中,中括号里面的参数是可选参数,位置偏移量是指MySQL查询分析器要从哪一行开 ...

  3. PHPCMS快速建站系列之phpcms v9 模板标签说明整理

    [摘要]本文介绍phpcms v9中模板标签使用说明. {template "content","header"} 调用根目录下phpcms\template\ ...

  4. HDU 4193

    本题思路:用sum[]数组维护前缀和, 当然这里需要把原数组扩大为原来的两倍. 然后对于任意一个长度为n的区间 k.....k+n-1,如果有该区间内的最小值大于等于sum[k-1]那么该种情况就符合 ...

  5. Android实战：手把手实现“捧腹网”APP（三）-----UI实现，逻辑实现

    Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...

  6. JavaScript —— 给函数参数设置默认值

    一.ES5 function fn(x, y){ y = y || 20; console.log(x, y); } fn(); // undefined 20 fn(5); // 5 20 fn(5 ...

  7. 【JZOJ4878】【NOIP2016提高A组集训第10场11.8】时空传送

    题目描述 经过旷久的战争,ZMiG和707逐渐培养出了深厚的感♂情.他们逃到了另一块大陆上,决定远离世间的纷争,幸福地生活在一起.钟情707的neither_nor决心要把他们拆散,他要动用手中最大杀 ...

  8. 在Debug模式下，如何给.lib和.dll添加一个d标记（*d.lib,*d.dll)

    选中工程->右键->属性->配置属性->常规,可以看到项目默认值的配置类型有好几种类型,选择静态库类型生成lib文件,选择动态库类型生成dll文件,选择应用程序生成exe文件, ...

  9. 修改UISearchBar背景

    转载:http://blog.csdn.net/favormm/archive/2010/11/30/6045463.aspx UISearchBar是由两个subView组成的,一个是UISearc ...

  10. poj 1066 Treasure Hunt (Geometry + BFS)

    1066 -- Treasure Hunt 题意是,在一个金字塔中有一个宝藏,金字塔里面有很多的墙,要穿过墙壁才能进入到宝藏所在的地方.可是因为某些原因,只能在两个墙壁的交点连线的中点穿过墙壁.问最少 ...