Notes for Responsive Menu Patterns

DrupalCampNJ 2013 logo

Instead of slides, below are the notes from the Responsive Menu Patterns talk at DrupalCampNJ 2013. 

Examples

Below are examples of sites that use responsive menu patterns. It order to see the menu take shape, shrink down the width of your browser. Two of my favorite ways to see how a site responds to various widths is with the "Responsive Design View" in Firefox (Tools > Web Developer > Responsive Design View) or with the Responsive Design Bookmarklet at http://responsive.victorcoulon.fr/.

DrupalCampNJ Responsive Menu

With the above examples in mind, we needed to create a responsive menu for DrupalCampNJ's site. We knew that our menu would be a simple, single level of navigation. Therefore, I created a pattern that gave the menu large, clickable buttons. However, it also slid the menu away so that the site's content would be as prominent as possible.

    
      #zone-menu-wrapper {
border-bottom: 3px solid #00674c;
}

#zone-menu {
-webkit-box-shadow: inset 0px 6px 6px -6px rgba(50, 50, 50, 0.6);
-moz-box-shadow: inset 0px 6px 6px -6px rgba(50, 50, 50, 0.6);
box-shadow: inset 0px 6px 6px -6px rgba(50, 50, 50, 0.6);
background-color: #00674c;
border-bottom: 5px solid #fff;
padding: 5px 0
}

#zone-menu-wrapper a {
display: block;
color: #fff;
text-transform: uppercase;
padding: 10px 0;
font-weight: bold;
text-decoration: none;
padding-left: 10px;
}

#zone-menu a:hover, #zone-menu a:active {
background-color: #009a72;
}

DrupalCampNJ CSS (http://drupalcampnj2013.drupalcamp.org/)

DrupalCampNJ JS

The basis of this JavaScript starts with this tutorial: http://ivanchaquea.com/creating-responsive-menu-omega-subthemes.html

    
      (function ($) {
Drupal.behaviors.yourfunction = {
attach: function(context) {
$('body', context).once('accordionmenu', function () {
$('body').bind('responsivelayout', function (e, d) {

//Define your drupal menu id (only works with core menu block)
var menuid = ".site-name-slogan";

//This condition will act under the 'mobile' size, and will not be executed on ie6 and ie7
if (d.to == 'mobile' && !$('html').hasClass('ie6') && !$('html').hasClass('ie7')) {

//Add a span tag that will aft as the expand button, you can change the output of that button here
$(menuid).prepend( $("<div id='over-wrapper'><a class='over' href='#'>Menu</a></div>") );
$("#zone-menu").hide();
//Create an open/close action on the accordion after clicking on the expand element
$('a.over').click(function (event) {
event.preventDefault();
if ($("#zone-menu").is( ":visible" )){
$("#zone-menu").slideUp('fast');
} else {
$("#zone-menu").slideDown('fast');
}
});
}

if (d.to != 'mobile' | $('html').hasClass('ie7')) {
//remove the expand elements from the accordion menu
$("div#over-wrapper").remove();
//show
$("#zone-menu").show();
}

});
});
}
}
}(jQuery));

JavaScript for the 2013 DrupalCampNJ mobile menu. http://drupalcampnj2013.drupalcamp.org/

Would I do it this way again?

Probably not. The JavaScript sliding effect seems to me to be sluggish on mobile. I'd look to this article (http://www.netmagazine.com/tutorials/build-smart-mobile-navigation-with…) as a starting point if I were to do it again. That method is also is not tied to Omega, unlike the JavaScript that I've provided here.

Additional Resources

Inspiration