效果预览：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. 剑指Offer面试题：10.数值的整数次方

    一.题目:数值的整数次方 题目:实现函数double Power(doublebase, int exponent),求base的exponent次方.不得使用库函数,同时不需要考虑大数问题. 在.N ...

  2. 再看Ajax

    再回顾Ajax相关的内容,再次梳理学习还是很有必要的,尤其是实际的开发中,ajax更是必不可少,仔细学习以便避免不必要的错误. 文章导读: --1.使用XMLHttpRequest---------- ...

  3. [译]Asp.net MVC 之 Contorllers（二）

    URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...

  4. PHP fsockopen 异步调用接口在nginx上偶尔实效的情况

    private function fsock_asy_do($get){ $fp = fsockopen("ssl://www.xxx.com", 443, $errno, $er ...

  5. iOS—Xcode 7真机测试

    Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk im ...

  6. WPF入门教程系列十七——WPF中的数据绑定(三)

    四. XML数据绑定 这次我们来学习新的绑定知识,XML数据绑定.XmlDataProvider 用来绑定 XML 数据,该XML数据可以是嵌入.Xmal文件的 XmlDataProvider 标记中 ...

  7. VB中 '&' 和 '+' 号的区别

    释义 &(Ampersand)是英语单字and之代表符号,亦可用作中文中的“和”.“与”之代表符号.这个符号源于拉丁文的et的连写. 可读做 ampersand,即 "and per ...

  8. iOS中怎么存储照片到自定义相册

    在市场上主流App中,大多数App都具有存储图片到自己App的相册中.苹果提供的方法只能存储图片到系统相册,下面讲一下怎么实现: 实现思路:  1.对系统相册进行操作的前提必须导入#import &l ...

  9. 让IE系列支持HTML5的html5shiv.js和respond.min.js

    HTML5越来越成为主流,被广大搜索引擎所使用,但IE对HTML5的支持却常被人唾弃. 解决方案有两种: 1.为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面, ...

  10. Jser 设计模式系列之面向对象 - 接口封装与继承

    GOF在<设计模式>中说到:面向接口编程,而非面向实现编程 鉴于此,这个概念可见一斑! JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一 ...