Re: dynamic menu

From: Ken Cox [Microsoft MVP] (BANSPAMken_cox_at_sympatico.ca)
Date: 12/07/04 

Date: Tue, 7 Dec 2004 09:00:25 -0500

The problem occurs because of the z-index behaviour of HTML elements.
There's some help in this article:

INFO: How the Z-index Attribute Works for HTML Elements

http://support.microsoft.com/default.aspx?scid=KB;EN-US;q177378&

Here's an explanation that Joseph King of Coalesys posted some time ago:

"So what that means is an IFrame can block out the select box, and be under
a
DIV at the same time. And that is how it is done. We dynamically write the
IFrame to the document, size it to the dimension of the popup DIV, and shim
between the popup DIV and the rest of the page.

There is another, more complex trick you can do. And that is to take a DIV
and copy it's inner content to the new IFrame itself, and then just start
treating the IFrame like you would have been treating the DIV. We were
doing this in our 2.0 betas, and it worked quite well. And it even works
going back to IE 4.0. However, it did require a kind of complex inter-frame
JavaScript bridge to maintain all the features in the product (Once you
write your DIV contents into the IFrame, your popup is actually a whole new
document with it's own JavaScript execution environment). Another caveat is
that in IE 5.0 and earlier, mouse over and mouse out events need to be
handled differently when the mouse is traversing frames (they don't always
fire in the expected order). So, although we had it working quite well, it
wasn't KISS. The shim technique is, so we went decided to go with that.
For IE 5.0, we continue hiding the select boxes as we have done in the
past."

"tribal boy" <anonymous@discussions.microsoft.com> wrote in message
news:17fa01c4dbc0$1a75fb80$a301280a@phx.gbl...
>
> Guys,
>
> I am using a dynamic menu which uses xml,xsl a css file
> and javascript.
>
> This works fine when there are no server controls around
> or underneath it.
>
> The problem is whenever the menu encounters a server
> control, it closes itself.
>
> How Can I get around this. I guess that the server
> controls are getting rendered (refreshed) and this is
> preventing the menu from being shown
>
> I would appreciate if any one can help me out on this
>
> please find the js & css files below
>
> Thanks
>
> /*===========================================*/
>
> var eOpenMenu = null;
>
> function OpenMenu(eSrc,eMenu)
> {
> eMenu.style.left = eSrc.offsetLeft +
> divMenuBar.offsetLeft;
> //eMenu.style.top =
> divMenuBar.offsetHeight + divMenuBar.offsetTop;
>
> eMenu.style.top = divMenuBar.offsetHeight
> + divMenuBar.offsetTop + 33 + 12;
>
> eMenu.style.visibility = "visible";
> eOpenMenu = eMenu;
> }
>
> function CloseMenu(eMenu)
> {
> eMenu.style.visibility = "hidden";
> eOpenMenu = null;
> }
>
> function document.onmouseover()
> {
> var eSrc = window.event.srcElement;
> if ("clsMenuBarItem" == eSrc.className)
> {
> eSrc.style.color = "Black";
> var eMenu = document.all
> [eSrc.id.replace("tdMenuBarItem","divMenu")];
> if (eOpenMenu && eOpenMenu !=
> eMenu)
> {
> CloseMenu(eOpenMenu);
> }
> if (eMenu)
> {
> OpenMenu(eSrc,eMenu);
> }
> }
> else if (eOpenMenu && !eOpenMenu.contains
> (eSrc) && !divMenuBar.contains(eSrc))
> {
> CloseMenu(eOpenMenu);
> }
> }
>
> function document.onmouseout()
> {
> var eSrc = window.event.srcElement;
> if ("clsMenuBarItem" == eSrc.className)
> {
> eSrc.style.color = "";
> }
> }
>
> /*==========================================*/
>
> *====================================================
> * Styles for the dynamic menu
> *====================================================*/
>
> BODY
> {
> font-size: 70%;
> font-family: verdana;
> }
>
> H1
> {
> font-size: 120%;
> font-style: italic;
> }
>
> /*Background color for main navigation panel*/
> DIV#divMenuBar
> {
> background-color: #c00000;
> }
>
> /*Main menu items and separator*/
> TABLE#tblMenuBar TD
> {
> padding-right: 5px;
> padding-left: 5px;
> font-weight: bold;
> font-size: 9pt;
> padding-bottom: 0px;
> cursor: default;
> color: white;
> padding-top: 0px;
> font-family: Arial;
> background-color: #c00000;
> }
>
> /*Used for on mouse over*/
> TABLE#tblMenuBar TD.clsMenuBarItem
> {
> font-weight: bold;
> cursor: hand;
> }
>
> DIV.clsMenu
> {
> padding-right: 5px;
> border-top: white 1px solid;
> padding-left: 8px;
> font-size: 8pt;
> visibility: hidden;
> padding-bottom: 5px;
> width: 130px;
> color: white;
> padding-top: 5px;
> font-family: arial,helvetica;
> position: absolute;
> background-color: black;
> }
>
> /*All drop down items */
> DIV.clsMenu A
> {
> font-weight: bold;
> color: white;
> font-size: 8pt;
> font-family: arial,helvetica;
> background-color: black;
> text-decoration: none;
> }
>
> /*On mouse over the drop down menu items */
> DIV.clsMenu A:hover
> {
> color: red;
> }
>
> BUTTON
> {
> font-size: 100%;
> font-family: tahoma;
> }
>
> /*========================================================
> ========*/
>