Replace small-menu.js with navigation.js inspired by Twenty Twelve.

[kovshenin]

Doesn't use jQuery, slightly easier to understand (is it?), uses a media query for max-width, rather than JS events making it faster to respond.

I have a feeling this could be cleaned up even more. Thoughts?

[ianstewart]

I found this slightly harder to understand but it seems like it would be cleaner/faster. If it doesn't break anything, plus 1 from me.

[kovshenin]

I would also like to change the h1 tag in the navigation menu (header.php) and post navigation menu (in template-tags.php) to a different tag, maybe h3 or better just an a or something. I'm not sure I understand why they're headings at all, is that an accessibility thing?

How do you feel about changing the tag? What do you think the new tag should be?

[ianstewart]

It's a HTML5 semantics thing, using headings inside sectioning elements, and using h1 for the first heading inside of each sectioning element for consistency, sanity, and portability (you can move that block of code around the document and the heading will always be correctly nested).

[kovshenin]

@ianstewart oh, in that case it makes perfect sense, thanks for explaining it :)

[danielimmke]

This is a good addition. I have used this on a few themes now and it would be nice not to have to manually switch it out.

[philipnewcomer]

There are plenty of themes that don't use jQuery for their functionality, so it seems a bit like overkill to require jQuery to be loaded on all pages just for small-menu.js.

[mfields]

+1 I used the menu script from Twenty Twelve in my last project and it works great!

[sixhours]

+1!

[michiecat]

I think we should convert to the navigation.js script from Twenty Twelve as soon as we can. The Jetpack mobile theme uses the same small-menu.js as _s, and there were reports of it not working properly in Firefox on Android devices. Switching it to Twenty Twelve's navigation.js fixed the problem.