效果预览：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. Kosaraju 算法检测有向图的强连通性

    给定一个有向图 G = (V, E) ,对于任意一对顶点 u 和 v,有 u --> v 和 v --> u,亦即,顶点 u 和 v 是互相可达的,则说明该图 G 是强连通的(Strong ...

  2. 细说 Data URI

    Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...

  3. MapReduce剖析笔记之一：从WordCount理解MapReduce的几个阶段

    WordCount是一个入门的MapReduce程序(从src\examples\org\apache\hadoop\examples粘贴过来的): package org.apache.hadoop ...

  4. 由乱序播放说开了去-数组的打乱算法Fisher–Yates Shuffle

    之前用HTML5的Audio API写了个音乐频谱效果,再之后又加了个播放列表就成了个简单的播放器,其中弄了个功能是'Shuffle'也就是一般播放器都有的列表打乱功能,或者理解为随机播放. 但我觉得 ...

  5. Docker实践：安装wordpress

    本文将示例如何使用Docker来安装wordpress.使用三种方法: 1.基于官方的wordpress镜像使用docker run实现: 2.基于官方的wordpress镜像使用fig命令编排工具实 ...

  6. SSISDB2：使用TSQL执行Package

    在SSISDB中,能够使用TSQL脚本执行Package:每执行一次Package,SSIS都会创建一个Operation 和一个执行实例(Execution Instance),每个Executio ...

  7. Sql Server系列：多表连接查询

    连接查询是关系数据中最主要的查询,包括内连接.外连接等.通过连接运算符可以实现多个表查询.内连接查询操作列出与连接条件匹配的数据行,它使用比较运算符比较被连接列的列值.SQL Server中的内连接有 ...

  8. Topology and Geometry in OpenCascade-Adapters

    Topology and Geometry in OpenCascade-Adapters eryar@163.com 摘要Abstract:本文简要介绍了适配器模式(adapter pattern) ...

  9. 【转】C#语言之“string格式的日期时间字符串转为DateTime类型”的方法

    方法一:Convert.ToDateTime(string) string格式有要求,必须是yyyy-MM-dd hh:mm:ss ================================== ...

  10. AngularJS之初级Route【一】（六）

    前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...