Dropdown Menus

With Internet Explorer 6 now dead it is no longer necessary to involve JavaScript in the operation of any dropdown menus that you wish to include in your page. Multi-level vertical and horizontal menus can now be created entirely with CSS.

If your site still does have a significant number of visitors using IE6 then a small change to the CSS and the addition of a small amount of JavaScript will allow the menu to function in that browser as well. The change that you need to make to the CSS is to amend the line that changes the menu position on :hover to add a second condition to apply that same position when the element has a specific class (which we will add while the mouse is over the element and remove when the mouse moves off the element using JavaScript).

#nav li:hover ul, #nav li.sfh ul {left: 0;}

To install the Javascript that will apply the 'sfh' class as necessary as well as to correct for IE6 not supporting position:fixed simply copy the following code and save it as sfmenu.js.

JavaScript

This is then attached into your web page using the following code which only loads the script for IE6 and earlier.

<!--[if lt IE7]>
<script type="text/javascript" src="sfmenu.js">
</script>
<[endif]-->

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate