Easy peasy responsive navigation

I see a lot of people using really complex solutions for their responsive navigation when in reality the majority of work can be done with CSS. The only real requirement from JavaScript is to toggle a class on and off when a user requires the menu to be shown at smaller devices, rather than using it for the bulk of the work.

With that in mind, check out the example I made on Codepen below and let's break things down.

http://codepen.io/_lukewh/pen/zwNJbw

File size

The first thing you'll notice is the lack of actual code. Rather than a complex jQuery plugin you're presented with just 6 lines of unminified goodness which should be more than enough for even the most complex of layouts. Let's see why.

Class names

.js-toggle-nav is a bit of a weird convention, but it provides a lot of power. Rather than attaching a JavaScript event to any old element in the DOM, we have attached it to this class prefixed with .js, which tells us as project maintainers that this class is used in JavaScript.

With this prior knowledge, we can safely add and remove any other classes and know that they will only be affecting the element's styling, rather that any functionality it's attached to. This will be a god send when coming onto the project a year after it's launched for some much needed cleaning.

The same can also be said for the naming of the toggled class is-active-nav. Again, the prefix is is the key here. Adding a verb to the start of 'state-based' classes (classes which define a change) provides you the prior knowledge that this element is created by a change happening within your website, and so you know when and how the styling takes affect.

Leaving CSS to style elements

Finally, you'll notice that all the JavaScript does is toggle a class on and off the body element. As CSS is much more performant that JavaScript it only makes sense to do any transitions and showing/hiding of elements via that, rather than using something like jQuery's .slideToggle().

"But... why the body element?" you might be asking.

Well, this is due to how we're going to transition an element. Imagine instead we added this to our nav element. Once clicked, we'd have HTML like the following:

<nav class="nav is-active-nav" id="navigation" role="navigation">

It'll work for what we need and we can create CSS from these selectors to toggle the navigation on and off.

.nav {
  // hide element

  &.is-active-nav {
    // show element
  }
}

So what gives? What's the point in adding the class to the body element instead? Well, this is purely as a convenience. Imagine you realise that on mobile when the navigation is open you also need to interact with another element. Perhaps a search bar, or something simple like the logo needs to be smaller. Who knows. Whatever the case, having the .is-active-nav class on the body element means you will always be able to target those new elements with the exact same selector, as they're a descendant of your body, rather than requiring a new class for each element that requires a change i.e.

.nav {
  // hide element

  .is-active-nav & {
    // show element
  }
}

.logo {
  // properties

  .is-active-nav & {
    // new properties.
  }
}

Give this a try on your next project and let me know what you think. Whilst this is quite a simple bit of code, the conventions we've gone through are a little more complex so this may take some time to get used to but in a year's time when you're working on the project again, you'll thank me.

Until next time 