What's the best way to create a menu in jQueryMobile

I'm developing an application that contains a menu with links to the several pages and I would like to know what's the best way to implement it.

One solution is to create the 开发者_Go百科menu on all pages via JavaScript, but it would duplicate menus when it should have just one global to all pages.

Another solution would be to create a div outside the framework but this way would not be taking any advantage of the features of the framework.

---

At the present version of jQueryMobile 1.0a4.1 the only solution I found 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;
}

---

I prepared this post specifically for this question, It deals less with fixed headers and footers (since I generally believe them to be misguided wastes of already limited real estate) and more about dealing with global navigation in general. Hope this helps.

---

Check the plugin I'm writing, called multiview.

It's still work in progess, but you can set a global header/footer by placing it inside the wrapper page, but outside any panels you are using.

Let me know if this would fit your need. I'm slowly progressing towards bug-fixing stage.