0

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>

Edited by Ezzaral: Added [code] [/code] tags. Please use them to format any code that you post. You should know this by 15 posts.

2
Contributors
2
Replies
4
Views
7 Years
Discussion Span
Last Post by DaveyMoyes
0

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

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.