Multi-Frame DropDown Menu.

Dropdown menu which drops on multiple frames.

[Jaya]

Need your help Friends,

I have a page with multiple frames. The layout of the frames in the page is as below:

---------------------
F1
---------------------
.....................
F4 ¦ F5
.....................
---------------------
F3
---------------------

The frame F1 is at the top of the page. The second frame F2 further contains two inner frames - F4 and F5. The frame F3 is at the bottom of the page.

Here is what I need to do. I need to put a javascript dropdown menu in the frame F1. The menu items should fall on the frames F4 and F5 as if there is no frameset in the page. I tried with javascript for the menus which doesn't fall on the lower frames whereas it goes inside the same frame where the menu is laid.

Note : Frame height for each frame is fixed.

Is there a way to do the same. Or can we do using layers?

[tedster]

The way I understand frames is that each one is essentially its own window, as far as the browser is concerned. Some newer browsers are a bit different and their code no longer creates "windowed" frames, but you can still think about frames as being separate windows and not be misled.

So, if you want a dropdown box to start in frame 1 but extend into frames 4 and/or 5, you have a problem as far as I can see.

If you want a layer to become visible only in frame 4 or only in frame 5, you can use javascript to address the correct frame by its name and change the visibility in just that one frame. But again, getting a layer to overlap frames 4 & 5 is not something I can see how to do, even theoretically.

All in all, it sounds mighty complex to me.

[Jaya]

Thanks for the information Ted. But the drop down menu I referred is not a combo box. It is a javascript dropdown menu using layers - the one we find in most of the home pages. For eg. as in microsoft site.

Let me tell you what I want. I have a page with the frameset I have shown before. The height of the frame1 is 25px. I need to use that frame to display a menu which is dynamically generated from an xml file. Some of the menu items in turn contains sub menu-items because of which I wanted to put a dropdown menu(one as in microsoft site). But because of the frame layout, I am not able to make the menu visible on multiple frames.

Hope you understood my requirement.

Is there a way by which I can put such a menu in the frame of fixed(20px) height and make the menu items visible on multiple frames?

I am struggling with this for the past two days :(

Thanx.

[jammy]

You can't make a layer go over frame-borders, but you *could* make a chromeless popup window appear at the top of a users browser (covering frame 1)

Not particularly recommended, but is an *option*:
This would then allow the layered menu to "float" over anything, cos it's a popup window (but cos it's chromeless, it doesn't look like a standard popup (in ie5.5+ only - however, it will degrade nicely for earlier/cross platform)

other than that, unless you made the centre frame into a layer - and had it all layers... you could float whatever you wanted then...

just some thoughts, probably not much help :)

[MikeFoster]

As usual, everyone here is right on.

I'm currently writing a menu system for a client that's using 3 horizontal frames (header, content, footer). The menuBar is in the header frame, and the menuBox appears in the content frame. It's a little tricky but can be done.

The only idea I have for you would involve some of the menuBoxes appearing in the left frame, and the others appearing in the right frame.

That client's site is not yet released - so I can't show it to you. But I might can help with implementation tips/suggestions.

[dcbiker]

have you tried the hiermenu system from http://www.dhtmlab.com/

[Purple Martin]

You can't make a layer cross a frame border (as others have said), but you can have your menu layer appear at the top of the content layer. With appropriate interface design, it'll look as though it's dropped down from the frame above. You can even show a sliver of graphic at the bottom of the top frame that lines up with your menu layer to create a visual join between the clicked menu option in the top frame and the menu layer in the content frame. I've also done a site using this solution with an extra twist: the menu layer starts above the top of the content frame (so it's out of view) and slides down into position, which looks as though it's sliding down from the top frame - it's quite effective.

Beware of scrolling in the content frame - it'll make your menu layer move out of place. The simple answer is to immediately hide the menu layer onScroll, and if the user wants it back they click the menu option in the top frame to show it again. If you need it to stay visible you can write a simple function to reposition it further down the content document as the user scrolls down, so that it still looks as though it's butted up against the top frame - but if you do this, be prepared for a bit of motion flicker.

Have you considered accessibility? Drop-down menus can make your site very un-accessible, so consider providing a navigation alternative (such as links in a site-map page).

[Jaya]

Thanks for the information friends.

I have decided to have links in the page instead of dropdown menus. This works well in the frameset.

Thanks again.