...

View Full Version : Drop Down Menu Help



durdledoor
01-03-2007, 10:53 AM
Morning All

Just to introduce this post, I am not a Java Script guy, but my Java Script colleague is currently off work, and has left a page half done. If you could help me, that would be fantastic.

We currently have a page with a drop down menu, which I've uploaded to http://www.ja.net/temp/drop-down-menus.html.

You roll over the heading, and a drop down menu appears. However the person in charge of the page would like it so that when you move your mouse away from the drop down menu, the menu itself disappears.

Would any of you know how to do this? Sorry for the ignorance, the one book I could look at was Dom Scripting by Jeremy Keith, but it didn't seem to have anything for this specific problem.

Thanks very much for any help
Durdledoor

dumpfi
01-03-2007, 03:12 PM
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drop down menus</title>

<script language="JavaScript1.1" type="text/javascript">

var
currentMenu = null;

function containsElement(container, element)
{ // element is contained within container or IS the container
if(container == element)
{
return true;
}// we've reached the root element
if(null == element.parentNode)
{
return false;
}// recursively check whether the parent node is the container
return containsElement(container, element.parentNode);
}
function openMenu(menu)
{
// if there's an open menu close it
if(null != currentMenu)
{
closeMenu(currentMenu);
}// if a menu was clicked twice -> just close it
if(menu == currentMenu)
{
currentMenu = null;
}// else -> open the new menu
else
{
menu.getElementsByTagName('ul')[0].style.display = 'block';
currentMenu = menu;
}
}
function closeMenu(menu)
{
menu.getElementsByTagName('ul')[0].style.display = 'none';
}
function closeUnhoveredMenu(e)
{
var
target;
// if there's no open menu -> do nothing
if(null == currentMenu)
{
return;
}// get the element where the mouse is over
// IE
if('undefined' != typeof(window.event))
{
target = window.event.srcElement;
}// every other browser
else
{
target = e.target;
}// if the mouse is not over an element within our menu -> close the menus
if(!containsElement(currentMenu, target))
{
closeMenu(currentMenu);
}
}
// set the event handlers
window.onload = function()
{
var
triggers = document.getElementsByName('menutrigger'),
i = 0;

for(; i < triggers.length; ++i)
{
triggers[i].onclick = function()
{
openMenu(this.parentNode);
};
}
document.body.onmouseover = closeUnhoveredMenu;
}
</script>

<style type="text/css">
body
{
margin-top:0em;
padding-top:0em;
margin-bottom:0em;
padding-bottom:0em;
height:100%;
}
h3
{
margin-left:0.5em;
}
.menucontainer
{
margin-left:0.5em;
margin-top:1em;
background-color:#f0f0f0; /* give a visual clue about the size of the menu */
}
.menu
{
display: none;
margin-left: 5px;
margin-top:1em;
}
.menu li
{
list-style-type:none;
}
a
{
cursor:pointer;
}
</style>

</head>

<body>

<h3>Roll the mouse over the menu options below to display the sub menus. Click anywhere to hide all the menus.</h3>
<div class="menucontainer">
<a name="menutrigger">Artists</a>
<ul class="menu">
<li><a href="#">Thomas Gainsborough</a></li>
<li><a href="#">Gwen John</a></li>
<li><a href="#">Ben Nicholson</a></li>
<li><a href="#">Stanley Spencer</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Musicians</a>
<ul class="menu">
<li><a href="#">Henry Purcell</a></li>
<li><a href="#">Thomas Tallis</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Sculptors</a>
<ul class="menu">
<li><a href="#">Richard Deacon</a></li>
<li><a href="#">Elisabeth Frink</a></li>
<li><a href="#">Barbara Hepworth</a></li>
<li><a href="#">David Smith</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Writers</a>
<ul class="menu">
<li><a href="#">Ben Johnson</a></li>
<li><a href="#">John Milton</a></li>
<li><a href="#">William Shakespeare</a></li>
</ul>
</div>
</body>
</html>dumpfi

durdledoor
01-03-2007, 05:05 PM
Thanks very much for the reply Dumfi

That could well be what the page owner wants.

The only thing is, she wanted the menu to expand 'on hover' not on click.

Is that not feasible?

If not, I'll just tell her and adapt your coding you've sent me, thanks again

dumpfi
01-03-2007, 06:33 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Drop down menus</title>

<script language="JavaScript1.1" type="text/javascript">

var
currentMenu = null;

function containsElement(container, element)
{ // element is contained within container or IS the container
if(container == element)
{
return true;
}// we've reached the root element
if(null == element.parentNode)
{
return false;
}// recursively check whether the parent node is the container
return containsElement(container, element.parentNode);
}
function openMenu(menu)
{
// if there's an open menu close it
if(null != currentMenu)
{
closeMenu(currentMenu);
}// if a menu was clicked twice -> just close it
/*if(menu == currentMenu)
{
currentMenu = null;
}// else -> open the new menu
else
{*/
menu.getElementsByTagName('ul')[0].style.display = 'block';
currentMenu = menu;
//}
}
function closeMenu(menu)
{
menu.getElementsByTagName('ul')[0].style.display = 'none';
}
function closeUnhoveredMenu(e)
{
var
target;
// if there's no open menu -> do nothing
if(null == currentMenu)
{
return;
}// get the element where the mouse is over
// IE
if('undefined' != typeof(window.event))
{
target = window.event.srcElement;
}// every other browser
else
{
target = e.target;
}// if the mouse is not over an element within our menu -> close the menus
if(!containsElement(currentMenu, target))
{
closeMenu(currentMenu);
currentMenu = null;
}
}
// set the event handlers
window.onload = function()
{
var
triggers = document.getElementsByName('menutrigger'),
i = 0;

for(; i < triggers.length; ++i)
{
triggers[i].onmouseover = function()
{
openMenu(this.parentNode);
};
}
document.body.onmouseover = closeUnhoveredMenu;
}
</script>

<style type="text/css">
body
{
margin-top:0em;
padding-top:0em;
margin-bottom:0em;
padding-bottom:0em;
height:100%;
}
h3
{
margin-left:0.5em;
}
.menucontainer
{
margin-left:0.5em;
margin-top:1em;
background-color:#f0f0f0;
}
.menu
{
display: none;
margin-left: 5px;
margin-top:1em;
}
.menu li
{
list-style-type:none;
}
a
{
cursor:pointer;
}
</style>

</head>

<body>

<h3>Roll the mouse over the menu options below to display the sub menus. Click anywhere to hide all the menus.</h3>
<div class="menucontainer">
<a name="menutrigger">Artists</a>
<ul class="menu">
<li><a href="#">Thomas Gainsborough</a></li>
<li><a href="#">Gwen John</a></li>
<li><a href="#">Ben Nicholson</a></li>
<li><a href="#">Stanley Spencer</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Musicians</a>
<ul class="menu">
<li><a href="#">Henry Purcell</a></li>
<li><a href="#">Thomas Tallis</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Sculptors</a>
<ul class="menu">
<li><a href="#">Richard Deacon</a></li>
<li><a href="#">Elisabeth Frink</a></li>
<li><a href="#">Barbara Hepworth</a></li>
<li><a href="#">David Smith</a></li>
</ul>
</div>
<div class="menucontainer">
<a name="menutrigger">Writers</a>
<ul class="menu">
<li><a href="#">Ben Johnson</a></li>
<li><a href="#">John Milton</a></li>
<li><a href="#">William Shakespeare</a></li>
</ul>
</div>
</body>
</html>dumpfi



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum