Design Responsively With Malleable Mobile Menus

Tara Hornor

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:


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

<script type="text/javascript">// <![CDATA[
$(function () {
$("#nav").tinyNav();
});
// ]]></script></pre>
<h1>TinyNav.js Demo!</h1>
<div id="navcontainer">
<ul id="nav">
	<li class="selected"><a href="home.html">Home</a></li>
	<li><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 home page.</h2>
<pre>
Not much to say, other than to tell you to resize the window to see how the content moves.

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

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:


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

<script type="text/javascript">// <![CDATA[
$(function () {
$("#nav").tinyNav();
});
// ]]></script>

</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>

  

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.

/*! 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);

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • David

    Many thanks, Tara, for a most useful tool.

    I tried the code for tinynav as shown in your article, but the browser gave an error. Having checked the github code, I noticed there are differences between what’s presented in your article and the version on github. Though, both are version 1.1.

    Fortunately, the code from github works fine.

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      David,
      This is a custom implementation, but the final code was just a copy-past from the Github repository. I’ll have to check into that. Thanks for letting me know!

      • http://n/a Ronnie

        Rewrite: My tags got omitted, I used caps instead.

        Just remove the tags that say PRE or on both html pages. The PRE tags are anti-​​wrap, so those lines aren’t resizing.

        You can put a BR after each text line on both pages below the H2 tag so the lines aren’t strung together and long.

        It works fine without adjustments, it’s just better to see the text lines shrink too.

  • Steve

    I felt the actions here were kinda messy. Better to just link to tinynav’s website which is much more understandable. http://tinynav.viljamis.com/

  • http://www.froont.com Anna

    Hello, Tara!
    Great tool and description!
    We are working on a visual responsive web design prototyping tool called Froont. I thought you might like it and we would love to get your feedback! Would you test it for us? :)

  • http://www.ideyatech.com Nicole I. Rivers

    I stumble upon this post and I find it very useful to implement. Thank you for sharing.