Ciao a tutti, sono nuovo in questo forum,
comincio nel dire che sono un novello in questo campo, ma mi ci sto cimentando per imparare qualcosina.
Ho un problema, spero che qualcuno di voi mi possa dare una dritta nel risolverlo, ovvero:
Ho trovato in rete un carino menu animato che potrebbe essere utile per una pagina web che sto creando.
Il problema sta nell'adattarlo nella mia pagina ovvero, il menu ha una semplice animazione dove compare dal lato sx dello schermo, però io vorrei che questo menu mi faccia la stessa cosa però partendo e quindi comparendo dal div che però si trova al centro della pagina.
Spero di essermi spiegato correttamente, altrimenti resto cmq a disposizione.
codice:
comincio nel dire che sono un novello in questo campo, ma mi ci sto cimentando per imparare qualcosina.
Ho un problema, spero che qualcuno di voi mi possa dare una dritta nel risolverlo, ovvero:
Ho trovato in rete un carino menu animato che potrebbe essere utile per una pagina web che sto creando.
Il problema sta nell'adattarlo nella mia pagina ovvero, il menu ha una semplice animazione dove compare dal lato sx dello schermo, però io vorrei che questo menu mi faccia la stessa cosa però partendo e quindi comparendo dal div che però si trova al centro della pagina.
Spero di essermi spiegato correttamente, altrimenti resto cmq a disposizione.
codice:
Codice:
<HTML>
<HEAD>
<TITLE>770</TITLE>
<style type="text/css">
#menu {position:absolute; top:-2000px; border:1px solid #009900; border-collapse:collapse; visibility:hidden;}
#quadrato {width: 800px; height:500px; border:5px solid #009900; margin-left:200px;}
td.txt {border:1px solid #000000; text-align:center; font-weight:bold; color:#FFCC00;}
td.txt a{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#FFCC00; text-decoration:none;}
td.txt a:hover{font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; font-weight:bold; color:#FFFFFF; text-decoration:none;}
</style>
<!-- Inizio Sezione JavaScript -->
<script type="text/javascript">
var ie5= (document.getElementById && document.all);
var ns6= (document.getElementById && !document.all);
var MenuTop = 50; // posizione del menu rispetto alla parte superiore della pagina
var MenuLeft = 150; // spostamento del menu
var timerID1 = null;
var timerID2 = null;
function statik(){
if(ie5){
document.getElementById('menu').style.top = document.body.scrollTop + MenuTop;
}
if(ns6){
document.getElementById('menu').style.top = window.pageYOffset + MenuTop;
}
}
function changeBG(obj, bgColor) {
if(ie5 || ns6){
obj.style.backgroundColor = bgColor;
}
}
function slideIn(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) < 0){
clearTimeout(timerID2);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) + 5 + "px";
timerID1=setTimeout("slideIn()", 30);
}
}
}
function slideOut(){
if(ie5 || ns6){
if(parseInt(document.getElementById('menu').style.left) > -MenuLeft){
clearTimeout(timerID1);
document.getElementById('menu').style.left = parseInt(document.getElementById('menu').style.left) - 5 + "px";
timerID2=setTimeout("slideOut()", 30);
}
}
}
function reDo(){
if(ie5 || ns6){
window.location.reload();
}
}
function slideMenuInit(){
if(ie5 || ns6){
document.getElementById('menu').style.visibility = "visible";
document.getElementById('menu').style.left = -MenuLeft;
document.getElementById('menu').style.top = MenuTop;
}
}
window.onresize = reDo;
setInterval ('statik()', 1);
</script>
</head>
<body onLoad="slideMenuInit()">
<div id="quadrato">
<table id="menu" width="190" border="1" cellpadding="3" cellspacing="0" bgcolor="#009900" bordercolor="#000000" onMouseOver="slideIn()" onMouseOut="slideOut()">
<tr>
<td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">primo link</a></td>
<td rowspan=6 class="txt">M<br/>E<br/>N<br/>U</td>
</tr>
<tr>
<td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">secondo link</a></td>
</tr>
<tr>
<td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">terzo link</a></td>
</tr>
<tr>
<td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">quarto link</a></td>
</tr>
<tr>
<td class="txt" onMouseOver="changeBG(this,'#CC6600')" onMouseOut="changeBG(this,'#009900')"><a href="#">quinto link</a></td>
</tr>
</table>
</div>
</BODY>
</HTML>
