меню на javascript - Компьютерный форум OSzone.net

извольтес

<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div class="ItemOff" onmouseover="javascript:wmItemOn(this,0,'ItemOn','ItemOff',null,null);"><a class="wmLink" href="main.html" target="main">главная</a></div></td>
<td><div class="ItemOff" onmouseover="javascript:wmItemOn(this,0,'ItemOn','ItemOff','interest',WM_BOTTOM);"><a class="wmLink" href="interest.html" target="main">интересно »</a></div></td>
<td><div class="ItemOff" onmouseover="javascript:wmItemOn(this,0,'ItemOn','ItemOff','support',WM_BOTTOM);"><a class="wmLink" href="support.html" target="main">поддержка »</a></div></td>
<td><div class="ItemOff" onmouseover="javascript:wmItemOn(this,0,'ItemOn','ItemOff','boss',WM_BOTTOM);"><a class="wmLink" href="stat.html" target="main">босам »</a></div></td>
</tr>
</table>

<div id="interest" class="wmSubMenuHidden">
<div class="ItemOff" onmouseover="javascript:wmItemOn(this,1,'ItemOn','ItemOff',null,null);"><a class="wmLink" href="interest/phone.html" target="main">телефоны</a></div>
<div class="ItemOff" onmouseover="javascript:wmItemOn(this,1,'ItemOn','ItemOff',null,null);"><a class="wmLink" href="interest/holiday.html" target="main">праздники</a></div>

ну и т.п.
сам скрипт взят с http://www.firdus.com/software/webMenu/webMenu.html

сам скрипт
/*
* ----------------------------------------------------------------------------
* WebMenu
*
* Version: 1.1
* Release date: 2005.03.05
*
* Copyright (c) Amir Firdus (Firdus Software), 2005.
* All rights reserved.
*
* License:
* This software is free as long as this header is not removed.
* Firdus Software welcomes improvements, suggestions as well as
* news about successful application. To contact us, please use either
* email or message board available at www.firdus.com.
* ----------------------------------------------------------------------------
*/

/*
* Notes:
*
* Public methods, those intended to be used on a web page, are prefixed with wm.
*
*/

// *** submenu position *******************************************************

// Two positions are available for now. New positions can be easily added.
var WM_BOTTOM = "bottom";
var WM_RIGHT = "right";

// Margin values in pixels. Allows for submenu position to be fine-tuned.
var MARGIN_BOTTOM = 1;
var MARGIN_RIGHT = 1;

// *** item activation ********************************************************

// One set of global values is enough,
// no one can navigate more than one menu at the time.

// There can be only one active item at the time on the whole page.
var currentItem = null;

// There is only one way to reach a submenu.
// The trail to that submenu is kept in this array.
// Every time an item is activated trail has to be reset.
// All submenus after the current level removed and the current one added.
var menuTrail = new Array();

// This is needed when switching from one menu to another with two different
// styles, otherwise last element gets styleOff from the other menu.
var currentStyleOff = null;

// This function activates an item.
// An item is active when mouse is over that item.
// Parameters:
// - item . . . . . . . item to be activated
// - level . . . . . . . level of the submenu
// - styleOn . . . . . . style class name when item is active
// - styleOff. . . . . . style class name when item is not active
// - submenuId . . . . . id of the submenu that is to be attached to this item, pass null if no submenu
// - submenuPosition . . position of the submenu, ex: WM_RIGHT or WM_BOTTOM, pass null if no submenu
function wmItemOn(item, level, styleOn, styleOff, submenuId, submenuPosition) {

debug("level:" + level + ", styleOn:" + styleOn + ", styleOff:" + styleOff + ", submenu:" + submenuId + "/" + submenuPosition);

// assign timer off function to the item - makes html code cleaner
if (item.onmouseout == null) {
item.onmouseout = startOffTimer;
}

// stop timer on entry
stopOffTimer();

// turn off previous item
if (currentItem != null) {
if (styleOff != currentStyleOff && currentStyleOff != null) {
currentItem.className = currentStyleOff;
} else {
currentItem.className = styleOff;
}
}

// make this item new current item
currentItem = item;
item.className = styleOn;
currentStyleOff = styleOff;

if (submenuId != null) {

// take care of attached submenu

hide(level);

var menu = document.getElementById(submenuId);

// item dimensions: item.offsetHeight, item.offsetWidth
if (submenuPosition == WM_BOTTOM) {
menu.style.top = findOffsetTop(item) + item.offsetHeight + MARGIN_BOTTOM;
menu.style.left = findOffsetLeft(item);
}

if (submenuPosition == WM_RIGHT) {
menu.style.top = findOffsetTop(item);
menu.style.left = findOffsetLeft(item) + item.offsetWidth + MARGIN_RIGHT;
}

menu.style.visibility = "visible";

menuTrail[level] = menu;
} else {

// item has no submenu attached, update the menuTrail

hide(level);
}

}

// Hide all submenus after the level passed in, inclusive.
function hide(level) {
for (var i = level; i < menuTrail.length; i++) {
menuTrail[i].style.visibility = "hidden";
}
}

// *** timer ******************************************************************

// Timer is needed to turn off all the items and submenus,
// once mouse moves away from the menu.

var timerID = null;
var timerOn = false;
var timecount = 250;

function startOffTimer() {
if (timerOn == false) {
timerID = setTimeout("offAll()", timecount);
timerOn = true;
}
}

function stopOffTimer() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}

// Hide all submenus and turn current item off.
function offAll() {
hide(0);

if (currentStyleOff != null) {
currentItem.className = currentStyleOff;
}

debug("All off by timer.");
}

// *** debug ******************************************************************

// Print text to the debug element. If the element that debugId is pointing to
// is not found on the page, it does nothing.

var debugId = "wmDebug";

function debug(text) {
var debug = document.getElementById(debugId);
if (debug != null) {
debug.innerHTML = "» " + text + "<br>" + debug.innerHTML;
}
}

// *** position ***************************************************************

// Utility code to calculate element position.

// Find total left offset.
function findOffsetLeft(obj){
var curleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}

return curleft;
}

// Find total top offset.
function findOffsetTop(obj){
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent){
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
}else if (obj.y){
curtop += obj.y;
}

return curtop;
}