stunicholls.com

...exploring the possibilities

Simple click menu

1st November 2007

Copyright © 2007 stunicholls.com

Next Demonstration

Information

I have had many emails asking if it is possible to have a menu where you click on the top level items to cause the sub menu to drop down and then click again to close it.
Well using just CSS this would not be possible, as the click (:active/:focus) state is only available on links and as all browsers except IE5.x and IE6 do not allow nested links then there is no way to get the sub menu to show. Even in IE5.x and IE6 which can be made to recognise nested links this method would not work. The first click would set the :active/:focus state of the top level link but the next click would only serve to lose the :active/:focus state and the menu would collapse.

HOWEVER....using a similar method to that used by 'suckerfish', it is possible to use just a little javascript to change the CSS 'onClick' and provide a toggle state to the top level list items.

The above menu is just an unordered list (no conditional comments, behaviors or htc file) using a very small javascript routine to toggle the sub menus on and off.

Just click any top level list item to open the sub level and click again to close it or click on another top level list item.

This routine can be applied to any nested list information such as a 'more' button.

Tested in IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) and Safari (iPod Touch).

Download

All the files, except the photograph which is copyrighted, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.

Download simple_menu.zip