A few of the sites that I maintain are static, and I dare think that thay are hand-crafted. At the very least, they took that amount of time to do. As static, all-public sites, I try to have them as devoid of dependencies as possible, and this involves Javascript.

Now, I recently decided to give them all a mobile support, which would display a lighter interface with less elements when the device width is small enough. This usually involves taking whatever sidebar was around, and hiding it by default.

The problem was how to make it come back, and for a long time (well, not so long, but it felt like it), I had to have a mini function registered to the onclick event of the menu header. It simply made the rest appear or disappear by changing the CSS class of the menu container (rather than the visibility of the kids directly, to avoid problem when rotating the device. Fortunately, using the :target CSS selector, it is possible to dispose of this trick, and make an (almost) perfect CSS folding menu.

Continue reading