效果预览：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. mysql 内连接、左连接、右连接

    记录备忘下,初始数据如下: DROP TABLE IF EXISTS t_demo_product; CREATE TABLE IF NOT EXISTS t_demo_product( proid ...

  2. 从Facebook跑来阿里的赵海平大叔，你要干啥？

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  3. Optimistic Concurrency VS. Pessimistic Concurrency Control

    原创地址:http://www.cnblogs.com/jfzhu/p/4009918.html 转载请注明出处   (一)为什么需要并发控制机制 并发控制机制是为了防止多个用户同时更改同一条数据,也 ...

  4. Spark使用实例

    1.介绍 Spark是基于Hadoop的大数据处理框架,相比较MapReduce,Spark对数据的处理是在本地内存中进行,中间数据不需要落地,因此速度有很大的提升.而MapReduce在map阶段和 ...

  5. 通过扩展让ASP.NET Web API支持W3C的CORS规范

    让ASP.NET Web API支持JSONP和W3C的CORS规范是解决"跨域资源共享"的两种途径,在<通过扩展让ASP.NET Web API支持JSONP>中我们 ...

  6. Windows内网渗透提权的几个实用命令

    1.获取操作系统信息 查看所有环境变量:set 识别系统体系结构:echo %PROCESSOR_ARCHITECTURE%  AMD64 识别操作系统名称及版本:systeminfo 查看某特定用户 ...

  7. KnockoutJS 3.X API 第六章 组件(2) 组件注册

    要使Knockout能够加载和实例化组件,必须使用ko.components.register注册它们,从而提供如此处所述的配置. 注意:作为替代,可以实现一个自定义组件加载器(自定义加载器下一节介绍 ...

  8. 【深入浅出Linux网络编程】 “基础 -- 事件触发机制”

    回顾一下“"开篇 -- 知其然,知其所以然"”中的两段代码,第一段虽然只使用1个线程但却也只能处理一个socket,第二段虽然能处理成百上千个socket但却需要创建同等数量的线程 ...

  9. 让setTimeout支持链式

    修改很简单,通过参数判断,然后返回下promise对象 (function() { var timeout = setTimeout; window.setTimeout = function(fn, ...

  10. MVC4做网站后台:栏目管理1、添加栏目

    把栏目添加删除跟前台混在一起结构清晰,现在有了后台管理的区域就把后台管理相关的代码分开. 要实现功能: 1.添加栏目 2.删除栏目 3.修改栏目信息 -- 一.开始 1.添加 接口InterfaceC ...