效果预览：http://hovertree.com/texiao/html5/19/

本效果适用于移动设备，可以使用手机等浏览效果。

源码下载：http://hovertree.com/h/bjaf/mwvn0mxi.htm

本实例用到了toggleClass方法，请参考:http://hovertree.com/h/bjaf/attributes_toggleclass.htm

代码如下：

 <!doctype html>

 <html lang="zh">

 <head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>jQuery弹出侧边栏滑动菜单 - 何问起</title><base target="_blank" />

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/reset.css">

 <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/style.css">

 <script language="javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>

 <script language="javascript" src="js/main.js"></script>

 <!--[if IE]>

 <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>>

 <![endif]-->

 </head>

 <body>

 <main>

 <header class="header">

 <h1>jQuery弹出侧边栏滑动菜单 <span>A Full-Screen Pushing Navigation</span></h1>

 <p>A full page menu, that replaces the current content by pushing it off the screen.</p>

 <p><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/manpingmenu.htm">原文</a>

 </p>

 </header>

 </main>

 <a href="#cd-nav" class="cd-nav-trigger">

 Menu

 <span class="cd-nav-icon"></span>

 <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">

 <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>

 </svg>

 </a>

 <div id="cd-nav" class="cd-nav">

 <div class="cd-navigation-wrapper">

 <div class="cd-half-block">

 <h2>导航菜单</h2>

 <nav>

 <ul class="cd-primary-nav">

 <li><a href="http://hovertree.com/h/bjaf/menulayer.htm" class="selected">我的</a></li>

 <li><a href="http://hovertree.com/h/bjaf/easysector.htm">内容</a></li>

 <li><a href="http://hovertree.com/h/bjaf/jqguding.htm">消息</a></li>

 <li><a href="http://hovertree.com/h/bjaf/csshouse.htm">模板</a></li>

 <li><a href="http://hovertree.com/hvtart/bjae/ipblia78.htm">设置</a></li>

 <li><a href="http://hovertree.com/h/bjaf/tcpip_addressing.htm">关于</a></li>

 </ul>

 </nav>

 </div>

 <div class="cd-half-block">

 <address>

 <ul class="cd-contact-info">

 <li><a href="mailto:hovertree@hovertree.com">hovertree@hovertree.com</a></li>

 <li>021-00000000</li>

 <li>

 <span>何问起</span>

 <span>hovertree.com</span>

 <span>keleyi菜单</span>

 </li>

 </ul>

 </address>

 </div>

 </div>

 </div>

 </body>

 </html>

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

html5手机端的点击弹出侧边滑动菜单代码的更多相关文章

  1. jQuery之点击弹出图标环形菜单

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

  2. PopupWindow-----点击弹出 PopupWindow 初始化菜单

    /** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new Po ...

  3. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  4. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  6. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  7. jquery---点击弹出层

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

  8. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  9. js点击弹出div层

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

随机推荐

  1. 减小ipa体积之删除frameWork中无用mach-O文件

    最近项目末期, 我们团队为了ipa的大小使用不少的体积减小的方法, 除了一些常规的方法之外, 我分享一下自己研究出来的新思路. 首先我们来简单的介绍一下mach-O. 什么是mach-O? Mach- ...

  2. [Voice communications] 声道的转换

    本系列文章主要是介绍 Web Audio API 的相关知识,以及 web语音通信 中会遇到的一些问题,阐述可能存在错误,还请多多斧正! 很多粤语剧都提供了两个声道,一个左声道为粤语,一个右声道有国语 ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (29) ------ 第五章 加载实体和导航属性之过滤预先加载的实体集合和修改外键关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-13  过滤预先加载的实体集合 问题 你想过滤预先加载的实体集合,另外,你想使用 ...

  4. Hystrix框架2--超时

    timeout 在调用第三方服务时有些情况需要对服务响应时间进行把控,当超时的情况下进行fallback的处理 下面来看下超时的案例 public class CommandTimeout exten ...

  5. Atitit 深入理解耦合Coupling的原理与attilax总结

    Atitit 深入理解耦合Coupling的原理与attilax总结     耦合是指两个或两个以上的电路元件或电网络等的输入与输出之间存在紧密配合与相互影响,并通过相互作用从一侧向另一侧传输能量的现 ...

  6. PHP面向对象笔记

    一.构造函数.析构函数(1)构造函数:__construct()说明:对象被实例化时调用,可带参数例: $obj = new A($a,$b); (2)析构函数:_destruct()说明:页面执行结 ...

  7. Sublime Text执行js

    Sublime Text执行js 在Build Sytem添加以下内容: { "cmd": ["node", "$file"], " ...

  8. WPF textblock加入超链接

    <TextBlock Grid.Row=" Margin="75,0,0,0"> <Hyperlink Name="BlogHl" ...

  9. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  10. 【tomcat】不同域名解析到同一tomcat不同项目上

    问题: 1. 有多个域名,想输入的每个域名只能访问其中的一个项目 2. 这些项目都部署在同一个tomcat上的 解决步骤:      1.首先把所有域名都解析到这台服务器上,解析时只能填写ip地址,不 ...