Ye' Olde Site By Joby

Colorful Accordion Navigation

Browser support

Works great with any modern browser. Offers basic functionality (missing or less-smooth animations) in IE8, and with Javascript enabled. Ugly, but still works as a menu in IE7 and below.

For small screens .color-accordion-nav elements scroll side-to-side with touch events. This means that if you have other navbar elements to display side-by-side with this menu, your best bet is to include them in the .color-accordion-nav element. Either floated or inline-blocked will work. You just have to make sure to define a font size for them, because the root element is set to zero so that inline-block parts fit right up against each other. On small-screened, non-touch devices a horizontal scrollbar will appear if necessary.


It's MIT License, so knock yourself out using and modifying this code! Just remember to leave the copyright/license headers intact. First download these files:

Then have a look at this gist to see how it should be used: