Menutron

A jQuery plugin for responsive navigation menus

Demo

Plugin Demo: http://dev.85pixels.com/wordpress/menutron-demo/

What it does

Menutron transforms your navigation menus from a list to a select menu when resizing your browser. On mobile devices, the select menu pulls up a native control, making it easier to pick an item.

It’s concise – When implemented in a responsive design, your menu becomes consolidated in to a single control, saving you horizontal and/or vertical real-estate.
It’s convenient – On mobile devices, the select controls will activate a native control, like the picker control for iOS, which can be navigated using drag, nudge, or flick gestures.
It’s intuitive – It works on any type of list (ol,ul,dl) and automatically adds a menu title of “Choose…” for easy recognition

How it works

Let’s say your navigation menu markup looks like this:

<nav id="main">
  <ul>
    <li><a href='google.com'>Google</a></li>
    <li><a href='facebook.com'>Facebook</a></li>
    <li><a href='twitter.com'>Twitter</a></li>
    <li><a href='pinterest.com'>Pinterest</a></li>
    <li><a href='flickr.com'>Flickr</a></li>
  </ul>
</nav>

Simply call the Menutron function, using the list menu container (ie. <nav id="main">) as a selector…

<script>
  $(function(){
    $("nav#main").menutron();
  });
</script>

…and your list transforms in to a select control when the screensize is below the specified screen width!

<nav id="main">
  <select>
    <option selected="selected" value="">Choose...</option>
    <option value='google.com'>Google</option>
    <option value='facebook.com'>Facebook</option>
    <option value='twitter.com'>Twitter</option>
    <option value='pinterest.com'>Pinterest</option>
    <option value='flickr.com'>Flickr</option>
  </select>
</nav>

By default, the plugin has a media query set to max-width: 600px. If you want to set your own media query, the plugin has an option for that. Just pass in your desired size to maxScreenWidth like below:

<script>
  $(function(){
    $("nav#main").menutron({
      maxScreenWidth: 480
    });
  });
</script>

Now when a browser width is below 480px, the list will transform in to a select menu.

What you’ll need (dependencies)

A responsive design ;)
Latest jQuery (It may work on previous versions, but it’s only been tested on the latest)
For devices with retina displays, a <meta name="viewport" content="initial-scale=1.0" /> in the head will make the device screen resolution equal to the device screen size (1:1). Although not needed, I also disable zooming when controls are selected. Below is my meta tag:

<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />

FYI

The current version of the plugin does not support nested lists (ie. ul > li > ul > li). As far as I know, there aren’t any good solutions for handling nested lists in responsive designs. If you know any, feel free to fork the repo and make a pull request.
In the next update, I plan to support definition list titles (<dt>) as the select menu’s default title when there is one available. Just haven’t gotten around to it yet :(
Oh, I should also mention this is my first jQuery plugin (yay!), so I apologize ahead of time if you decide to look under the hood see something weird. If you have any suggestions, comments, or creative insults for my code, add an issue.

jeremysummers/Menutron

Menutron

Demo

What it does

How it works

What you’ll need (dependencies)

FYI