Comm 333 Web Design II

Skip to navigation

Responsive Navigation

Considerations

  • Ensure that your navigation will work on all sizes and device types
  • If you have a horizontal navigation, how does it degrade when the site is smaller?
  • Are your links big enough for fingers to accurately tap on a touch screen device?
  • Are you relying on hover effects for your navigation? There is no hover on a touch screen device.

Drop down menus

Traditional drop down menus tend to not work very well on touchscreen devices and smaller screens.

  • They are usually triggered by a hover state, which doesn't exist on a touch screen device.
  • They also tend to cram a lot of items into smaller clickable areas, which doesn't translate well to a small screen and inaccurate pointing devices (fingers).
  • Lastly, they also tend to rely on precise positioning which can be hit or miss on many mobile browsers.

Show / Hide Toggle

To save space and allow navigation items to be large and clickable for fingers, most responsive navigation systems make use of some kind of show/hide toggle for small screen devices. This is done with a JavaScript.

The basic gist of a show hide toggle is simply toggling a class on and off when the user clicks a button. We can combine this JavaScript class toggle with with CSS that styles the display or visibility state of that class.

See the Pen Simple Show/Hide Toggle by Dane Groves (@danealexander) on CodePen.

Below is a simple navigation combined with a toggle switch. The toggle switch could be any type of HTML element. We're using a button below.

<nav>
  <button id="menu-toggle">Menu</button>
  
  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Next we use JavaScript to attach an event handler to the click event of the menu-toggle button. The event handler toggles the class open on and off on the menu. The "off" state is the absence of the open class.

$(document).ready(function() {
  // Make sure the browser understands js
  // Prefix all classes related to js with .enhanced to ensure progressive enhancement
  $("html").addClass('enhanced');

  var $nav = $("#menu");
  var $navToggle = $("#menu-toggle");

  if ( $navToggle ) {
    $navToggle.on( "click", function() {
      $nav.toggleClass( 'open' );
    });
  }
});

We then add CSS rules to show the menu when the open class is present and hide it when it's not present. We make sure to prefix these selectors with the enhanced class that was added with JavaScript. We do this to ensure that the navigation will be visible even if our JavaScript doesn't run.

.enhanced #menu {
	max-height: 0;
	overflow: hidden;
}
.enhanced #menu.open {
	max-height: 20em;
}

Slide and Fade Effects

You can modify the example above to use a slide effect or a fade effect.

See the Pen Simple Slide Menu Effect by Dane Groves (@danealexander) on CodePen.

The primary difference here is that we no longer use the open class. Also, instead of make a zero-height menu, we use the display property instead.

The JavaScript:

$(document).ready(function() {
  $("html").addClass('enhanced');

  var $nav = $("#menu");
  var $navToggle = $("#menu-toggle");

  if ( $navToggle ) {
    $navToggle.on( "click", function() {
      $nav.slideToggle('slow');
    });
  }
});

The CSS:

.enhanced #menu {
  display: none;
}

You can change the argument to slideToggle to either slow, fast or a number in milliseconds. Any of these would work:

$nav.slideToggle('slow');
$nav.slideToggle('fast');
$nav.slideToggle(1000);

To use a fade effect, substitute fadeToggle for slideToggle.

Hamburger (or not)

There's a lot of debate in the web world about the pros and cons of the hamburger icon's effectiveness (or complete lack of effectiveness). The short answer, it depends on your users.

From the study on Icon Usability by the Nielsen Norman Group:

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

More Resources

Examples from Class

Compare and contrast navigation approaches on each site using mobile devices, tablets, and desktop browsers.

Navigation Inspiration