Hi all, I've been working on a vertical reveal menu. Right now it
works ok with CSS. But what i'd like it to do is when you mouse over,
There are so many things wrong with it that I don't know where to
begin. Won't work without a mouse. The selector "a:visted" should
obviously be "a:visited". Why use definition lists for a navigation
menu? There's a CSS "*" hack that is presented to all browsers, when
it is clearly targeted at IE6 and under. And presenting IE6 with a
table inside an anchor is nuts. The good news is that a CSS solution
won't do what you want anyway.
reveal the menu and have that menu stay open until the user mouses
over another menu item. Right now it's a bit jumpier than i'd
You'll need script for this. Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vertical Menu</title>
<style type="text/css">
#menu {list-style-type:none;margin:0;padding:0;width:10em;background-
color:#ffcc66;color:black;font-weight:bold;font-size:100%;font-
family:Arial,Helvetica,sans-serif}
#menu ul {list-style-type:none;margin:0;padding:0}
#menu li.gallery {border-top:1px solid #000000;padding:.25em 0 .25em
0}
#menu li a, #menu li a:visited {display:block;text-
decoration:none;width:auto;margin:0 0 0 0;padding:0}
#menu ul li ul {padding:0 0 0 1em}
#menu ul li ul li {margin:0;padding:.25em 0 .25em 0}
#menu ul li ul li a:hover, #menu ul li ul li a:focus, #menu ul li ul
li a:active {background-color:inherit;color:#993300}
</style>
<!--[if IE]>
<style type="text/css">
#menu li a, #menu li a:visited {width:100%}
</style>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
var currentMenu;
function getMenu(el) {
var p = el.parentNode;
if (p) {
var list = p.getElementsByTagName('ul');
if (list && list.length) return list[0]
}
}
function showMenu() {
var el = getMenu(this);
if (el && el.style) {
if (currentMenu && currentMenu.style && currentMenu != el)
currentMenu.style.display = 'none';
el.style.display = 'block';
currentMenu = el
}
}
function toggleMenu() {
var el = getMenu(this);
if (el && el.style) {
if (currentMenu && currentMenu.style && currentMenu != el)
currentMenu.style.display = 'none';
el.style.display = (el.style.display == 'none')?'block':'none';
currentMenu = (el.style.display == 'none')?null:el
}
}
if (document.getElementById && document.getElementsByTagName &&
document.getElementsByTagName('html') &&
document.getElementsByTagName('html')[0].style &&
typeof(document.getElementsByTagName('html')[0].style.visibility) ==
'string') {
document.write('<style type="text/css">#menu {visibility:hidden}<\/
style>');
window.onload = function() {
var el = document.getElementById('menu');
if (el && el.style) {
var links = el.getElementsByTagName('a');
if (links) {
var lists;
for (var i = links.length - 1; i >= 0; i--) {
if (!links
.href && links.parentNode) {
links.tabIndex = 0;
links.onmouseover = showMenu;
//links.onfocus = showMenu;
links.onclick = toggleMenu;
lists = links.parentNode.getElementsByTagName('ul');
if (lists && lists.length && lists[0].style) {
if (lists[0].id) links.href = '#' + lists[0].id; else
links.href = '#';
lists[0].style.display = 'none'
}
}
}
}
el.style.visibility = 'visible'
}
};
}
//]]>
</script>
</head>
<body>
<div id="menu">
<ul>
<li class="gallery"><a>Menu 1</a>
<ul id="menu1">
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
<li class="gallery"><a>Menu 2</a>
<ul id="menu2">
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Notice I commented out the onfocus assignment in favor of onclick
(which will also work without a mouse.) If you want to use onfocus,
don't use onclick as the results of both together are unpredictable.
Also, for better accessibility with screen readers, when showing a
menu, set the focus to the first link.
One other note. I suggest you switch to HTML. You are serving your
XHTML as text/html and this script won't work when and if you decide
to serve XHTML properly. To make it work as such, you can remove the
one instance of document.write as it exists only to prevent the menus
from flashing during page load.