Using MW as a foundation for a responsive menu design

Since responsive design is all the rave these days, and becoming a household name, I decided to set out and use WA MenuWriter to create the foundation for a responsive menu. One that adapts to the desktop, tablet device, and smartphone. Its confirmed that MW does not produce a responsive menu out of the box, but with a little post-work and foundation knowledge of how media queries work, its not hard to adapt what MW creates into a responsive menu.

You can test the results of my experiment at responsive-menu.php. Just resize your browser window. For Safari users, I'd like to recommend an invaluable extension that I've started using available at resizer/. It allows you to resize your browser at predetermined sizes with the push of a button.

I've included the source files for anyone who wishes to expand on this, use it for their own project, learn from it, whatever. Let me note that I've implemented Framework Builder and the plugin concept for inserting the menu on the test page. The menu.php file inside the plugins folder can still access the MenuWriter edit mode, so you can change the menu structure to your heart's content. I've also added comments throughout each file to help illustrate what was done. Also, I just want to point out that the the files were produced in XHTML 1.0. Old habits die hard, I guess. This could project could easily be reproduced in HTML 5. I hope this experiment and the supplied files can help anyone on the forum wishing to use WA MenuWriter to build the foundation for a responsive menu.

All the best,
Mike