记得以前在做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. Docker 挂载

    简介   集群当中挂载数据卷的方式采用--mount标志.而且-mount标记相比于-v意图更明确.   如果不进行数据挂载的话,当容器不在时,对应的数据也不会持久存在 存储方式 卷存储,由docke ...

  2. CF R 632 div2 1333F Kate and imperfection

    赛后看了半天题 才把题目看懂 英语水平极差. 意思:定义一个集合S的权值为max{gcd(a,b)};且\(a\neq b\) 这个集合可以从1~n中选出一些数字 求出当集合大小为k时的最小价值. 无 ...

  3. luogu P2462 [SDOI2007]游戏

    LINK:SDOI2007游戏 题意:接龙前一个要比后面大1 且后一个单词出现的各自字母的次数>=前一个单词各自的字母的次数 考虑暴力dp sort之后dpY 显然会T. 考虑我们没必要枚举j ...

  4. Linux系统之《消息队列》入手应用

    目录 简述 代码 编译 运行 简述 消息队列是Linux进程间通信方式之一,消息队列一般是用于简单的通信,数据量不大,通信不频繁的情况.如果交互频繁或者数据量大就不适合了. 代码 下面直接上代码,发送 ...

  5. Spring JdbcTemplate中关于RowMapper的使用实例

    在spring boot 集成使用jdbctemplate,首先在pom文件中引入相应的依赖 <dependency> <groupId>org.springframework ...

  6. Python 进程与多线程

    10 进程和多线程 10.1 多进程 # -*- coding: utf-8 -*- import os pid=os.fork() print ('process (%s)start ...' %o ...

  7. Web测试转App测试不看不知道

    Web测试 Web通常指的是互联网应用系统,比如税务电子化征管档案系统.金融数据平台.餐饮商家管理后台等等,其实质是C/S的程序. C是Client--客户端,S是Server--服务器. Web中的 ...

  8. 剑指offer之字符串是否为数值

    1. 题目 这是<剑指offer>上的一道题,刚开始觉得这是一道挺简单的题目,后来发现自己太年轻了,考虑的因素太少了,思考了而是分钟还是无从下手,看了作者的思路深深被他折服了,题目如下: ...

  9. 密码学系列——消息摘要（c#代码实操）

    前言 简介: 消息摘要(Message Digest)又称为数字摘要(Digital Digest) 它是一个唯一对应一个消息或文本的固定长度的值,它由一个单向Hash加密函数对消息进行作用而产生 使 ...

  10. Css 图片自适应

    设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...