下载地址

这是大体上的原理，当然案例比这个多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title><style>

body{

    overflow:hidden;}

nav.menu {

    position: fixed;

    z-index: 20;

    background-color: #67b5d1;

    overflow: hidden;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    -ms-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}nav.menu ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

nav.menu a {

    font-weight: 300;

    color: #fff;

}nav.slide-menu-left,

nav.slide-menu-right,

nav.push-menu-left,

nav.push-menu-right {

    top: 0;

    width: 300px;

    height: 100%;

}nav.slide-menu-left,

nav.push-menu-left {

    left: -300px

}body.sml-open nav.slide-menu-left,

body.pml-open nav.push-menu-left {

    left: 0

}.mask {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 15;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

}

</style>

</head>

<body><nav class="menu slide-menu-left">

    <ul>

        <li><button class="close-menu">&larr; 关闭</button></li>

        <li><a href="#">Broccoli</a></li>

        <li><a href="#">Tomato</a></li>

        <li><a href="#">Cucumber</a></li>

        <li><a href="#">Kale</a></li>

        <li><a href="#">Celery</a></li>

    </ul>

</nav><!-- /slide menu left --><div id="wrapper">

    <div class="info-bar">

        <div class="container">

            <a href="http://www.callmenick.com/?p=458" class="icon fa fa-home" data-title="Back To Tutorial"></a>

            <a href="http://callmenick.com/tutorial-demos/image-caption-reveal-on-hover/" class="icon fa fa-arrow-left" data-title="Pevious Demo"></a>

            <!-- <a href="" class="icon fa fa-arrow-right" data-title="Next Demo"></a> -->

            <a href="http://callmenick.com/tutorial-demos/slide-push-menus/slide-push-menus.zip" class="icon fa fa-download" data-title="Download Source"></a>

            <a href="http://www.callmenick.com/tutorials" class="icon fa fa-folder-open" data-title="Tutorial Archives"></a>

        </div>

    </div><!-- /.info-bar -->

    <header>

        <div class="branding">

            <div class="container clearfix">

                <div class="logo">

                    <a href="http://www.callmenick.com">

                        <img src="img/logo.png" alt="Call Me Nick - Tutorials, Resources, &amp; Articles for Web Design &amp; Web Development" />

                    </a>

                </div>

                <div class="social">

                    <a href="https://www.facebook.com/callmenick1" target="_blank" class="fb">facebook</a>

                    <a href="https://twitter.com/nicksalloum_" target="_blank" class="twitter">twitter</a>

                    <a href="https://plus.google.com/115555859876227750152/" target="_blank" class="googleplus">google plus</a>

                    <a href="http://feeds.feedburner.com/callmenick_" target="_blank" class="rss">rss</a>

                    <a href="http://www.callmenick.com/subscribe/" class="email">email</a>

                </div>

            </div>

        </div><!-- /.branding -->

        <div class="site-title">

            <div class="container">

                <h1>CSS3过渡效果实现的各种动画效果菜单</h1>

            </div>

        </div>

    </header>

    <div id="main">

        <div class="container">

            <div class="buttons">

                <button class="nav-toggler toggle-slide-left">左边滑入菜单</button>

                <button class="nav-toggler toggle-slide-right">右边滑入菜单</button>

                <button class="nav-toggler toggle-slide-top">上边滑入菜单</button>

                <button class="nav-toggler toggle-slide-bottom">下边滑入菜单</button><br>

                <button class="nav-toggler toggle-push-left">左边推拉式菜单</button>

                <button class="nav-toggler toggle-push-right">右边推拉式菜单</button>

                <button class="nav-toggler toggle-push-top">上边推拉式菜单</button>

                <button class="nav-toggler toggle-push-bottom">下边推拉式菜单</button>

            </div><!-- /buttons -->

            <section class="content">

                <h1>Vegetables</h1>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

                <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>

            </section>

        </div>

    </div><!-- #main -->

    <footer>

        <div class="container">

            <div class="clearfix">

                <aside>

                    <ul>

                        <li><a href="http://www.callmenick.com/">Welcome</a></li>

                        <li><a href="http://www.callmenick.com/category/tutorials">Tutorials</a></li>

                        <li><a href="http://www.callmenick.com/category/snippets">Snippets</a></li>

                        <li><a href="http://www.callmenick.com/category/articles">Articles</a></li>

                        <li><a href="http://www.callmenick.com/category/resources">Resources</a></li>

                    </ul>

                </aside>

                <aside>

                    <ul>

                        <li><a href="http://www.callmenick.com/about">About</a></li>

                        <li><a href="http://www.callmenick.com/contact">Contact</a></li>

                        <li><a href="http://www.callmenick.com/subscribe">Subscribe</a></li>

                    </ul>

                </aside>

                <aside class="logo">

                    <a href="http://www.callmenick.com/">

                        <img src="img/logo.png" alt="Tutorials, Snippets, Resources, and Articles for Web Design and Web Development">

                    </a>

                </aside>

            </div>

            <div class="copyright">

                <span>

                    &copy; 2014, Nick Salloum<br>

                    <a href="http://callmenick.com" target="_blank">callmenick.com</a>

                </span>

            </div>

        </div>

    </footer><!-- /footer -->

