Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop Down Menu Help

    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

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Try this:
    Code:
    <!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
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    29
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Posts
    565
    Thanks
    0
    Thanked 18 Times in 18 Posts
    Code:
    <!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
    "Failure is not an option. It comes bundled with the software."
    ....../)/)..(\__/).(\(\................../)_/)......
    .....(-.-).(='.'=).(-.-)................(o.O)...../<)
    ....(.).(.)("}_("}(.)(.)...............(.)_(.))Ż/.
    ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
    Little did the bunnies suspect that one of them was a psychotic mass murderer with a 6 ft. axe.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •