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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
随机推荐
- 解决easyui-tab添加tab滚动条问题
//添加tab var addTab = function (title, url, icon) { if (!$('#mainTab').tabs('exists', title)) { $('#m ...
- ASP.NET中IsPostBack详解
一,IsPostBack介绍 Page.IsPostBack是一个标志:当前请求是否第一次打开.调用方法为:Page.IsPostBack或者IsPostBack或者this.IsPostBack或者 ...
- SpEL快速入门
Spring表达式语言(简称SpEL)是一种鱼JSP2 EL功能类似的变道时语言,它可以在运行时查询和操作对象图.与JSP 2的EL相比,SpEL功能更加强大,它甚至支持方法的调用和基本字符串模板. ...
- mschedule 简单linux进程管理（树莓派）
树莓派是神奇的机器,CPU和内存都少的可怜,但体积小功耗低,在上面搞些动搞些西其实也挺有意思,挺好玩的.装的是pidara,基本服务没有精简多少,先cat一下CPU和RAM. [able@raspi ...
- SCALA常规练习B
package com.hengheng.scala class Point(val x : Int, val y : Int) { val isOriginal : Boolean = { x == ...
- BZOJ 1025 [SCOI2009]游戏
1025: [SCOI2009]游戏 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 1533 Solved: 964[Submit][Status][ ...
- COJN 0575 800601滑雪
800601滑雪 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是 ...
- Silverlight 中 TreeView 的数据绑定
方法一:Silverlight使用XAML标记语言来编写,如果不使用XAML强大的绑定功能,实在是罪过.通过使用绑定,可以将UI与视图模型层分离,有利于系统的维护.作为Silverlight中比较有代 ...
- UVAlive3713 Astronauts（2-SAT）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=18511 [思路] 2-SAT. 设分得A或B类任务为1 C类任务为 ...
- java下载csv文件,中文标题
@RequestMapping(value = "/export.do") public void exportpushuserByareacode(HttpServletRequ ...