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

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

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

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

代码如下：

  1.  <!doctype html>
  2.  <html lang="zh">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  <title>jQuery弹出侧边栏滑动菜单 - 何问起</title><base target="_blank" />
  8.  <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/reset.css">
  9.  <link rel="stylesheet" href="http://hovertree.com/texiao/html5/19/css/style.css">
  10.  
  11.  <script language="javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>
  12.  <script language="javascript" src="js/main.js"></script>
  13.  <!--[if IE]>
  14.  <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>>
  15.  <![endif]-->
  16.  </head>
  17.  <body>
  18.  
  19.  <main>
  20.  <header class="header">
  21.  <h1>jQuery弹出侧边栏滑动菜单 <span>A Full-Screen Pushing Navigation</span></h1>
  22.  <p>A full page menu, that replaces the current content by pushing it off the screen.</p>
  23.  <p><a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/manpingmenu.htm">原文</a>
  24.  </p>
  25.  </header>
  26.  </main>
  27.  
  28.  <a href="#cd-nav" class="cd-nav-trigger">
  29.  Menu
  30.  <span class="cd-nav-icon"></span>
  31.  <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
  32.  <circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
  33.  </svg>
  34.  </a>
  35.  
  36.  <div id="cd-nav" class="cd-nav">
  37.  <div class="cd-navigation-wrapper">
  38.  <div class="cd-half-block">
  39.  <h2>导航菜单</h2>
  40.  
  41.  <nav>
  42.  <ul class="cd-primary-nav">
  43.  <li><a href="http://hovertree.com/h/bjaf/menulayer.htm" class="selected">我的</a></li>
  44.  <li><a href="http://hovertree.com/h/bjaf/easysector.htm">内容</a></li>
  45.  <li><a href="http://hovertree.com/h/bjaf/jqguding.htm">消息</a></li>
  46.  <li><a href="http://hovertree.com/h/bjaf/csshouse.htm">模板</a></li>
  47.  <li><a href="http://hovertree.com/hvtart/bjae/ipblia78.htm">设置</a></li>
  48.  <li><a href="http://hovertree.com/h/bjaf/tcpip_addressing.htm">关于</a></li>
  49.  </ul>
  50.  </nav>
  51.  </div>
  52.  
  53.  <div class="cd-half-block">
  54.  <address>
  55.  <ul class="cd-contact-info">
  56.  <li><a href="mailto:hovertree@hovertree.com">hovertree@hovertree.com</a></li>
  57.  <li>021-00000000</li>
  58.  <li>
  59.  <span>何问起</span>
  60.  <span>hovertree.com</span>
  61.  <span>keleyi菜单</span>
  62.  </li>
  63.  </ul>
  64.  </address>
  65.  </div>
  66.  </div>
  67.  </div>
  68.  </body>
  69.  </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. NEsper Nuget包

    Esper是专门进行复杂事件处理(CEP)的流处理平台,Java版本为Esper,.Net版本为NEsper.Esper & NEsper可以方便开发者快速开发部署处理大容量消息和事件的应用系 ...

  2. spring官网下载

    1.第一步:打开官网:http://projects.spring.io/ 2.第二步:点击“SPRING FRAMEWORK”图片 3.第三步:点击“小猫”图标 4.第四步:拉到页面中部的位置,找到 ...

  3. 支持向量机（SVM）复习总结

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 其基本模型定义为特征空间上的间隔最大的线性分类器,即支持向量机的学习策略 ...

  4. Java集合类的总结

    Java语言的java.until包中提供了一些集合类,这些集合类又被称为容器.说到集合就会想到数组,集合类与数组的不同之处是,数组的长度是固定的,集合的长度是可变的:数组用来存放基本数据类型,集合从 ...

  5. Python virtualenv with Sublime Text 3

    背景介绍 最近喜欢上了Sublime编辑器,刚开始学着用.不过对我这个python狂人来讲,首要问题是需要sublime支持python virtualenv包的导入.所以我就找了google最后找到 ...

  6. VS2012 VS2015 的项目配置模板及其目录

    建立的项目多了的时候 , 就希望能自己配置好一个项目模板,以后建立的项目自动使用这个模板就省事了,不用每次都要改, 每个项目都要改了! 经不懈努力, 终于 发现了 vs2015,vs2012 (我只用 ...

  7. $stateParams

  8. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  9. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  10. PHP中AJAX的使用（完整实例【大牛可飘过】）

    有一段时间不写关于AJAX的东西了,最近和同学参加个比赛,要做一个类似博客的东西,用到了AJAX的东西,在写东西之前为了再熟悉一下AJAX,自己做了个关于AJAX的小事例与大家分享一下. AJAX在j ...