CSS3过渡效果实现菜单划出效果
这是大体上的原理，当然案例比这个多
<!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">← 关闭</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, & Articles for Web Design & 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>
© 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过渡效果实现菜单划出效果的更多相关文章
- Android 仿 新闻阅读器 菜单弹出效果（附源码DEMO）
这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- Android UI开发第二十七篇——实现左右划出菜单
年前就想写左右滑动菜单,苦于没有时间,一直拖到现在,这篇代码实现参考了网上流行的SlidingMenu,使用的FrameLayout布局,不是扩展的HorizontalScrollView. 程序中自 ...
- 奇妙的CSS3—导航栏下划线跟随效果
先来看一下效果: 1.基本效果就是这样的 ,鼠标悬停,下划线划入.鼠标离开,下划线划出 2.下划线的划入是有方向的,从左侧划入悬停,下划线由左向右伸长.从右侧划入,下划线由又往左伸长 实现思路 1.导 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...
- 纯CSS3向右循环闪过效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
随机推荐
- JS之路——浏览器window对象
window对象的方法 window.alert(msg) window.close() window.print() var a = window.setIntval(function,毫秒) // ...
- c构造函数
构造函数 任何一们面向对象语言里都会涉及构造函数这一概念,只是实现的方式各有差异.需要这main函数之前执行一段代码是非常容易的事情,只需要声明一对象的全局变量,在构造函数可以为所欲为干你想干的事 ...
- SPRING-MVC访问静态文件,如jpg,js,css
如何你的DispatcherServlet拦截 *.do这样的URL,就不存在访问不到静态资源的问题.如果你的DispatcherServlet拦截“/”,拦截了所有的请求,同时对*.js,*.jpg ...
- 使用Windows 系统性能监控来报警磁盘空间不足
http://blog.csdn.net/jiangxinyu/article/details/4370288
- HDU3549 Flow Problem(网络流增广路算法)
题目链接. 分析: 网络流增广路算法模板题.http://www.cnblogs.com/tanhehe/p/3234248.html AC代码: #include <iostream> ...
- Ubuntu 14.04 升级后 VPN 无法连接的问题
如果不知道怎么配置 VPN Server(IPSEC + L2TP),可以看这篇文章(英文). 问题表现: 将 Ubuntu 12.04 通过自动更新 —— do-release-upgrade —— ...
- Java---常用基础面试知识点
综合网上的一点资源,给大家整理了一些Java常用的基础面试知识点,希望能帮助到刚开始学习或正在学习的学员. 1.抽象 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方 ...
- Android Memory Leak
线程也是造成内存泄露的一个重要的源头.线程产生内存泄露的主要原因在于线程生命周期的不可控.1.看一下下面是否存在问题 public class ThreadActivity extends Activ ...
- 查看XBox360的系统版本信息
XBox360的系统版本信息在系统设置界面就能看到: Step1:按手柄中央的"西瓜键",进入系统设置界面 Step2:在系统设置界面选择"主机设定" Step ...
- [Java] 垃圾回收 ( Garbage Collection ) 的步骤演示
关于 JVM 垃圾回收机制的基础内容,可参考上一篇博客 垃圾回收机制 ( Garbage Collection ) 简介 上一篇博客,介绍了堆的内存被分为三个部分:年轻代.老年代.永生代.这篇博文将演 ...