Horizontal mouseOver Menu

CBE Menu Example 1

In preparation for adding new features to menu9, I've added some of those features to menu1. This menu was due for a re-write anyhow.

A mouseOver on a menu label opens a menu box, and the box remains open until the mouse is no longer over the box nor the label.

Multiple menus can be instantiated on the same page.

If a menu box will be clipped by the right edge of the window it will be aligned to the left side of its label. If a menu box will be clipped by the bottom edge of the window it will be aligned to the top side of its label. Resize the window and watch what happens to the horizontal menu. Note that the label and box positions are not calculated in real-time. They are only calculated when you call the menu's paint() method.

Different widths can be specified for each label and box.

For each menu, you specify the position of the first label and all other positions are calculated automatically.

Each menu has its own z-index which is applied to the entire menu.

Each menu has its own set of colors.

Read more about the marker technique being used by menu1.

Cross-Browser.com

Debug

Usage (Javascript)

  var mark1, menu1, menu2, menu3;
  function windowOnload() {
    mark1 = cbeGetElementById('menuMarker1').cbe;
    menu1 = new cbeMenu(
      true,                       // horizontal,
      mark1.pageX(), mark1.pageY(), 3, // menuX, menuY, menuZ
      [75,75,75], 20,             // lblWidthsArray, lblHeight,
      [140,170,155],              // boxWidthsArray,
      '#ffccff', '#000080',       // activeColor, inactiveColor,
      '#FF6600', '#CC6600',       // activeBkgnd, inactiveBkgnd
      '#FF6600'                   // boxBkgnd
    );
    menu2 = new cbeMenu(
      false,                      // horizontal,
      0, window.cbe.height() - 60, 2, // menuX, menuY, menuZ
      [75,75,75], 20,                // lblWidthsArray, lblHeight,
      [140,170,155],              // boxWidthsArray,
      '#000080', '#FF9999',       // activeColor, inactiveColor,
      '#00CCFF', '#0099FF',       // activeBkgnd, inactiveBkgnd
      '#00CCFF'                   // boxBkgnd
    );
    menu3 = new cbeMenu(
      false,                      // horizontal,
      window.cbe.width() - 75, 0, 1, // menuX, menuY, menuZ
      [75,75,75], 20,             // lblWidthsArray, lblHeight,
      [140,170,155],              // boxWidthsArray,
      '#000080', '#ffccff',       // activeColor, inactiveColor,
      '#ffccff', '#000080',       // activeBkgnd, inactiveBkgnd
      '#ffccff'                   // boxBkgnd
    );
    window.cbe.addEventListener("resize", resizeListener, false);
  }
  
  function resizeListener(e) {
    if (is.opera5or6 || is.nav4) {
      location.replace(location.href);
    }
    else {
      menu1.paint(mark1.pageX(), mark1.pageY());
      menu2.paint(0, window.cbe.height() - 60);
      menu3.paint(window.cbe.width() - menu3.lblW[0], 0);
    }
  }

Usage (HTML)

Here is the id naming convention that is required by the menu code:

labelML - where M is the menu number and L is the label number for this menu

boxMB - where M is the menu number and B is the box number for this menu

The following is the HTML for the second menu.

  <!-- second menu -->

  <div id='label21' class='mLabel'>Forums</div>
  <div id='box21' class='mBox'>
    <a class="m" href="">Webmastering</a>
    <a class="m" href="">Operating Systems</a>
    <a class="m" href="">Internet</a>
    <a class="m" href="">Miscellaneous</a>
    <a class="m" href="">Community</a>
  </div>

  <div id='label22' class='mLabel'>Menus</div>
  <div id='box22' class='mBox'>
    <a class="m" href="">This Menu</a>
    <a class="m" href="">Vertical onMouseOver</a>
    <a class="m" href="">Horizontal Graphical</a>
    <a class="m" href="">Vertical Floating</a>
    <a class="m" href="">Horizontal onClick</a>
    <a class="m" href="">cbeTreeMenu</a>
    <a class="m" href="">Horizontal onMouseOver</a>
    <a class="m" href="">Horizontal Collapsible</a>
    <a class="m" href="">Horizontal Cascading</a>
    <a class="m" href="">Horzizontal Floating</a>
    <a class="m" href="">H. Floating Cascading</a>
  </div>

  <div id='label23' class='mLabel'>Sites</div>
  <div id='box23' class='mBox'>
    <a class="m" href="">LineOfLight.com</a>
    <a class="m" href="">Cross-Browser.com</a>
    <a class="m" href="">mFoster.com</a>
    <a class="m" href="">FosterElectronics.com</a>
    <a class="m" href="">MitchellFoster.com</a>
    <a class="m" href="">Absolute Magnitude</a>
  </div>

Last Update

This page was last updated on 7 Dec 02

Forums
Webmastering Operating Systems Internet Miscellaneous Community
Menus
This Menu Vertical onMouseOver Horizontal Graphical Vertical Floating Horizontal onClick cbeTreeMenu Horizontal onMouseOver Horizontal Collapsible Horizontal Cascading Horzizontal Floating H. Floating Cascading
Sites
LineOfLight.com Cross-Browser.com mFoster.com FosterElectronics.com MitchellFoster.com Absolute Magnitude
Forums
Webmastering Operating Systems Internet Miscellaneous Community
Menus
This Menu Vertical onMouseOver Horizontal Graphical Vertical Floating Horizontal onClick cbeTreeMenu Horizontal onMouseOver Horizontal Collapsible Horizontal Cascading Horzizontal Floating H. Floating Cascading
Sites
LineOfLight.com Cross-Browser.com mFoster.com FosterElectronics.com MitchellFoster.com Absolute Magnitude
Forums
Webmastering Operating Systems Internet Miscellaneous Community
Menus
This Menu Vertical onMouseOver Horizontal Graphical Vertical Floating Horizontal onClick cbeTreeMenu Horizontal onMouseOver Horizontal Collapsible Horizontal Cascading Horzizontal Floating H. Floating Cascading
Sites
LineOfLight.com Cross-Browser.com mFoster.com FosterElectronics.com MitchellFoster.com Absolute Magnitude