A common issue with responsive designs is that if you have lots of navigation links on a page they can take up a sizeable portion of your screen real estate in smaller viewports.

For example, with only six page links, this is how any page currently loads for the And the winner isn't… website on a smaller viewport:

I'd like to swap those links out for a drop menu but only if a browser is below a certain viewport width. Now, you can roll your own piece of JavaScript to convert the menu items to a drop menu. The venerable Chris Coyier has documented how this can be achieved (http://css-tricks.com/convert-menu-to-dropdown/). Alternatively, there are a few pre-written scripts that do this for you. For brevity and ease, I have opted to use one such script. The following screenshot shows what the drop menu does to our navigation links on smaller viewports:

Clicking on the Select a page button brings up the navigation, as shown in the following screenshot:

A perfect poster child for progressive enhancement—it isn't essential functionality but it gets more content "above the fold" for users with smaller viewports. So, let's get on and implement it. First off, download the Responsive Menu script (https://github.com/mattkersley/Responsive-Menu). As before, save the relevant file (jquery.mobilemenu.js) to the js folder. There is just one thing we need to do first in the markup, and that's give our navigation links in each page an id:

<nav role="navigation"> 
  <ul id="mainNav">
    <li><a href="why.html">Why?</a></li>
    <li><a href="offline.html">Offline</a></li>
    <li><a href="redemption.html">Redemption</a></li>
    <li><a href="video.html">Videos/clips</a></li>
    <li><a href="quotes.html">Quotes</a></li>
    <li><a href="3Dquiz.html">Quiz</a></li>
  </ul>
</nav>

We could live without doing this but jQuery selectors work much faster with a specific id to latch onto.

Now, in the conditional.js file, we'll add the following code:

Modernizr.load([
  {
    test: Modernizr.mq('only all'),
    nope: 'js/respond.min.js'
  },
  {
    // load the menu convertor if max-width is 600px;
    test: Modernizr.mq('only screen and (max-width: 600px)'),
    yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js'],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      $(document).ready(function(){
      
      $('#mainNav').mobileMenu({
        switchWidth: 600,                   //width (in px to switch at)
        topOptionText: 'Select a page',     //first option text
        indentString: '   '  //string for indenting nested items
      });
      });
      
    }
  }
]);

After the prior conditional load that adds Respond.js for old IE, we've added another test:

test: Modernizr.mq('only screen and (max-width: 600px)'),

The previous test asks, does this viewport understand media queries and if it does, is the maximum width of the viewport 600px? If it does...

    yep : ['js/jquery-1.7.1.js', 'js/jquery.mobilemenu.js'],

The previous line loads both the jQuery library and the Responsive Menu file:

complete : function () {
…more code…

The complete section effectively says, once any files are downloaded and executed, run the following:

$(document).ready(function(){
      
      $('#mainNav').mobileMenu({
        switchWidth: 600,                   //width (in px to switch at)
        topOptionText: 'Select a page',     //first option text
        indentString: '   '  //string for indenting nested items
      });
});

These are the variables for the Responsive Menu script. Most importantly, the first option defines what viewport width I want the existing menu to be converted to a drop down (I've set it to 600px).

Again, using Modernizr to perform this task removes extraneous code for users that don't need it and allows progressive enhancement of the user experience for those that do.

For website designers, especially those unfamiliar with JavaScript, plunging into Modernizr for the first time can be daunting. There's certainly a lot to take in but hopefully this short primer will illustrate some obvious advantages that can be utilized in any future responsive project you might work on.