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

Question

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! :)

Answer 1

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.

1. 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
2. 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.

Answer 2

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.

Answer 3

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 :-)