Hi everyone, its been a while since i kast posted on here,

Im trying to make the following menu open on the mouseover event, but im having loads of problems, Whilst the menu system works great on the click event, Copy and paste this code if you are looking fro a good easy menu system for any webpage you may be designing.

What I would like is to haver the menu work on the OnMouseOver Event, Hoping someone can help,

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
    if (document.getElementById) {
          var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           set_cookie(theid,'hide');
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           set_cookie(theid,'show');
        }
    }
}

function showHideAll()
{
      var menuState = get_cookie ('mymenu1');
      menu_status['mymenu1']=menuState;
      showHide('mymenu1');

      menuState = get_cookie ('mymenu2');
      menu_status['mymenu2']=menuState;
      showHide('mymenu2');
	  
	  menuState = get_cookie ('mymenu3');
      menu_status['mymenu3']=menuState;
      showHide('mymenu3');
	  
	  menuState = get_cookie ('mymenu4');
      menu_status['mymenu4']=menuState;
      showHide('mymenu4');
	  
}



function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );


  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );

  if ( secure )
        cookie_string += "; secure";

  document.cookie = cookie_string;
}

//-->
</script>

<style type="text/css">
.menu1{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu2{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu3{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}
.menu4{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

 .submenu{
	background-color:#ffffff;
	display: block;
	height: 20px;
	padding-top: 2px;
	padding-left: 5px;
	color: #2a4c79;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border-top:solid 1px #000000;
}

.hide{
      display: none;
}

.show{
      display: block;
}
</style>
</head>
</head>

<body onLoad="javascript:showHideAll()">
<div style="width:135px; height:192px">

 <a class="menu1" onClick="showHide('mymenu1')">Links</a>
    <div id="mymenu1" class="hide">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

<a class="menu2" onClick="showHide('mymenu2')">Links</a>
    <div id="mymenu2" class="hide">
  <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
    </div>
    
    
    <a class="menu3" onClick="showHide('mymenu3')">Links</a>
    <div id="mymenu3" class="hide">
    <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>	
    </div>
    
<a class="menu4" onClick="showHide('mymenu4')">Links</a>
    <div id="mymenu4" class="hide">
    <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>  
    </div>

Try this:

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array();

function showHide(theid){
    if (document.getElementById) {
          var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           set_cookie(theid,'hide');
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           set_cookie(theid,'show');
        }
    }
}

function showHideAll()
{
      var menuState = get_cookie ('mymenu1');
      menu_status['mymenu1']=menuState;
      showHide('mymenu1');

      menuState = get_cookie ('mymenu2');
      menu_status['mymenu2']=menuState;
      showHide('mymenu2');
	  
	  menuState = get_cookie ('mymenu3');
      menu_status['mymenu3']=menuState;
      showHide('mymenu3');
	  
	  menuState = get_cookie ('mymenu4');
      menu_status['mymenu4']=menuState;
      showHide('mymenu4');
	  
}



function get_cookie ( cookie_name )
{
  var results = document.cookie.match ( cookie_name + '=(.*?)(;|$)' );


  if ( results )
    return ( unescape ( results[1] ) );
  else
    return null;
}

function set_cookie ( name, value, exp_y, exp_m, exp_d, path, domain, secure )
{
  var cookie_string = name + "=" + escape ( value );

  if ( exp_y )
  {
    var expires = new Date ( exp_y, exp_m, exp_d );
    cookie_string += "; expires=" + expires.toGMTString();
  }

  if ( path )
        cookie_string += "; path=" + escape ( path );

  if ( domain )
        cookie_string += "; domain=" + escape ( domain );

  if ( secure )
        cookie_string += "; secure";

  document.cookie = cookie_string;
}

//-->
</script>

<style type="text/css">
.menu1{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu2{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

.menu3{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}
.menu4{
	background-color:#2a4c79;
	padding-left:5px;
	padding-top:2px;
	padding-bottom: 2px;
	display:block;
	text-decoration: none;
	color: #ffffff;
	height: 20px;
	font-family:Tahoma;
	font-size:12px;
	border-top:solid 1px #000000;
}

 .submenu{
	background-color:#ffffff;
	display: block;
	height: 20px;
	padding-top: 2px;
	padding-left: 5px;
	color: #2a4c79;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	border-top:solid 1px #000000;
}

.hide{
      display: none;
}

.show{
      display: block;
}
</style>
</head>
</head>

<body onLoad="javascript<b></b>:showHideAll()">
<div style="width:135px; height:192px">

 <a class="menu1" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">Links</a>
    <div id="mymenu1" class="hide" onmouseover="showHide('mymenu1')" onmouseout="showHide('mymenu1')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

 <a class="menu2" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">Links</a>
    <div id="mymenu2" class="hide" onmouseover="showHide('mymenu2')" onmouseout="showHide('mymenu2')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>
    
    
 <a class="menu3" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">Links</a>
    <div id="mymenu3" class="hide" onmouseover="showHide('mymenu3')" onmouseout="showHide('mymenu3')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>
    
 <a class="menu4" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">Links</a>
    <div id="mymenu4" class="hide" onmouseover="showHide('mymenu4')" onmouseout="showHide('mymenu4')">
        <a href="www.somewhere.com" title="Click to go somewhere" class="submenu">Somewhere Link</a>
        
        
    </div>

~G

This is brilliant, many thanks. I think it looks much better with the OnMouseOver effect,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.