What is the best way to create a menu in jQueryMobile

Question

I am developing an application containing a menu with links to several pages, and I would like to know what is the best way to implement it.

One solution is to create a menu on all pages using JavaScript, but it will duplicate the menu when it should have only one global for all pages.

Another solution would be to create a div outside the frame, but this method would not take advantage of the framework.

Answer 1

In the current version of jQueryMobile 1.0a4.1, the only solution I discovered was creating a div outside the jQueryMobile page structure.

HTML:

<div id="global-header">Header</div> <div data-role="page"> ... </div> 

CSS

 #global-header { position: absolute; top: 0px; left: 0px; height: 40px; width: 100%; z-index:99999; } .ui-page { padding-top: 40px; } 

Answer 2

I prepared this post specifically for this issue. It handles fixed headers and footers less (since I usually consider them to be a waste of already limited real estate) and much more about global navigation in general. Hope this helps.

Answer 3

Check out the plugin I'm writing called multiview .

It still works in progess, but you can set a global header / footer by placing it on the wrapper page, but outside of any panels you use.

Let me know if this suits your needs. I am slowly moving to the bug fix phase.