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

Terris Kremer

Front-end developer at Q Digital Studio

Terris Kremer is a front-end developer at Q Digital Studio. Largely self-taught, Terris was playing around with bits of html while most kids were still figuring out how to type up a term paper. In college, Terris dabbled in programs from music to marketing but found a real passion in designing for the web.

He spent a few years on the freelance circuit in Denver, honing his skills and was once paid with a bike for his incredible web work. Terris realized that while he loved the vocation, he wanted to collaborate with like-minded individuals and didn't want to worry about when the next job would come: he just wanted to design. He enjoys being part of Q Digital Studio and working to create sustainable designs and better communities.

While Terris may joke that both front- and back-end developers are œdweebs, he really does make development look cool. For Terris, work is a game that he can (and does) play all day long. At Q Digital Studio, he is the go-to guy when design and development must learn to play nice. He is working to become the resident typography guru and loves every ligature, loop and stem that comes out of the Hoefler & Frere Jones foundry.

Terris noodles on a guitar in his free time and enjoys revamping an old piece of furniture every now and again.