Mobile Friendly Website

CSSPLAY

Doing it with style

CSS MENUSA flyout menu over flash objects

Date : 29th February 2008

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

The Problem.....

Hover over the menu items and the flyouts fly under the Flash object



A Solution....

Adding wmode="transparent" to the Flash object cures the menu but gives the flash object the wrong background.



The Right Solution....

Restyle the Flash object to restore the black background and it works as required.





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>



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 retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  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 again a support donation 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.

Terms and Conditions

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

  1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page