CSS play - Responsive Droplist Menu

23rd April 2013

For IE7+, Firefox, Chrome, Safari, Opera, iOS and Android OS, including Touch Screen Devices

Information

After many recent request for responsive multi-level menus I have now converted one of my droplist menus so that it responds to variations in browser sizes.
Because not all browsers support @media queries I have included a small jQuery/javascript routine that gives support for IE7 and IE8.
The jQuery/javascript is very simple and just switches in/out an IE7 & IE8 specific stylesheet depending on the screen width.
I have also used css3 columns styles which is supported in all the latest browsers but degrades well in those browsers without support.
So this is a droplist menu with top level links that works in the following browsers:

COMMENTS



Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.