CSSPLAY
Doing it with style
Doing it with style
Hover over the menu items and the flyouts fly under the Flash object
Adding wmode="transparent" to the Flash object cures the menu but gives the flash object the wrong background.
Restyle the Flash object to restore the black background and it works as required.
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>
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
