Meta Q how to: Responsive toggle menus

Terris Kremer / Posted 7.10.2012

Meta Q how to: Responsive toggle menus

I was recently tasked with building a responsive navigation menu for a project I was on working at Q Digital Studio. It works thusly: when the browser window is at mobile sizes, the navigation bar "magically" transforms into a dropdown list. You can view a demo of it here.

The specs were pretty straightforward:

  • At mobile sizes, the navigation should display as a drop down menu.

  • When the user taps the dropdown, the links should slide open.

  • At tablet sizes and up, the navigation should display as a horizontal bar.

Here's how we can make the magic happen.

First let's build out our navigation.

<nav class="group">
  <h2 class="navheader slide-trigger">Menu <span></span></h2>
  <ul class="navigation group">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>

Now let's add some styling. Nothing too fancy just yet.

.navigation {
  max-width: none;
  background: #000;
  padding: 0;

.navigation li {
  float: left;

.navigation li a {
  display: block;
  color: #fff;
  padding: 10px;

.navigation li a:hover {
  background: #0fcaf2;

Next, we'll need to add a toggle button that will trigger the menu slide on tap. Let's hide it by default. We can show it at mobile sizes later.

Right above my navigation HTML  add:

<h2 class="navheader collapse-trigger">Menu <span></span></h2>

We'll also include a span tag to display an arrow icon to the button.

Now, let's add some styles for our toggle button:

.navheader { 
  font-size: 12px;

.slide-trigger {
  display: none; /* need this */
  border: 1px solid #CCCCCC;
  cursor: pointer;
  margin-left: 15px;
  margin-right: 15px;

.slide-trigger span {
  background-image: url("/a/i/dropdown-arrows.png");
  background-position: 0 -14px;
  display: block;
  float: right;
  margin-top: 3px;
  height: 14px;
  width: 32px;

It's time for the responsive magic.

We'll need to add some styles that hide the menu, but show the trigger button at screen sizes of 560 pixels or less (you can change that number to suit your needs). We'll also want to un-float the navigation links.

@media only screen and (max-width: 560px) {
  .slide-trigger { display: block; }
    .no-js .slide-trigger { display: none; }
  .navigation { display: none; }
    .no-js .navigation { display: block; }
  .navigation { margin: 0 15px; }
  .navigation li { float: none; }
  .navigation li a { border-bottom: 1px solid #fff; }

Notice that I've added some .no-js styles. Since we'll be using jQuery to handle the sliding behavior, we want to be sure the navigation is visible, in case JavaScript is turned off (we're using modernizr to test for JavaScript).

Here's the script that we'll use to handle the sliding behavior:

(function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree ='.navigation');{
        if(':visible') ){tree.toggle();}
        if ( $(window).width() <= 570 ){tree.attr('style','');};

Now let's attach this little plug-in to our toggle button element. The script is pretty simple; it finds the next .navigation element and opens it or closes it when the toggle button is clicked. We also want to make sure the menu is visible again in case the window gets larger than 560 pixels, so let's add a little resize testing and open the navigation down at sizes of 560 pixels or more.

We can attach our plug-in to the toggle button when the document is ready:


There you have it! A working mobile toggle menu. Resize your window and watch the magic happen.

As always, feel free to tell us how you could have done this better! If you have questions, feel free to leave a comment below.

Terris Kremer

Front-end developer at Q Digital Studio

Terris Kremer is a front-end developer at Q Digital Studio. While he may joke that both front- and back-end developers are dweebs, Terris really does make development look cool. For Terris, work is a game that he can (and does) play all day long.