Information
I am always being asked about using my dropdown or flyout menus over the top of Flash object. I do have an answer in the FAQs which point to another site shich I thought had the answer.
It wasn't until I had a task recently to help add one of my menus to a website that I found this answer was not quite right.
So I have produced this demonstration to show how it should be done.
If you look at the first manu you will see (or not see) that the flyout sublevels do not show above the Flash object and are in fact covered by this. Changing the z-index of the menu has no effect.
The second menu uses the advice given in the FAQs page link. This adds <param name="wmode" value="transparent"> and wmode="transparent" to the Flash object. You will notice that as the page background is white the Flash object now has a white background.
So the answer is to add a little extra styling to the Flash object to make the background black, and menu 3 shows how with this styling we get back to the original look of the Flash object but with the flyouts now visible on top.
Finally, if you are using IE6 or IE7 you may notice that when hovering over Flash objects you get a popup tool tip and the object acts like a link. To stop this from happening you can use a simple external javascript routine 'flashfix.js'. This MUST be run as an external file for it to work correctly.
onload = function() {
theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML;
}
}
and add the following line in the page head:
<script type="text/javascript" src="flashfix.js"></script>
Oh, and before anyone emails...I know that the object tag doesn't validate when used with xhtml1.0 strict.
Donations
Please consider making a donation if you wish to use this menu.
Terms and Conditions
This menu can be used subject to the following terms and conditions.
- You may use this menu in your 'paid projects' for client websites.
- You may use this menu as part of an application interface.
- You may use this menu on personal and commercial websites.
- You may NOT place this menu on another site for others to download.
- You may NOT redistrubute or resell this menu.
- Users agree not to remove or edit the credit notice within the stylesheet, or claim that this menu is their own.
Copyright
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the 'Support CSSplay' fund is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
Recommended Sites
- web hosting, dedicated servers
web reseller, managed servers - SEO Company
SEO company based in Manchester - Web design in Dorset
Bournmouth based web design agency - SEO
First Rate - Australian SEO Company - VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo
"The 
web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth
CSS play pages
