FAQ: Navigation (flyout) menus are covered up by other things on the page

Question:

I have navigation menus flyout menus on my site.  On pages that have forms or Flash movies, the navigations get "covered up" and are unusable.  How can I correct this?

Answer:

There is good news and bad news for this.  The bad news: form elements (pull down lists, text fields, etc.) will always cover up navigation menus.  This is specific to the way the browser works and can't be changed by us.  The good news: Flash movies can be made to "behave" so that flyouts cover them up correctly.

Flash movies are added to pages by modifying the HTML.  (This is explained in the FAQ on adding a Macromedia Flash file to a web page.)  You can make some further modifications to the Flash HTML on a page to allow the Flash to be covered up by a flyout.  There are two modifications that will allow this; you must perform both modifications by editing the HTML of your page.

  1. You can add a line of HTML to the Flash HTML that causes the flash to be "transparent" when interacting with the nav menu. The line is:

    <param name="wmode" value="transparent">

    This can be lumped together with the other "param" lines in your Flash HTML code.

  2. You also have to add a parameter to your "embed" tag. The parameter is wmode="transparent". Therefore, a complete embed tag may look like this:

    <embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="100" wmode="transparent"></embed>

Below is a code snippet that includes both these elements as an example:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100" height="100">
<param name="movie" value="flash.swf">
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="100" wmode="transparent"></embed>
</object>

Again, for more information on Flash movies and HTML, see the FAQ on adding a Macromedia Flash file to a web page.