Cross-Browser.com

xMenu1 is a simple menu for times when a simple menu is all that's needed :-) It opens on click or mouseover and closes on mouseout.

xMenu1A is a variation on xMenu1. The menu slides open and slides closed.

xMenu1B is a variation on xMenu1A. It requires a click to close, and opening a menu closes all other open menus.

This cat needs a click to open its menu. This cat needs a mouseover to open its menu.

<script type='text/javascript' src='../x.js'></script>
<script type='text/javascript'>
window.onload = function()
{
  new xMenu1('trigger1', 'menu1', 10, 'click');
             
  new xMenu1('trigger2', 'menu2', 10, 'mouseover');
}

/* xMenu1 Object Prototype

  Parameters:
    triggerId   - id string of trigger element.
    menuId      - id string of menu.
    mouseMargin - integer margin around menu;
                  when mouse is outside this margin the menu is hid.
    openEvent   - string name of event on which to open menu ('click', 'mouseover', etc).
*/

function xMenu1(triggerId, menuId, mouseMargin, openEvent)
{
  var isOpen = false;
  var trg = xGetElementById(triggerId);
  var mnu = xGetElementById(menuId);
  if (trg && mnu) {
    xAddEventListener(trg, openEvent, onOpen, false);
  }
  function onOpen()
  {
    if (!isOpen) {
      xMoveTo(mnu, xPageX(trg), xPageY(trg) + xHeight(trg));
      mnu.style.visibility = 'visible';
      xAddEventListener(document, 'mousemove', onMousemove, false);
      isOpen = true;
    }
  }
  function onMousemove(ev)
  {
    var e = new xEvent(ev);
    if (!xHasPoint(mnu, e.pageX, e.pageY, -mouseMargin) &&
        !xHasPoint(trg, e.pageX, e.pageY, -mouseMargin))
    {
      mnu.style.visibility = 'hidden';
      xRemoveEventListener(document, 'mousemove', onMousemove, false);
      isOpen = false;
    }
  }
} // end xMenu1
</script>

xMenu1A is a variation on xMenu1. The menu slides open and slides closed.

This cat needs a click to open its menu. This cat needs a mouseover to open its menu. Hmmm... they look just like those other cats ;-)

<script type='text/javascript' src='../x.js'></script>
<script type='text/javascript' src='../lib/xslideto.js'></script>
<script type='text/javascript'>
window.onload = function()
{
  new xMenu1A('trigger3', 'menu3', 10, 500, 'click');    
                                                         
  new xMenu1A('trigger4', 'menu4', 10, 500, 'mouseover');
}

/* xMenu1A Object Prototype

  Parameters:
    triggerId   - id string of trigger element.
    menuId      - id string of menu.
    mouseMargin - integer margin around menu;
                  when mouse is outside this margin the menu is hid.
    slideTime   - integer time for menu slide (in milliseconds).
    openEvent   - string name of event on which to open menu ('click', 'mouseover', etc).
*/

function xMenu1A(triggerId, menuId, mouseMargin, slideTime, openEvent)
{
  var isOpen = false;
  var trg = xGetElementById(triggerId);
  var mnu = xGetElementById(menuId);
  if (trg && mnu) {
    mnu.style.visibility = 'hidden';
    xAddEventListener(trg, openEvent, onOpen, false);
  }
  function onOpen()
  {
    if (!isOpen) {
      xMoveTo(mnu, xPageX(trg), xPageY(trg));
      mnu.style.visibility = 'visible';
      xSlideTo(mnu, xPageX(trg), xPageY(trg) + xHeight(trg), slideTime);
      xAddEventListener(document, 'mousemove', onMousemove, false);
      isOpen = true;
    }
  }
  function onMousemove(ev)
  {
    var e = new xEvent(ev);
    if (!xHasPoint(mnu, e.pageX, e.pageY, -mouseMargin) &&
        !xHasPoint(trg, e.pageX, e.pageY, -mouseMargin))
    {
      xRemoveEventListener(document, 'mousemove', onMousemove, false);
      xSlideTo(mnu, xPageX(trg), xPageY(trg), slideTime);
      setTimeout("xGetElementById('" + menuId + "').style.visibility='hidden'", slideTime);
      isOpen = false;
    }
  }
} // end xMenu1A
</script>

xMenu1B is a variation on xMenu1A. It requires a click to close the menu, and opening a menu closes all other open menus. The 'open' event for this menu can be either onclick or onmouseover.

This cat needs a click to open its menu. This cat needs a mouseover to open its menu. I think they're getting tired of this game ;-)

<script type='text/javascript' src='../x.js'></script>
<script type='text/javascript' src='../lib/xslideto.js'></script>
<script type='text/javascript'>
window.onload = function()
{
  new xMenu1B('trigger5', 'closeTrigger5', 'menu5', 500, true);
             
  new xMenu1B('trigger6', 'closeTrigger6', 'menu6', 500, false);
}

/* xMenu1B Object Prototype

  Parameters:
    openTriggerId  - id string of element which shows menu.
    closeTriggerId - id string of element which closes menu.
    menuId         - id string of menu.
    slideTime      - integer time for menu slide (in milliseconds).
    bOnClick       - if true menu will open on click, else on mouseover.
*/

function xMenu1B(openTriggerId, closeTriggerId, menuId, slideTime, bOnClick)
{
  xMenu1B.instances[xMenu1B.instances.length] = this;
  var isOpen = false;
  var oTrg = xGetElementById(openTriggerId);
  var cTrg = xGetElementById(closeTriggerId);
  var mnu = xGetElementById(menuId);
  if (oTrg && cTrg && mnu) {
    mnu.style.visibility = 'hidden';
    if (bOnClick) oTrg.onclick = openOnEvent;
    else oTrg.onmouseover = openOnEvent;
    cTrg.onclick = closeOnClick;
  }
  function openOnEvent()
  {
    if (!isOpen) {
      for (var i = 0; i < xMenu1B.instances.length; ++i) {
        xMenu1B.instances[i].close();
      }
      xMoveTo(mnu, xPageX(oTrg), xPageY(oTrg));
      mnu.style.visibility = 'visible';
      xSlideTo(mnu, xPageX(oTrg), xPageY(oTrg) + xHeight(oTrg), slideTime);
      isOpen = true;
    }
  }
  function closeOnClick()
  {
    if (isOpen) {
      xSlideTo(mnu, xPageX(oTrg), xPageY(oTrg), slideTime);
      setTimeout("xGetElementById('" + menuId + "').style.visibility='hidden'", slideTime);
      isOpen = false;
    }
  }
  this.close = function()
  {
    closeOnClick();
  }
} // end xMenu1B

xMenu1B.instances = new Array(); // static member of xMenu1B
</script>

xMenu1C is a variation on xMenu1A. The same menu is applied to multiple triggers. The 'open' event can be either click or mouseover.

Hi kitties, it's been a long time, eh? My, my! The kitties have been busy!

I tested this page on Win2K with Opera 7.51, Mozilla 1.7.2, and IE 6.0. The only difference was that Opera is the only one that respects the z-index setting on the trigger. Altho I thought I saw that work in Moz a few times... but now it doesn't... oh well :-)