They don't work very well in IE7 either.
This is not a good idea. You've tangled up your style and script.
This doesn't make any sense to me. Why would you set a variable that
holds a color to a class name.
Yes. Search this group for a recent thread on popup menus.
Actually, let me save you some time. I just updated my menu code to
support special effects. And like that ridiculous burmees thing it
supports background images and rollovers (everything does.) Unlike
that one, this functionality is not tangled up in the script. Another
difference is that mine is free for any use. Those burmees people are
laughably trying to charge businesses to use theirs. I guess they
want to recoup some of their seven year investment in its development.
Anyway, I've tested mine on IE6/7, Opera 9, Opera Mini, Firefox 2 and
Windows Safari Beta and a recent Motorola phone. Be forewarned that
it has been tested on nothing else and is less than two days old (this
version is less than two minutes old.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menus</title>
<style type="text/css" media="all">
ul.menubar { list-style-type:none;padding:0;margin:0 }
ul.menubar a, ul.menuPopup a { padding: 0 .25em 0 .25em }
ul.menubar li { margin:0;padding:0;display:inline}
ul.menubar li a:link, ul.menubar li a:visited { text-decoration:none }
ul.menubar li a:hover { background-color:#0000DD;color:white }
ul.menuPopup { list-style-type:none;padding:0;margin:0;border
utset
2px;background-color:threedface;color:windowtext;z-index:1 }
ul.menuPopup li { white-space:nowrap;display:block;width:auto }
ul.menuPopup li a { width:auto }
ul.menuPopup li a:link, ul.menuPopup li a:visited { text-
decoration:none }
ul.menuPopup li a:hover { background-color:#0000DD;color:white }
ul.menuPopup li a.popup:after { content: "\0020\00BB"; }
#myMenubarVertical.menubar { width:6em;margin-bottom:1em }
#myMenubarVertical.menubar li { display:block;width:auto }
#myMenubarVertical.menubar li a { width:auto }
#testPopupMenu { margin:1em 0 0 0;padding:0;border:none }
body {background-color:threedface;color:windowtext}
</style>
<!--[if !IE]>-->
<style type="text/css" media="all">
#myMenubarVertical.menubar li a, ul.menuPopup li a { display:block }
</style>
<!--<![endif]-->
<!--[if gt IE 6]>
<style type="text/css" media="all">
ul.menubar { display:inline-block }
#myMenubarVertical.menubar li a, ul.menuPopup li a { display:block }
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="all">
ul.menubar { display:inline-block }
ul.menubar li, ul.menubar li a, ul.menuPopup li, ul.menuPopup li a
{ height:1% }
ul.menuPopup li, ul.menuPopup li a, #myMenubarVertical.menubar li,
#myMenubarVertical.menubar li a { width:6em; zoom:1 }
</style>
<![endif]-->
<style type="text/css" media="handheld">
body { margin:4px }
</style>
<style type="text/css" media="print">
body {font-family:serif}
ul.menubar, ul.menuPopup { list-style-type:disc;padding:0 0 0 1em }
ul.menuPopup { border:none;background-
color:white;color:black;position:static !important;display:block !
important }
ul.menuPopup li a {color:black;background-color:inherit}
ul.menuPopup li a.popup:after { content: ""; }
#testPopupMenu { display:none }
</style>
<script type="text/javascript">
var global = this;
if (this.document && this.document.getElementsByTagName &&
this.document.getElementById) {
(function() {
var doc = global.document;
var html = (doc.getElementsByTagName)?
doc.getElementsByTagName('html')[0]:doc.documentElement;
if (!html && doc.all && doc.all[0]) {
html = (doc.all[0].tagName == '!')?
doc.all[0]:doc.all[1];
}
if (html && html.style) {
if (typeof(html.style.visibility) == 'string')
{ global.document.write('<style type="text/css"
media="all">#myMenubar, #myMenubarVertical, #myPopupMenu,
#testPopupMenu { visibility:hidden }<\/style>'); }
}
})();
this.onload = function() {
// Global options
var menuPause = 500; // Delay before hiding/showing sub-menu
var startWithRollover = false; // Default requires click to show
initial top-level item (second click hides)
// Set to true to allow rollover to show top-level menus (click
navigates)
var cbStart, cbFinish; // Callbacks
var effectFPS = 60; // Effects
var effectDuration = 400;
var effect;
var effectEase;
var doc = global.document;
var el, elButton;
var activeMenu, timer, timerEffect, hrefTypeUnknown, displayCheck;
function nodeName(el) {
var n = (el.tagName || el.nodeName);
return n && n.toLowerCase();
}
function cancelPropagation(e) {
e = e || global.event;
if (e.stopPropagation) { e.stopPropagation(); }
e.cancelBubble = true;
}
function setStatus(s) {
// Firefox unload/mouseover bug requires typeof check here
if (typeof(global) != 'undefined') { global.setTimeout(function()
{ if (typeof(global) != 'undefined') { global.status = s; } }, 10); }
return true;
}
function clearTimeout() {
global.clearTimeout(timer);
timer = null;
}
function clearTimeoutEffect() {
global.clearInterval(timerEffect);
timerEffect = null;
}
function menuParent(list) {
return (list.parentNode && nodeName(list.parentNode) == 'li')?
list.parentNode.parentNode:null;
}
function menuRoot(list) {
var root;
if (!list.parentNode || nodeName(list.parentNode) != 'li') { return
null; }
while (list.parentNode) {
list = list.parentNode;
if (list && nodeName(list) == 'ul') { root = list; }
}
return (root._isRootless)?null:root;
}
function isAncestor(listChild, listParent) {
while (listChild.parentNode && listChild.parentNode != document) {
if (listChild.parentNode == listParent) { return true; }
listChild = listChild.parentNode;
}
}
function hideActiveMenu(branch, root) {
if (timer) { clearTimeout(); }
if (timerEffect) { clearTimeoutEffect(); }
if (activeMenu && cbFinish) { cbFinish(el); }
activeMenu.style.display = 'none';
var parentMenuItem = activeMenu.parentNode;
if (parentMenuItem && nodeName(parentMenuItem) == 'li' &&
parentMenuItem.parentNode && parentMenuItem.parentNode != branch &&
parentMenuItem.parentNode != root) {
activeMenu = parentMenuItem.parentNode;
hideActiveMenu(branch, root);
}
activeMenu = branch || null;
if (!activeMenu && cbFinish) { cbFinish(el); }
}
function showMenu(el, branch, side, pos) {
var elOffset, elParent, tag, a, progress, effectStartTime;
if (timer) { clearTimeout(); }
if (!activeMenu && cbStart) { cbStart(el); }
side = side || 'bottom';
elParent = el.parentNode;
el.style.visibility = 'hidden';
el.style.display = 'block';
if (!pos && elParent && nodeName(elParent) == 'li') {
pos = [0, 0];
if (elParent != branch) {
elOffset = elParent;
do {
pos[0] += elOffset.offsetTop || 0;
pos[1] += elOffset.offsetLeft || 0;
if (elParent != elOffset) {
pos[0] += elOffset.clientTop || 0;
pos[1] += elOffset.clientLeft || 0;
}
elOffset = elOffset.offsetParent;
if (elOffset) {
tag = nodeName(elOffset);
if (tag != 'li' && tag != 'ul') { break; }
}
}
while (elOffset && elOffset != branch);
}
if (side == 'right') { pos[1] += elParent.offsetWidth || 0; } else
{ pos[0] += elParent.offsetHeight || 0; }
}
if (pos) {
el.style.top = pos[0] + 'px';
el.style.left = pos[1] + 'px';
}
if (activeMenu && !isAncestor(el, activeMenu) && activeMenu != el)
{
var root = menuRoot(activeMenu);
hideActiveMenu((branch == root)?null:branch, root);
}
activeMenu = el;
el.style.visibility = 'visible';
if (typeof(effect) == 'function') {
if (timerEffect) { clearTimeoutEffect(); effect(activeMenu, 1); }
effectStartTime = new Date().getTime();
effect(el, 0);
progress = 0;
timerEffect = global.setInterval(function() { progress = (new
Date().getTime() - effectStartTime) / effectDuration; if (progress >
1) { progress = 1; } effect(el, progress); if (progress < 1 &&
effectEase) { progress = effectEase(progress); } if (progress == 1)
{ clearTimeoutEffect(); } }, 1000 / effectFPS);
}
a = el.getElementsByTagName('a');
if (a[0] && a[0].focus) { a[0].focus(); }
}
function showMenuPopup(el) {
showMenu(el, null);
}
function attachPopupActivator(el, list) {
el.onclick = function(e) { if (list.style.display == 'none')
{ showMenu(list, null); } else { hideActiveMenu(null, null); }
cancelPropagation(e); };
}
function initializeChildMenus(list, root, initialSide) {
initialSide = initialSide || 'bottom';
if (typeof(root) == 'undefined') { root = list; }
var lists, itemFocused;
var anchors = list.getElementsByTagName('a');
var i = 0;
var l = anchors.length;
while (i < l) {
if (anchors
.parentNode) {
lists = anchors.parentNode.getElementsByTagName('ul');
if (lists && lists[0]) {
if (lists[0].style.display != 'none') { // already did this one?
hrefTypeUnknown = typeof(anchors.href) == 'unknown';
if (root != list || !startWithRollover || (!hrefTypeUnknown && !
anchors.href)) {
if (!hrefTypeUnknown) { anchors.href = anchors.href ||
'#'; }
anchors.onclick = (function(el) { return function(e) { if
(el.style.display == 'none') { showMenu(el, list, (root == list)?
initialSide:'right'); } else { if (root == list)
{ hideActiveMenu((root == list)?null:list, root); } }
cancelPropagation(e); return false; }; })(lists[0]);
}
anchors.tabIndex = 0;
initializeChildMenus(lists[0], root);
anchors.onmouseover = (function(el) { return function(e)
{ if (this.title) { setStatus(this.title); } if ((!activeMenu && !
startWithRollover) || (activeMenu && isAncestor(activeMenu, el)))
{ return true; } if (timer) { clearTimeout(); } timer =
global.setTimeout(function() { showMenu(el, list, (root == list)?
initialSide:'right'); }, (list == root)?0:menuPause); return
true; }; })(lists[0]);
anchors.onmouseout = function() { if (timer)
{ clearTimeout(); } if (this.title) { return setStatus(''); } };
anchors.className = 'popup';
lists[0].className = 'menuPopup';
lists[0].style.position = 'absolute';
lists[0].style.display = 'none';
}
}
else {
if (anchors.parentNode.parentNode &&
anchors.parentNode.parentNode.style.display != 'none') { // already
did this one?
anchors.onmouseover = function() { if (this.title)
{ setStatus(this.title); } if (timer) { clearTimeout(); } if
(activeMenu && !isAncestor(this, activeMenu)) { timer =
global.setTimeout(function() { hideActiveMenu((list == root)?
null:list, menuRoot(activeMenu)); }, (list == root)?0:menuPause); }
return true; };
anchors.onmouseout = function() { if (this.title) { return
setStatus(''); } };
}
}
i++;
}
}
if (l) {
global.onunload = function() {
i = 0;
l = anchors.length;
while(i < l) {
anchors.onclick = anchors.onmouseover =
anchors.onmouseout = null;
i++;
}
};
}
}
function documentClickHandler(list, root) {
if (typeof(root) == 'undefined') { root = list; }
return function() {
if (activeMenu && (isAncestor(activeMenu, list) || activeMenu ==
list)) { hideActiveMenu(null, root); }
};
}
function attachDocumentClickHandler(list, root) {
var onclickOld = doc.onclick;
var onclickNew = documentClickHandler(list, root);
doc.onclick = (onclickOld)?function(e) { onclickOld(e);
onclickNew(e); }nclickNew;
}
function attachDocumentKeyHandler(list, root) {
if (typeof(root) == 'undefined') { root = list; }
var onkeypressOld = doc.onkeypress;
var onkeypressNew = function(e) { e = e || global.event; var key =
e.which || e.keyCode || e.charCode; if (key == 27 && activeMenu &&
(isAncestor(activeMenu, list) || activeMenu == list)) { var elParent =
menuParent(activeMenu); hideActiveMenu((elParent == root)?
null:elParent, root); } };
doc.onkeypress = (onkeypressOld)?function(e) { onkeypressOld(e);
onkeypressNew(e); }nkeypressNew;
}
function initializeMenu(list, className, initialSide) {
list.className = className || 'menubar';
list.style.position = 'relative';
initializeChildMenus(list, list, initialSide);
attachDocumentClickHandler(list);
attachDocumentKeyHandler(list);
}
function initializeMenuPopup(list, className) {
list.className = className || 'menuPopup';
list._isRootless = true;
initializeChildMenus(list, null);
list.style.position = 'absolute';
list.style.display = 'none';
attachDocumentClickHandler(list, null);
attachDocumentKeyHandler(list, null);
}
// Instantiation
el = doc.getElementById('myMenubar');
if (el) {
el.style.visibility = 'visible';
displayCheck = el.style && typeof(el.style.display) == 'string' &&
typeof(el.style.position) == 'string';
if (el.parentNode && displayCheck) {
initializeMenu(el);
}
}
el = doc.getElementById('myMenubarVertical');
if (el && el.style) { el.style.visibility = 'visible'; }
if (el && el.parentNode && displayCheck) {
initializeMenu(el, null, 'right');
}
el = doc.getElementById('myPopupMenu');
elButton = doc.getElementById('testPopupMenuButton');
if (el && el.style) { el.style.visibility = 'visible'; }
if (elButton && elButton.style) { elButton.style.visibility =
'visible'; }
if (el && el.parentNode && displayCheck) {
initializeMenuPopup(el);
if (elButton) {
elButton.disabled = false;
attachPopupActivator(elButton, el);
el = doc.getElementById('testPopupMenu');
if (el && el.style) { el.style.visibility = 'visible'; }
}
}
effect = (function(el) {
var i, l;
var opacityStyles = ['opacity', 'MozOpacity',
'KhtmlOpacity'];
if (el && el.style) {
if (typeof el.style.filter != 'undefined') {
return function(el, o) {
var f;
if (el.filters) {
if (el.currentStyle && !
el.currentStyle.hasLayout) { el.style.zoom = 1; }
f = el.filters.alpha;
if (typeof(f) !=
'undefined') {
if (o == 1) {
f.enabled =
false;
}
else {
f.enabled =
true;
f.opacity =
o * 100;
}
}
else {
if (el.style &&
typeof(el.style.filter) != 'undefined') { el.style.filter +=
"alpha(opacity=" + (o * 100) + ")"; }
}
}
};
}
i = 0;
l = opacityStyles.length;
while (i < l) {
if (typeof(el.style[opacityStyles]) ==
'string') {
return (function(s) { return
function(el, o) { el.style = o; }; })(opacityStyles);
}
i++;
}
}
})(el);
effectEase = function(p) { return (Math.sin(p * Math.PI / 2)); };
};
}
</script>
</head>
<body>
<ul id="myMenubarVertical"><li><a title="Google sites" href="http://
www.google.com">Google</a><ul><li><a href="http://
www.gmail.com">GMail</a><ul><li><a href="http://www.gmail.com">Inbox</
a></li><li><a href="http://www.gmail.com">Outbox</a></li></ul></
li><li><a href="http://www.googlecode.com">Code</a><ul><li><a
href="http://code.google.com/apis/ajaxsearch/">Ajax Search</a></
li><li><a href="http://www.google.com/apis/maps/">Maps</a></li><li><a
href="http://code.google.com/webtoolkit/">Web Toolkit</a></li></ul></
li><li><a href="http://www.google.com/talk">GTalk</a></li></ul></
li><li><a href="http://www.msn.com" title="MSN sites">MSN</
a><ul><li><a href="http://www.msnbc.com">News</a></li><li><a
href="http://msn.foxsports.com">Sports</a></li><li><a href="http://
weather.msn.com">Weather</a></li></ul></li><li><a href="http://
www.yahoo.com" title="Yahoo! site">Yahoo!</a><ul><li><a href="http://
www.yahoo.com/r/26">Sports</a></li><li><a href="http://www.yahoo.com/r/
4c">Tech</a></li></ul></li></ul>
<ul id="myMenubar"><li><a title="Google sites" href="http://
www.google.com">Google</a><ul><li><a href="http://
www.gmail.com">GMail</a><ul><li><a href="http://www.gmail.com">Inbox</
a></li><li><a href="http://www.gmail.com">Outbox</a></li></ul></
li><li><a href="http://www.googlecode.com">Code</a><ul><li><a
href="http://code.google.com/apis/ajaxsearch/">Ajax Search</a></
li><li><a href="http://www.google.com/apis/maps/">Maps</a></li><li><a
href="http://code.google.com/webtoolkit/">Web Toolkit</a></li></ul></
li><li><a href="http://www.google.com/talk">GTalk</a></li></ul></
li><li><a href="http://www.msn.com" title="MSN sites">MSN</
a><ul><li><a href="http://www.msnbc.com">News</a></li><li><a
href="http://msn.foxsports.com">Sports</a></li><li><a href="http://
weather.msn.com">Weather</a></li></ul></li><li><a href="http://
www.yahoo.com" title="Yahoo! site">Yahoo!</a><ul><li><a href="http://
www.yahoo.com/r/26">Sports</a></li><li><a href="http://www.yahoo.com/r/
4c">Tech</a></li></ul></li></ul>
<fieldset id="testPopupMenu">
<input type="button" id="testPopupMenuButton" value="Popup menu"
disabled>
</fieldset>
<ul id="myPopupMenu"><li><a title="Google sites" href="http://
www.google.com">Google</a><ul><li><a href="http://
www.gmail.com">GMail</a><ul><li><a href="http://www.gmail.com">Inbox</
a></li><li><a href="http://www.gmail.com">Outbox</a></li></ul></
li><li><a href="http://www.googlecode.com">Code</a><ul><li><a
href="http://code.google.com/apis/ajaxsearch/">Ajax Search</a></
li><li><a href="http://www.google.com/apis/maps/">Maps</a></li><li><a
href="http://code.google.com/webtoolkit/">Web Toolkit</a></li></ul></
li><li><a href="http://www.google.com/talk">GTalk</a></li></ul></
li><li><a href="http://www.msn.com" title="MSN sites">MSN</
a><ul><li><a href="http://www.msnbc.com">News</a></li><li><a
href="http://msn.foxsports.com">Sports</a></li><li><a href="http://
weather.msn.com">Weather</a></li></ul></li><li><a href="http://
www.yahoo.com" title="Yahoo! site">Yahoo!</a><ul><li><a href="http://
www.yahoo.com/r/26">Sports</a></li><li><a href="http://www.yahoo.com/r/
4c">Tech</a></li></ul></li></ul>
</body>
</html>