problema con un menu javascript

I

ivan1984z

Nuovo Utente
18 Gen 2012
3
0
0
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:
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>
 
Ciao Ivan e benvenuto sul Forum!

Scusa il ritardo ma oggi sono stato un po incasinato in un'altra sezione...

Dunque questo è il tuo esempio
men-lat-ivan.jpg


Esempio Ivan

e questo è quello che ho modificato io, per comparire dentro il quadrato
con il relativo spostamento
men-lat-esempio-max.jpg


Esempio Max

Questa è la parte da modificare (o meglio aggiungere)
in alto su style
style type="text/css">
#menu {margin-left:210px;position:absolute; top:-2000px

devi aggiungere quella parte in rosso e basta.
Ovviamente devi coprire le voci del menu con la sovrapposizione di un div
e regolare lo z-index e il position: absolute/relative non so se conosci l'argomento?

Questo è lo script per intero dal mio esempio

Codice: 
<HTML>
<HEAD>
<TITLE>Max</TITLE>
<style type="text/css">
#menu {margin-left:210px;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 = 100;    // 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 align=center><h1>Esempio Max</h1></div><br>
<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>


Ciao e buon lavoro! :fonzie:
by Max_400
 
Ovviamente devi coprire le voci del menu con la sovrapposizione di un div
e regolare lo z-index e il position: absolute/relative non so se conosci l'argomento?
Clicca per allargare...


Grazie mille Max,
Il problema sta proprio in quello che hai scritto nel coprire il menu, essendo alle prime armi e conosco alcune voci, e devo ancora capire bene la differenza tra le varie voci.

Quello che devo fare è creare un nuovo div in parte a quello che c'è già, e fare in modo che non si veda ma che occupi lo stesso lo spazio con il comando visibility:hidden?

O sono del tutto fuori strada?
 
Ciao Ivan

A noi serve "la copertura" in genere una pagina web ha un menu laterale chiamato "sommario"
che contiene l'indice di tutto il sito, i vari link e sarebbe utile per la copertura.

In questo caso ti ho creato un nuovo div chiamato "banana" è un nome stupido però
si distingue dal contesto del sito. In questo div, ho messo una bella foto, con le stesse dimensioni
in larghezza, del div stesso. Questo div grazie a quei comandi che ti ho citato prima farà da copertura
per le voci del menù.

menu-lat-copertura1.jpg

prima del passaggio del mouse
menu-lat-copertura2.jpg

dopo il passaggio del mouse

Esempio in rete

il codice:
Codice: 
<style type="text/css">
#banana{margin-top:-510px;position:relative;z-index:2; width:200px;}
#menu {position:absolute; z-index:1; margin-left:210px;; margin-top:-90px; 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>

<script>
var ie5= (document.getElementById && document.all);
var ns6= (document.getElementById && !document.all);

var MenuTop = 100;    // 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>

<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>

<div id="banana"><img src=th-200.jpg width=200 height=145></div>

il tuo codice l'ho messo sotto una pressa e l'ho accociato al massimo come un caffè ristretto eh eh


Però adesso te la devi vedere da solo... già ho fatto abbastanza
Se non ti è chiaro il concetto dello z-index e del position
guarda quest'esempio che ho fatto tempo fa con le mie zampette, molto semplice con 3 div sovrapposti
E qui l'indice e in particolare il display block per visualizzare o nascondere il div naturamente ci sono altri metodi tipo posizionare il menu fuori schermo e farlo comparire nel punto preciso ma poi bisogna considerare il movimento con javascript.

Comunque questo è tutto da parte mia....
buona fortuna e buon lavoro
by max_400
 
Grazie mille,

tutto più chiaro grazie ancora per le dritte, per il resto non serve altro che controllare bene il funzionamento dell' z-index e del position.

Buonagiornata.

Ivan
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

P
[HTML] Problema con menu orizzontale a tendina per sito web
Risposte
17
Visite
6K
HTML e CSS
podset
P
K
Problema ancore in pagine diverse con menu fixed
Risposte
6
Visite
4K
HTML e CSS
Zed Marlin
Z
G
problema con menu spry dreamweaver
Risposte
5
Visite
2K
Webdesign e Grafica
filomeni
filomeni
L
Problema onClick con un menu a tendina
Risposte
3
Visite
3K
Javascript
criric
criric
F
Problema con Menu Javascript
Risposte
1
Visite
2K
HTML e CSS
borgo italia
borgo italia
F
problema menu a tendina con explorer
Risposte
2
Visite
3K
HTML e CSS
ServWise
ServWise
B
Problema di inserimento "menu con css" in pagina web "con tabelle"
Risposte
5
Visite
2K
HTML e CSS
Barbara72
B
T
problema con il menu di un blog
Risposte
3
Visite
1K
PHP
Eliox
Eliox
J
Problema con menu a tendina collegato
Risposte
0
Visite
2K
MS Access
jhonnyjab
J
M
Problema Con Menu Javascript
Risposte
1
Visite
2K
Javascript
lukeonweb
lukeonweb
M
problema con hover/visited menu
Risposte
2
Visite
2K
HTML e CSS
marty55555
M
P
Problema Con Il Ciclo Di Un Menu'
Risposte
6
Visite
2K
Flash
lupin3m
lupin3m
T
Problema con tasto e menu'
Risposte
0
Visite
1K
Flash
Terrarsa
T
R
Problema con FP 2003: bloccare scorrimento menu
Risposte
4
Visite
2K
HTML e CSS
WebDisaster
W
T
Problema con gestione menu laterale
Risposte
6
Visite
2K
HTML e CSS
The_Nightmare
T
voldemort
Problema in Shopify con Pixel Facebook
Risposte
1
Visite
2K
E-Commerce
m.pittini
M
O
problema con dvr dahua xvr5116
Risposte
0
Visite
1K
IP Cam e Videosorveglianza
oky74
O
G
Problema con Xampp
Risposte
1
Visite
1K
Web Server
GreatOtaku
G
andrea barletta
Problema con miniature comandi
Risposte
0
Visite
1K
Photoshop
andrea barletta
andrea barletta
I
problema con alice
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
Alto Basso