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>