记得以前在做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. 扯扯Java中的锁

    前言 又过去了一个周末,最近陆陆续续的看了<并发编程的艺术>一书,对锁有不少感悟,这次就聊聊Java中的锁事.本文纯粹是漫谈,想到哪说到哪,但准确性肯定会保证,倘若有不正确之处,还请交流指 ...

  2. 11-13 模块_collections(不太重要)&time&random&os

    random:随机数模块 os:和操作系统打交道的模块 sys:和Python解释器打交道的模块 序列化模块:Python中的数据类型和str转换的模块 http://www.cnblogs.com/ ...

  3. Python File seek() 方法

    概述 seek() 方法用于移动文件读取指针到指定位置.高佣联盟 www.cgewang.com 语法 seek() 方法语法如下: fileObject.seek(offset[, whence]) ...

  4. PHP jewishtojd() 函数

    ------------恢复内容开始------------ 实例 把犹太历法的日期转换为儒略日计数: <?php$jd=jewishtojd(6,20,2007);echo $jd;?> ...

  5. PHP timezone_name_get() 函数

    ------------恢复内容开始------------ 实例 返回时区的名称: <?php$tz=timezone_open("Europe/Paris");echo ...

  6. C/C++编程笔记：C语言贪吃蛇源代码控制台（二），分数和食物！

    接上文<C/C++编程笔记:C语言贪吃蛇源代码控制台(一),会动的那种哦!>如果你在学习C语言开发贪吃蛇的话,零基础建议从上一篇开始哦!接下来正式开始吧! 三.蛇的运动 上次我已经教大家画 ...

  7. System.nanoTime与System.currentTimeMillis比较

    System.nanoTime与System.currentTimeMillis比较 ​currentTimeMillis返回的是系统当前时间和1970-01-01之前间隔时间的毫秒数,如果系统时间固 ...

  8. SpringBoot+Dynamic多数据源动态切换

    最近做了个小模块,需求就是项目同时读取三个数据库,操作数据.并不是分库分表,只用定时跑,不需要对外提供接口. 技术选型:SpringBoot + Mybatis Plus(Mybatis) + Dyn ...

  9. Chrome太占内存？试试这个

    " The Great Suspender" 是一个免费的开源 Google Chrome 扩展程序,适用于那些发现chrome占用过多系统资源或经常遭受chrome崩溃的人. 一 ...

  10. Python库大全，建议收藏留用！

    学Python,想必大家都是从爬虫开始的吧.毕竟网上类似的资源很丰富,开源项目也非常多. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手. ...