效果预览：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. iOS开发系列—Objective-C之基础概览

    概览 前面我们已经用了几章内容进行C语言介绍,当然要通过几篇文章完整的介绍C语言的知识是不太现实的,例如C语言的文件操作.内存申请等我们都没有重点介绍,当然核心知识点基本都已经提到了,后面有时间我们会 ...

  2. 高灵活度，高适用性，高性能，轻量级的 ORM 实现

    ORM(Object-Relational Mapping 对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,目的是提供易于理解的模型化数据的方法. ORM虽然有诸多好处,但是在实 ...

  3. 每天一个linux命令（18）：locate 命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  4. 2013 duilib入门简明教程 -- 复杂控件介绍 (13)

      首先将本节要介绍的控件全部拖到界面上,并调整好位置,如图:           然后将Name属性改成其他名字,          不能是[控件名+UI+数字]这种,因为这是DuiDesigner ...

  5. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  6. Constraint2：constraint

    一,Constraint 是表定义的一部分,用于实现数据完整性. Data Integrity 由三种类型的constraint实现: Entity Integrity:数据是唯一的.约束: prim ...

  7. 无法在“EntityFramework”已存在的情况下创建影像复制该文件的解决方案

    问题产生的原因:你项目正在生成中你就打开浏览器预览了,导致这个问题解决方案:右击重新生成项目,等生成后再打开 “/”应用程序中的服务器错误. 无法在“EntityFramework”已存在的情况下创建 ...

  8. SQL Server 链接服务器的安全

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 安全设置(Security Settings) 实现效果:用户A能看见能使用,B用户不能看见这 ...

  9. C#设计模式系列：命令模式（Command）

    1.命令模式简介 1.1>.定义 命令模式的目的是解除命令发出者和接收者之间的紧密耦合关系,使二者相对独立,有利于程序的并行开发和代码的维护.命令模式的核心思想是将请求封装为一个对象,将其作为命 ...

  10. Minor【 PHP框架】2.第一个应用与请求的生命周期

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...