Wednesday, April 18, 2012

How to implement two level sidebar navigation with Jquery Mobile

I'd like to implement a two level navigation inside a sidebar using JQuery Mobile.



By means of explaining what I am trying to achieve, consider I have 3 categories links, and (for example) 3 links in each category
Category 1
- Link 1
- Link 2
- Link 3



Category 2
- Link 1
- Link 2
- Link 3



Category 3
- Link 1
- Link 2
- Link 3



And would like someway to avoid having the user have to browse down two links to try to get to any one page.



I've tried a few avenues using the route;
1. Using data-role="collapsible", in an attempt to create headers for each category in the sidebar, any of which users could expand to click on the second level link
2. Using a series of select drop downs (for each category), and javascript to fire a page change on selecting any of the choices



The problem is that while both methods work nicely when used in a 'main content' page, as soon as I pout them in a content-secondary container, neither of them work (the collapsible content is always expanded, and the javascript does not seem to fire)



Can anyone suggest either (a) a solution to the above problems I am having, or (b) an alternative way to skin this cat?





No comments:

Post a Comment