Cross-browser, clean solution for drop-down menus across frames?_问答_开发者

Let me start off by saying I really like Superfish (& jQuery). Unfortunately, this - apparently? - does not offer cross-frame support out of the box.

Situation: extranet website, consisting of 2 frames, divided horizontally. The top frame (the smallest one) contains a menu. When hovering over this menu, the "drop down" content gets displayed in the bottom frame (over the other elements there, of course). Here's an example (and actually, the solution we're using today): http://javascript.cooldev.com/scripts/coolmenu/demos/frames/

So does anyone know a开发者_高级运维 way to build a clean (using standard HTML/CSS and as little as JS as possible) solution? Any help would be appreciated! :)

I guess the armies will take on the »ditch your frames« thing, so I won't. I'm assuming you have informed yourself of frameless alternatives and have come to the conclusion that you need frames (for whatever [absurd] reason).

The short story is: you cannot break out of a frame, same as you can't break out of a window. All content is contained within the frame / window - there is no way to have content bleed through.

That said, you have two options left.

Your parent document happens to be a regular document containing two iframes, and all documents are served from the same host (SOP). In this case your menu-frame can create elements in the parent-frame that actually overlap the iframes themselves. So you could position an element within the parent-frame to appear below the corresponding element of the menu-frame, while having it z-indexed over the content-frame
Your parent-frame is a frameset-document and thus doesn't take any content other than frames. You're shit out of luck. The only thing you can do is have your menu-frame do the same trick described in (1), but append the menu-elements to the content-frame.

Either option sucks. If you have the option, ditch your frames. Any dumb server-side language (php, ruby, python, …) allows you to extract often re-used components (like a navigation) into seperate files and link them in every other document you've got. SSI might be an option, too.

If the only reason you're using a frame is to keep the menus attached to the top of the window, then you can simply use position: fixed in the CSS.

Building a drop-down menu system that crosses frames is like building a normal drop-down menu system (mouse over the menu "head", show the menu "body"; mouse out of the head, hide the body; etc.), except:

Since elements cannot actually cross frame boundaries, the best you can do is to have the head in one frame and the body in the other (like COOLjsMenu).
To coordinate the two halves, you can either (depending on the situation) have one frame directly manipulate the other frame's elements, or pass messages between frames and have each frame manage its own elements.

So the extra complication is how to manage the two halves:

If both frames come from the same origin, then JavaScript from one frame can directly manipulate the other frame's elements. (Since you are using COOLjsMenu, I would assume this is the case for your extranet.)
If frames come from different origins, then they cannot manipulate each other's elements, though you may still be able to pass messages between frames:
- If you only need to support "modern" browsers (Firefox 3+, Chrome, Safari 4+, IE 8+, Opera 9.5+), then you can use window.postMessage().
- If you need to support older browsers (namely IE 6-7), you can use easyXDM (which also uses window.postMessage() if available in the user's browser).
In this case, you will need JavaScript in each frame to manipulate its own elements and communicate with the other frame.

Actually building a cross-frame drop-down menu system is left as an exercise for the reader :-)

You could just use a pure-CSS menu (like http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/). I'm not sure exactly why the navigation is in a different frame, but this will give you the functionality and flexibility to move the drop down lists up or down (by adjusting the padding/margin/top properties in CSS) to fit to the bottom of the frame.

The ideal solution would be to NOT use frames. Instead, you should ideally have your menu setup with a fixed position. The correct CSS for your menu element would be:

position:fixed

You may have to make some other tweaks, such as setting the z-index of your menu to be greater than the rest of your document. If you used fixed positioning, you might be able to get away with using NO javascript. Here are a few examples of menus that use fixed positioning:

Collection of 21 fixed position menus -- For example, the Face Works menu does pretty much the same thing as your menu without using frames.
CSS Floating Menu
CSS: fixed menus

You should note that a frame cannot access content outside of itself. There is no CSS/JavaScript that will let your top frame gain access to the contents of your bottom frame. It would be a security flaw to allow for this to happen. If you really need to use frames then stick with something similar to your current solution.

I hate to play devil's advocate, but you can break out of frames, because at my work we have a JavaScript menu that does just that. It's a very old library but it does do it. You can see the grey frameborders quite clearly and the menu is breaking out of the top frame and appearing over three other frames.

Cross-browser, clean solution for drop-down menus across frames?

We've used drop down menus with cross frame support before without a too much of a problem. One way to do it is with allwebmenus, a powerful javascript menu builder with lots of really great features, and includes cross frame support out of the box: http://www.likno.com/examples.html?example=crossframe

This page explains how likno does it: http://www.likno.com/drop-down-css-menu/compilepropertiescrossframe.htm.

Deluxe menu also does a similar thing: http://deluxe-menu.com/data-samples/cross-frame-horizontal-1-sample.htm and is cheaper if you only want to do it on a single website, but more expensive for multiple sites.