Multiple level drop down menus using CSS (Suckerfish Menus)  
I have been looking into adding drop down menus to a web site I am building at present and I have found some examples of coding them using Cascading Style Sheets instead of complex JavaScript which is very browser dependent. I first found it on the Met Offfice web site where I was looking at the source code. The original idea was from Patrick Griffiths and Dan Webb and the original Suckerfish Dropdowns article published in A List Apart proved to be a popular way of implementing lightweight, accessible CSS-based dropdown menus that accommodated Internet Explorer by mimicking the :hover pseudo-class.

Since then they have been considerably refined and involve just a dozen lines of JavaScript to bring compliance to the CSS standards to Internet Explorer, have greater compatibility (they now work in Opera and Safari without a hack in sight) and can have multiple-levels. The latest information can be found at HTML Dog and there is generator for advanced versions at PixoPoint .

I have put the CSS required into a file which can be included on every page where the Dropdowns are needed and likewise the JavaScript. There is a test page with all the current contents of the .css and .js files at New Document Template with Dropdown Menu

[ add comment ] ( 1 view )   |  permalink  |   ( 2.9 / 273 )

| 1 | Next> Last>>