Switch Menu - Default Close

Frogger · #1 (**permalink**) 02-03-10, 02:39 PM

Hi all,

Can someone please help. I found this code (can't remember where now) for a very simple switch menu. I would like to modify the code some how so that the switch menu is closed when you first see it. At the moment the default is open. Any ideas how I can change the code for this to happen?

And also how could I modify the script so that rather onmouse click it would run the same with onmouse over.

Thanks again

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
<!--
.menuCategory {
	width: 200px;   
   	background-color: green;
   	color: #036;
   	padding: 2px;
   	margin-top: 1px;
}
-->
</style>

<script language="JavaScript" type="text/javascript">
function toggle(obj) {
  with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>

</head>

<body>

<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'>
<div class='menuTopic'><a href="switch.htm">content to menu item 1</a></div>
<div class='menuTopic'><a href="switch.htm">content to menu item 2</a></div>
<div class='menuTopic'><a href="switch.htm">content to menu item 3</a></div>
</div>

<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'>
<div class='menuTopic'>content to menu item 4</div>
<div class='menuTopic'>content to menu item 5</div>
</div>

<a href="switch.htm">switch</a>

</body>
</html>

wirehopper · #2 (**permalink**) 02-03-10, 05:35 PM

HTML Code:

<div onmouseover="toggle('menu_1')">
<div id='menu_1' style="display:none">

Not tested

Frogger · #3 (**permalink**) 02-03-10, 05:52 PM

Thanks again wirehopper. That was exactly what i was looking for.

perfect

job0107 · #4 (**permalink**) 02-03-10, 06:22 PM

Just using onmouseover on the main menu items will just display the submenu items and they will stay displayed.

What you might want to consider is clicking on the main menu items to display the submenu items
and use onmouseout to close the submenu items.

Here I use onclick and onmouseout in the main menu items.
This causes the submenu items to display when a main menu item is clicked.
And when you mouseout of the main menu item the submenu item will hide.
Now when you traverse from the main menu item to the submenu item you do not want the submenu item to hide until you mouseout of the submenu.
So to make this happen correctly I use onmouseover and onmouseout in the submenu items.

Example:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#menu_1, #menu_2 {
      display:none;
      width:200px;
      padding: 2px;
      background:#ff0;
}
.menuCategory {
       width:200px;
      background-color: green;
       color: #036;
       padding: 2px;
       margin-top: 1px;
       cursor:pointer;
       text-decoration:underline;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
function open_menu(obj) {
  document.getElementById(obj).style.display = 'block';
}
function close_menu(obj) {
  document.getElementById(obj).style.display = 'none';
}
</script>
</head>
<body>
 <div class="menuCategory" onclick="open_menu('menu_1');" onmouseout="close_menu('menu_1');">menu item 1</div>
  <div id='menu_1' onmouseover="open_menu(this.id);" onmouseout="close_menu(this.id);">
   <div class='menuTopic'><a href="switch.htm">content to menu item 1</a></div>
   <div class='menuTopic'><a href="switch.htm">content to menu item 2</a></div>
   <div class='menuTopic'><a href="switch.htm">content to menu item 3</a></div>
  </div>
 <div class="menuCategory" onclick="open_menu('menu_2');" onmouseout="close_menu('menu_2');">menu item 2</div>
  <div id='menu_2' onmouseover="open_menu(this.id);" onmouseout="close_menu(this.id);">
   <div class='menuTopic'>content to menu item 4</div>
   <div class='menuTopic'>content to menu item 5</div>
  </div>
 <a href="switch.htm">switch</a>
</body>
</html>

Frogger · #5 (**permalink**) 02-03-10, 06:38 PM

Thanks job0107. That too is another great idea.

Now I have 2 great scripts to use. Thanks again