Detailed IFRAME production level three cascading menu

Origins
The task was to be given to new colleagues to do, but because the new colleagues slow, and the function is anxious to use the line, had to do in person.

Task: Adjust the original menu containing only the first level column to a menu that supports level three cascading

implementation : Mouse hover in the first level menu, pop up two levels of the following menu, mouse hover over a level two menu, pop-up three drop-down menu, the legacy code is as follows:

<p id= "main" >    <iframe src= ' navbar.do ' width=800 height=40></iframe> <iframe    src= ' Main_ Content.do ' ></iframe></p>

Problems encountered:

The original function uses the IFRAME to load the page's navigation bar and the content area separately, realizes the above is understandable (frequently uses the IFRAME is not the best practice), but the new added two or three level column destroys the original page structure, because the navigation bar is fixed height, the drop-down menu joins, A fixed height causes the contents of the drop-down menu to be obscured by the IFRAME that contains it.

: The red line is the boundary between the top and bottom two iframe

The first intuitive idea is to put the contents of the navigation bar out of the IFRAME and place it on the main page.

<p id= "main" >    <p id= "Nav-bar" ></p>    <iframe src= ' main_content.do ' ></iframe> </p>

The problem is solved, there are also regrets, that is:

We are not short of yards, the lack of a designer, any design without thinking is the pit father

Think again
Back to this question, pondering the initial design, the author uses two requests to load the navigation bar and page body content area, generally speaking, the first page content area of the business logic is determined, so the content area also need not use IFRAME to achieve, reasonable page layout should be the following look

<p id= "main" >    <p id= "Nav-bar" ></p>    <p id= "content" ></p></p>

Add
Test too hectic running, anxious to say, and found the problem, the drop-down menu can be seen, but the content of the video display is blocking the partial drop-down menu, effect such as:

After the video is loaded, the green part of the drop-down menu is overwritten by the video and the display is incomplete.
Describe the actual business scenario: Video is a third-party procurement service that dynamically generates embed tags and plays the video by dynamically loading third-party scripts in the page

Why
Is it possible to set the Z-index property for dynamically generated embed elements? Very disappointed, not effective.
What is the reason for that?
After discovering the Flash rendering mode wmode parameter, by default Wmode=window, mainly based on efficiency considerations, which led to the default display mode Flash will always cover the location with his coincident all the HTML, set Wmode=opaque can solve such problems, At this point, Flash is not rendered above the browser HTML rendering surface, but rather on the same page as other elements. Specific information can be found here.

The next task is to find the embed element that is dynamically generated by the script, and set the Wmode parameter to opaque, which is the following code:

var timer = setinterval (function () {    var elem = document.getElementsByTagName ("embed") [0];    if (elem) {        elem.setattribute ("wmode", "opaque");        Clearinterval (timer);}    }, 100);

It's OK!
The test found that the problem is still, what is going on, why did not play a role?
Wmode used to set the rendering mode of Flash, because the embed element in our code is dynamically generated, when we find the EMBED element and set the rendering mode for it, at this time the flash has been rendered complete, again set its wmode will not have effect, how to do?

• Contact the vendor to resolve, let its script in the generated EMBED element is the default specified rendering mode for opaque, aging should be slower, and manufacturers of our recommendations whether or not to adopt also unknown.

• Since the embed element is dynamically generated, can we do the same thing ourselves, after we find the EMBED element, we modify the Embed element, delete the embed element generated by the flash manufacturer, and insert our modified EMBED element.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial