java script

View Answers

September 10, 2009 at 5:21 PM

Hi Friend,

Try the following code:

1)menu.html:

<html>
<head>

<style>
#layer1 {
background-color : #99CCCC;
layer-background-color : #99CCCC;
border-width : 1px;
border-style : solid;
border-color : #006666;
width : 150px;
top : 50px;
left : 10px;
position : absolute;
z-index : 90;
visibility : hidden;
}
</style>
<script language="JavaScript" type="text/javascript" src="Menu.js"></script>
</head>
<body onLoad="init();">
<button onMouseOver="hideAll(); showMenuItem('layer1'); stopTime()" onMouseOut="startTime();">link</button>
<div id="layer1">
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">Menu Item1</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">Menu Item2</a><br>
<a href="#" onMouseOver="stopTime();" onMouseOut="startTime();">Menu Item3</a><br>
</div>
</body>
</html>

2)Menu.js:

function createMenu(){ window.location.reload() }
window.onresize = createMenu;
var timer = null;
var timerOn = false;
var timecount = 1000;
var browser = null;
var newbrowser = true;
var check = false;

function init(){
if (document.layers) {
menuItem="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
browser ="ns4";
}else if(document.all){
menuItem="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
browser ="ie";

}else if(document.getElementById){
menuItem="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
browser="moz";
}else{
browser="none";
newbrowser = false;
}
window.status='status bar text to go here';
check = true;
}
function showMenuItem(layerName){
if(check){
if (browser =="none"){
return;
}
else if (browser == "moz"){
document.getElementById(layerName).style.visibility="visible";
}
else{
eval(menuItem+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
else {
return;
}
}
function hideMenuItem(layerName){
if(check){
if (browser =="none"){
return;
}
else if (browser == "moz"){
document.getElementById(layerName).style.visibility="hidden";
}
else{
eval(menuItem+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}

}
else {
return;}
}
function hideAll(){
hideMenuItem('layer1');
}
function startTime() {
if (timerOn == false) {
timer=setTimeout( "hideAll()" , timecount);
timerOn = true;

}
}
function stopTime() {
if (timerOn) {
clearTimeout(timer);
timer = null;
timerOn = false;
}
}
function onLoad(){
init();

}
Thanks