Question

Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.

They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs “content-primary” and “content-secondary.” My question relates to the fact that I can’t find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?

Answer 1

I’m frankly quite surprised to see how challenging it’s been to find a left nav example that works consistently and as expected in JQM.

I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various @media queries which make the menu responsive).

The JQM docs do not use the “multi-page” format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.

This immediately makes my developer brain think “let’s abstract the menu and include it on each page automatically”. But how to ‘include’ the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.

You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.

I’ll keep you posted if/when I have a workable solution.