记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热，很多app仿照该效果进行开发，在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。

首先新建一个html文件，引入jqMobi的框架，如下：

接下来再添加一个panel如下

接下来我们来添加一个<nav>在panel同级标签下


接下来我们再来添加一个panel，并添加header和footer

我们会发现此时两个panel对应的side menu是同一个，下面我们为各个panel分别指定一个side menu

我们会发现side menu是属于panel的，每个panel都可以给自己指定一个side menu，也可以共用一个side menu

现在最大的问题是怎么使上面的side menu有左右滑动效果，引入如下js便可实现


第四下载 https://www.dddzd.com 是一个专业的软件下载站点，软件类型广泛，需要下软件的朋友就去第四下载哦！

第四下载手机站：https://m.dddzd.com

HTML5移动开发之路（1）——jqMobi中Side Menu实现（类似人人网）的更多相关文章

  1. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  2. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  3. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  4. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  5. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  6. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  7. 小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似人人网）

    记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果. 首先新建 ...

  8. 小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几种方式

    一.定义全局的header 这个header是所有panel默认的header,需要在<div id="afui">内部,也就是和<div id="co ...

  9. 小强的HTML5移动开发之路（51）——jquerymobile中改善页面访问速度

    在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿.使用多页模版,可以改善页面跳转之间的 ...

随机推荐

  1. Logback配置文件这么写，还愁不会整理日志？

    摘要: 1.日志输出到文件并根据LEVEL级别将日志分类保存到不同文件 2.通过异步输出日志减少磁盘IO提高性能 3.异步输出日志的原理 1.配置文件logback-spring.xml Spring ...

  2. matplotlib常用基础知识

    linestyle(ls)线型参数表 常用color(c)参数表 marker标记符号表 plt常用方法表 plt.legend(loc=0)用于显示图例,图例的位置参数loc matplotlib常 ...

  3. Python os.lchown() 方法

    概述 os.lchown() 方法用于更改文件所有者,类似 chown,但是不追踪链接.高佣联盟 www.cgewang.com 只支持在 Unix 下使用. 语法 lchown()方法语法格式如下: ...

  4. PHP abs() 函数

    实例 返回不同数的绝对值: <?phpecho(abs(6.7) . "<br>");echo(abs(-6.7) . "<br>" ...

  5. Skill 脚本演示 ycSchReGrid.il

    https://www.cnblogs.com/yeungchie/ ycSchReGrid.il 修复 schematic 或 schematicSymbol 视图中 offGrid 的问题. 回到 ...

  6. CF321E Ciel and Gondolas Wqs二分 四边形不等式优化dp 决策单调性

    LINK:CF321E Ciel and Gondolas 很少遇到这么有意思的题目了.虽然很套路.. 容易想到dp \(f_{i,j}\)表示前i段分了j段的最小值 转移需要维护一个\(cost(i ...

  7. bzoj 2989: 数列

    LINK:数列 需要动一点脑子 考虑查询 暴力显然不行 考虑把绝对值拆开. 当x<=y ax<=ay时 有 y-x+ay-ax<=k x+ax>=y+ay-k 可以发现在满足前 ...

  8. 使用ST-Link下载程序出现Error:Flash Download Failed-“Cortex-M3“ 解决详细步骤（附图）

    我一直用stm32 f407开发. 最近要学mqtt与阿里云联网之类的课程,因为没有做过,所以网上搜了一遍,结果全是stm32 f103c8t6的例程. 后来我就搬出我的f103最小系统版 (这个就为 ...

  9. python3 openssl问题（贼有用）

    目录 一.问题描述 二.排查过程 三.总结 四.写在最后 一.问题描述 在python3 执行任何的request请求时,都会报以下的错误,纵观全网,以下基本尝试过了,对于我这个是无效的,后来不知道怎 ...

  10. 基于IDEA 代码提交Git

    基于IDEA 代码提交Git 步骤 1 创建一个项目 2 点击 VCS --> Import init Version Control --> Create Git Repository ...