Design Responsively With Malleable Mobile Menus

One of the biggest challenges in responsive web design is getting your menus to function. If you’ve ever had to mess with it, you know what I’m talking about. You can use media queries to define CSS that applies when the screen size is various sizes, but sometimes you need extra functionality to pull off an ideal design.

What Is Mobile Menu Design?

Mobile menu design is simply getting the menus for a responsive design to fit mobile screen sizes. One of the core concepts around responsive web design is making all content available all of the time on all screen sizes. Just as importantly, we want to only publish content once — not create a “mobile version” of our content as well.

So, creating responsive menus that allow for lots of menu items that work in all screen size scenarios is important.

Why Use Mobile Menu Design?

Large and even not-so-large navigation menus take up a lot of space on a small screen. Ideally, you can compact the menu items while also making the menus usable. Too small and the user can’t see them or may struggle to touch the buttons. Too large and we’re making our users scroll, and scroll, and scroll some more.

So, mobile menu design becomes an important usability task.

One Method for Mobile Menu Design

I like collapsing menus into drop-down menus. This is becoming more popular, and users are typically able to find the menu quickly and figure it out. Drop-down menus are a huge space-saver, as well. They allow you to organize near-infinite amounts of items into a small part of your screen — just tap and scroll through your options.

TinyNav.js for Fast Mobile Menu Design

Speaking of mobile design, one consideration is the amount of code the user has to download. You can design massive amounts of functionality and create a bloated site if you’re not careful, so small file sizes are critical.

One solution I’ve found is TinyNav.js, which is a small JavaScript file (433bytes) that automagically converts menu items to a drop-down menu. It taps into jQuery, which is another 30-100k, depending upon which version you use.

TinyNav.js is easy to implement and can be controlled using media queries, so it will only collapse your menu items when it’s declared within a particular media query call.

Installing TinyNav.js on WordPress

If you have a WordPress site, there’s a TinyNav.js WordPress plugin — just install the plugin, adjust your media queries, and you’re done. It only takes a few minutes.

There are actually some themes that incorporate TinyNav.js already into their core. It’s becoming an increasingly popular solution — so much so, I’d expect TinyNav.js to be included as a base feature in upcoming releases of WordPress, or at a minimum as part of the TwentyEleven theme.

Implementing TinyNav.js on Your Own

Below I’ve created a simple implementation of TinyNav.js to show you one way you can incorporate the tool into just about any environment. I made a two page site — “Home” and “About” — that is responsive. If you make the screen size smaller, the menu will scale down.

Here’s the home.html code for your download and experimentation:

[sourcecode language=”html”]

TinyNav.js Demo
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script><script type=”text/javascript” src=”tinynav.min.js”></script>

This design isn’t responsive until the screen width drops below 600px.

[/sourcecode]

Here’s the “About” page. Copy and paste into a text editor and save as about.html in the same folder as your home.html:

[sourcecode language=”html”]

</pre>
<h1>TinyNav.js Demo!</h1>
<div id=”navcontainer”>
<ul id=”nav”>
<li><a href=”home.html”>Home</a></li>
<li class=”selected”><a href=”about.html”>About</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
<li><a href=”#”>Menu Item</a></li>
</ul>
</div>
<h2>Here’s a sample about page.</h2>
<pre>
You can find more about TinyNav.js at the GitHub site: <a href=”https://github.com/viljamis/TinyNav.js”>https://github.com/viljamis/TinyNav.js</a>

The creator of TinyNav.js has has own home page for the code: <a href=”http://tinynav.viljamis.com/”>http://tinynav.viljamis.com/</a>

You can get the WordPress plugin from the repository: <a href=”http://wordpress.org/extend/plugins/tinynav/”> http://wordpress.org/extend/plugins/tinynav/</a>

[/sourcecode]

Finally, here’s your JavaScript, taken from the minified TinyNav.js file. Save this as tinynav.min.js in the same folder as your other two files.

[sourcecode language=”javascript”]
/*! http://tinynav.viljamis.com v1.1 by @viljamis */
(function(a,i,g){a.fn.tinyNav=function(j){var b=a.extend({active:”selected”,header:””,label:””},j);return this.each(function(){g++;var h=a(this),d=”tinynav”+g,f=”.l_”+d,e=a(“<select></select>”).attr(“id”,d).addClass(“tinynav “+d);if(h.is(“ul,ol”)){“”!==b.header&&e.append(a(“”).text(b.header));var c=””;h.addClass(“l_”+d).find(“a”).each(function(){c+=”;var b;for(b=0;b”});e.append(c);b.header||e.find(“:eq(“+a(f+” li”).index(a(f+” li.”+b.active))+”)”).attr(“selected”,!0);e.change(function(){i.location.href=a(this).val()});a(f).after(e);b.label&&e.before(a(“”).attr(“for”,d).addClass(“tinynav_label “+d+”_label”).append(b.label))}})}})(jQuery,this,0);[/sourcecode]

Now you can style away! Using basic CSS, you can get the menus to look exactly as you want them to.

Have you used TinyNav.js? If so, feel free to share any tips with the rest of us!