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

 

11 Responses to “Mobile navigation jquery plugin”

  1. [...] Bloggink: Mobile Navigation jQuery Plugin →jQuery Mobile Select Source → Elsewhere javascript, jquery, link, mobile, navigation, responsive web design ← HTML5 For Web Designers [...]

  2. Wolf says:

    Hooray! Already added a feature request ;)

  3. Rick says:

    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. John says:

    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. Javier says:

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

  6. [...] Mobile Navigation jQuery Plugin Another Plugin that will convert the navigation links into a dropdown list for smaller screens. [...]

  7. [...] Mobile Navigation jQuery Plugin Another Plugin that will convert the navigation links into a dropdown list for smaller screens. [...]

  8. cleh says:

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

  9. [...] Mobile Navigation jQuery Plugin ナビゲーションリンクを小さな画面向けのドロップダウン型のリストに変換するもう1つのjQueryプラグインです。 [...]

  10. [...] Mobile Navigation jQuery Plugin Another Plugin that will convert the navigation links into a dropdown list for smaller screens. [...]

Leave a Reply