Mobile navigation jquery plugin

Some people like to bitch and whine about a responsive web approach, others embrace it. I can’t blame them, they probably still use ajax to replace iframes…

If you’re anti respsonsive you better stop reading, start looking for your credit card and order one of these wonderful books. If you speak or understand Dutch I would suggest you get out of your cave more often and maybe attend some free fronteers meetups.

Anyway…

Since I started working as a freelance Gorilla I’ve been blessed with the design skills of Jelle. He designs killerwebsites for every possible device. Gorilla has been building responsive websites for a long time, even before it was coined ‘responsive webdesign’. They’ve managed to build a rock solid haml / sass (compass) boilerplate that provides most of their default fallbacks. One of these default fallbacks is the often used horizontal navigation:

So, for desktop users and iPad users this horizontal navigation works fine. There’s a fallback for mobile users so the horizontal list becomes a block list resulting in something like this:

As you can see, it’s not very handy because the content is being pushed down and clicking around on the website doesn’t really give you the feeling that you’re actually changing pages. Therefore we wrote a small jquery plugin. This could be done native but since we’re using jQuery in this (and almost) every project it seemed easier to just write a plugin. The result is something like this:

The plugin and more info on how to use can be found on github: http://github.com/joggink/jquerymobiledropdown

 

About joggink

I'm a freelance frontend developer and a proud member of the dutch fronteers.

24. October 2011 by joggink
Categories: frontend development, jquery, mobile, usability | 11 comments

Comments (11)

  1. Pingback: jQuery Mobile Select: jQuery Mobile Navigation Replacement Plugin | Bram.us

  2. Hooray! Already added a feature request ;)

  3. Have been building a personal responsive development boilerplate for my own use, will definitely check this out and see if I need to update the select list method I’m currently using, thank you sir!

  4. Excellent! I’ve been doing something similar in my responsive builds, but this is far more elegant; I’ll definitely give it a run in my next build :)

  5. Elegant Solutions. But what do you thing about content heavy sites? This has been bugging me alot lately..

  6. Pingback: Really Useful Resources and Tools for Responsive Web DesignНеинтересный блог

  7. Pingback: Really Useful Resources and Tools for Responsive Web Design | Web Help 101

  8. WHere does the code go to use or customize the script, and how do I call the script in my header template?

  9. Pingback: Useful Resources & Tools to Support Responsive Web Design

  10. Pingback: レスポンシブウェブデザインに本当に役に立つツール・リソース まとめ - tagamidaiki.com

  11. Pingback: Really Useful Resources and Tools for Responsive Web DesignБлог: интернет, SEO, WordPress, CSS, HTML5