menuing

The last few days I have been looking for a way to display a tree menu of categories and sub categories on one of my websites. First I wanted to see if there were any CSS solutions. There were, but unfortunately neither of them suitable for my purposes.

One type is to use fragment identifiers on the sub menus and link to these from the sub menu title. Using the CSS :target pseudo selector, you can then open the sub menu when the sub menu title is clicked. You can see an example here: CSS Tree Menu example, which is from this article: Pure CSS expanding tree menu.

I don't think this technique would work with multi level tree menus (which is what I have). And another problem is that the browser will jump to the fragment linked to. Not a problem in that example menu that easily fits on a single page with no scrollbar. But it is an issue in most real life situations.

The other technique involves inserting checkboxes into your menu and using the :checked pseudo selector. A very clever idea, but I don't really like polluting my markup with a form and checkboxes just to achieve an effect without using javascript. You can see this one in action here: CSS Tree Menu demo, acommpanying article here: Pure CSS collapsible tree menu.

So instead I wrote some jquery to make my menu collapse / expand in a tree menu style. However, after doing this I realised that it wasn't that great as it stopped people clicking through on the category links when they contained sub categories. I abandoned my (working) javascript and decided to just change the settings in the wordpress admin panel so that the menus would display as a drop down instead of all printed out in the sidebar. Not ideal, but cleans up the sidebar, and allows users to choose whatever category or sub category they want to view.