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
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); } }
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>
This page was last updated on 7 Dec 02