By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,968 Members | 1,572 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,968 IT Pros & Developers. It's quick & easy.

Vertical reveal menu

P: n/a
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,
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 like it
and would like to basically have it stay open on a mouse out event,
again until it hits another menu item. Is this possible? Any direction
would be great.

sample menu: http://www.mikepetruna.com/menu.html

thanks!
Mike

Aug 4 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Here's how I would modify your code to do what you want. I haven't
checked it for syntax. Hopefully you have enough javascript knowledge
to know how to fix any syntax errors below.
<style>
dd { display: none };
</style>

<script>
var activeMenuParent = null;
function setDisplay ( parent, display ) {
if ( ! parent ) return; // parent not set, do nothing

var els = parent.getElementsByTagName ( 'dd' );
for ( var i = 0 ; i < els.length; i ++ )
els[i].style.display = display;
}

function hideMenu ( parent ) {
setDisplay ( parent, 'none' );
}
function showMenu ( link ) {
hideMenu ( activeMenuParent ); // hide menu if showing
var parent = link.parentNode.parentNode; // a, dt, dl
setDisplay ( parent, 'block' );
this.activeMenuParent = parent;
}
</script>

<html>
<div id="dlmenu">

<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu</a></
dt>
<dd><a href="#">SubMenu 1</a></dd>
<dd><a href="#">SubMenu 2</a></dd>
<dd><a href="#">SubMenu 3</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="#" class="menu" onmouseover="showMenu(this)">Menu 2</a></
dt>
<dd><a href="#">SubMenu 1</a></dd>
<dd><a href="#">SubMenu 2</a></dd>
<dd><a href="#">SubMenu 3</a></dd>

</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</html>

Aug 4 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.