Very nice, Jeremy. I’m surprised this is the first time I’ve seen someone combine the jump-to-footer pattern with an off-canvas enhancement. Kudos, and I’m kicking myself for not thinking of it first. :)
Couple of trifles:
Correct me if I’m wrong, but the multi-column layout for the nav doesn’t seem to work in Firefox (tested on Win7 and Mac), even though you do have what seems to be the correct CSS. After poking around a bit, it seems that Firefox doesn’t want to apply columns to an element with <code>display: table-caption</code>. (I wonder if that’s a bug? Or are the other browsers doing it wrong? I’ll file a bug report with everyone and see what happens!) Because of this, it would be nice if it degraded to show the nav in the footer when it’s in its non-column state. But it doesn’t, so I think (ironically) it’s not quite degrading as best it could.
Also, for your JS, I would favor using classList over the old className method. Although the problem there is that classList is IE10+. So depending on the project, you could just assume IE9 is out of the picture (<3% usage worldwide as of this month) but otherwise it would probably be good to test for that too, just in case. After all, IE8 usage is actually higher than IE9, so you might as well. And of course, there is the option to polyfill both of those, but I’m not really a fan of adding more JavaScript for old clunky browsers. And granted, your solution works in IE9+ so I suppose it’s fine. I just hate that old method of adding and removing classes; if anyone can avoid it, they definitely should.
Louis
Very nice, Jeremy. I’m surprised this is the first time I’ve seen someone combine the jump-to-footer pattern with an off-canvas enhancement. Kudos, and I’m kicking myself for not thinking of it first. :)
Couple of trifles:
Correct me if I’m wrong, but the multi-column layout for the nav doesn’t seem to work in Firefox (tested on Win7 and Mac), even though you do have what seems to be the correct CSS. After poking around a bit, it seems that Firefox doesn’t want to apply columns to an element with <code>display: table-caption</code>. (I wonder if that’s a bug? Or are the other browsers doing it wrong? I’ll file a bug report with everyone and see what happens!) Because of this, it would be nice if it degraded to show the nav in the footer when it’s in its non-column state. But it doesn’t, so I think (ironically) it’s not quite degrading as best it could.
Also, for your JS, I would favor using classList over the old className method. Although the problem there is that classList is IE10+. So depending on the project, you could just assume IE9 is out of the picture (<3% usage worldwide as of this month) but otherwise it would probably be good to test for that too, just in case. After all, IE8 usage is actually higher than IE9, so you might as well. And of course, there is the option to polyfill both of those, but I’m not really a fan of adding more JavaScript for old clunky browsers. And granted, your solution works in IE9+ so I suppose it’s fine. I just hate that old method of adding and removing classes; if anyone can avoid it, they definitely should.