</div><script>

(

function (window)

{

var mask = document.createElement("div");mask.className = "mask";

var cq=document.querySelector(".toggle-slide-left");

cq.addEventListener("click",function(){

document.body.className="sml-open";document.body.appendChild(mask);})

var cd=document.querySelector(".close-menu");

cd.addEventListener("click",function(){

document.body.className="";

document.body.removeChild(mask);})

mask.addEventListener( "click", function(){

        document.body.className="";document.body.removeChild(mask);

    })}

)( window );

</script>

</body>

</html>

CSS3过渡效果实现菜单划出效果的更多相关文章

  1. Android 仿 新闻阅读器 菜单弹出效果（附源码DEMO）

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

  2. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  3. Android UI开发第二十七篇——实现左右划出菜单

    年前就想写左右滑动菜单,苦于没有时间,一直拖到现在,这篇代码实现参考了网上流行的SlidingMenu,使用的FrameLayout布局,不是扩展的HorizontalScrollView. 程序中自 ...

  4. 奇妙的CSS3—导航栏下划线跟随效果

    先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...

  5. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  7. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  8. 纯CSS3向右循环闪过效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

随机推荐

  1. c++内存管理错误记录

    extern "C" _CRTIMP int __cdecl _CrtIsValidHeapPointer( const void * pUserData ){ if (!pUse ...

  2. iOS开发网络篇-JSON文件的解析

    一.什么是JSON数据 1.JSON的简单介绍 JSON:是一种轻量级的传输数据的格式,用于数据的交互 JSON是javascript语言的一个子集.javascript是个脚本语言(不需要编译),用 ...

  3. SAR-303 xml validator验证框架

    // 配置文件详解 <mvc:annotation-driven validator="validator" /> <bean id="validato ...

  4. wxpython线程安全的方法

    wx中实现了3个线程安全的函数.如果在线程中,直接访问并更新主线程的UI,会遇到问题,有时候阻塞UI或者更新不起作用,有时严重的话会引起python崩溃. 三个安全线程如下: wx.PostEvent ...

  5. Hibernate的查询语言之HQL(一)——快速入门

    Hibernate提供异常强大的查询体系,使用Hibernat有多种查询方式可以选择:即可以使用Hibernate的HQL查询,也可以使用条件查询,甚至可以使用原生的SQL查询语句.不仅如此, Hib ...

  6. mschedule 简单linux进程管理（树莓派）

    树莓派是神奇的机器,CPU和内存都少的可怜,但体积小功耗低,在上面搞些动搞些西其实也挺有意思,挺好玩的.装的是pidara,基本服务没有精简多少,先cat一下CPU和RAM. [able@raspi ...

  7. 读取pdf文件 .选择了itextsharp 库

    此库还是比较成熟.看博客园很多文章都介绍了此库 用法 如果项目用到读取pdf.  我这只是提供个思路.或者提供个方法.用itextsharp 能方便实现 StringBuilder text = ne ...

  8. 如何在一台机器上安装两个MYSQL数据库

    1.正常安装第一个mysql(安装步骤省略) 2.在控制面板里停止第一个mysql服务 3.将C:\Program Files\MySQL目录下的所有目录和文件copy到另外一个路径,我这里是copy ...

  9. CentOS 7 ARM 版发布：支持树莓派2/香蕉派/CubieTruck

    CentOS 7 ARM 版发布:支持树莓派2/香蕉派/CubieTruck 来自CentOS团队的Karanbir Singh很高兴地宣布,面向ARM硬件架构的CentOS 7 Linux已经正式发 ...

  10. GruntJs安装及使用入门（自定义grunt任务,合并压缩js、css）

    一.Grunt.js简介(实现自动化) 1)简要说明: 1.GruntJs是基于node的javascript命令行工具,可以自动化构建.测试.生成文档的项目管理工具: 2.使用GruntJs可以自动 ...