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 menu

Solution 1:

At the present version of jQueryMobile 1.0a4.1 the only solution I found was creating a div outside the jQueryMobile page structure.

HTML:

<divid="global-header">Header</div><divdata-role="page">
    ...
</div>

CSS:

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

.ui-page {
    padding-top: 40px;
}

Solution 2:

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.

Solution 3:

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.