How can I convert a desktop site's navigation into a collapsable menu?

Question

The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?

Answer 1

One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.

You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.

You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:

data-ur-set="toggler"

(add this attribute to the wrapper)

data-ur-toggler-component="button"

(add this attribute to the "button" section)

data-ur-toggler-component="content"

(add this attribute to the content section)

You need to include these CSS rules somewhere too:

*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
  display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
  display: block;
}

You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.

Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.