NEW TUTORIAL: Responsive MODX navigation using wayfinder and select fields

Navigation on small screens can be a challenge.
After reading this excellent article by Jeremy Hixon on Smashing Magazine called: Progressive And Responsive Navigation http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/, I wanted to create a similar navigation in MODX Revolution.

Jeremy uses quite a lot of Javascript to generate a mobile version of a navigation, in MODX I use Wayfinder to generate two identical navigations: one for normal wide screens and a mobile navigation for less wide screens. Like Jeremy I use 'select' fields on mobile to generate a full navigation that is very easy to use on mobile devices and tablets, whilst not taking up a lot of room.

Read the tutorial here:
http://designfromwithin.com/blog-webdesign-development/2012/05/07/responsive-modx-navigation-using-wayfinder-and-select-fields/

Interesting to note that the article on Smashing Magazine

uses quite a lot of Javascript to generate a mobile version of a navigation

while the Smashing Magazine website uses a css/html, no js solution to achieve similar results - using media queries and {display: none;} to show/hide different menus.

Yes, an I think that is a better way... that is why I made the tutorial.

better because...

edit - looked at your tutorial (I had only looked at the Smashing page) - I agree that your approach is simpler/better:
the Smashing article uses js both to create the mobile navigation and to enable it; your tutorial describes creating a page with both navigation types on it, using media queries to display the appropriate one and js to enable the select list as navigation.

Any ideas on fixing the back button - your demo does not update the text of the select box when using the back button, so the navigation box is telling me I'm somewhere that I'm not. [ed. note: whistlemaker last edited this post 14 years, 5 months ago.]

Thank you for your suggestion! Will look into it.

I guess it depends on who you ask what is 'better' (what does that mean anyway?)
The tut on SM uses more JS or it needs more skills on the development end...

My version creates a duplicate of the nav, you could argue that that is a bad thing to do, bit I prefer this to needing to write more JS...

nice tutorial. Still I think that small resolutions with today mobile devices is no longer a major factor. Currently my main concern is the ability to use the site with touchscreens which in wayfinder doesn’t work. Still a grate tut, I'll definitely use it!