程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> HTML5移動開發之路(1)——jqMobi中Side Menu實現(類似人人網)

HTML5移動開發之路(1)——jqMobi中Side Menu實現(類似人人網)

編輯:關於PHP編程

記得以前在做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便可實現

\
\


  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved