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.

If you want your own custom menu title for the select menu on mobile, just pass in the desired title to the menuTitle option as below:

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

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

As of 04.27.2012, Menutron can support nested lists up to 2 levels (ie. ul > li > ul > li).
In the next update, I plan to support definition list titles (<dt>) as the select menu’s default title when there is one available. As of 04.27.2012, there is an option for to specify your own custom select menu title.
If you have any suggestions, comments, or creative insults for my code, add an issue or fork the repo.

fnarp/Menutron

Menutron

Demo

What it does

How it works

What you’ll need (dependencies)

FYI