problema con un menu javascript

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>
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 

ivan1984z

Nuovo Utente
18 Gen 2012
3
0
0
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?


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?
 

max_400

Utente Attivo
23 Gen 2009
770
0
16
caltanissetta
max400.forumfree.it
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
 

ivan1984z

Nuovo Utente
18 Gen 2012
3
0
0
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
K Problema ancore in pagine diverse con menu fixed HTML e CSS 6
G problema con menu spry dreamweaver Webdesign e Grafica 5
L Problema onClick con un menu a tendina Javascript 3
F Problema con Menu Javascript HTML e CSS 1
F problema menu a tendina con explorer HTML e CSS 2
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
T problema con il menu di un blog PHP 3
J Problema con menu a tendina collegato MS Access 0
M Problema Con Menu Javascript Javascript 1
M problema con hover/visited menu HTML e CSS 2
P Problema Con Il Ciclo Di Un Menu' Flash 6
T Problema con tasto e menu' Flash 0
R Problema con FP 2003: bloccare scorrimento menu HTML e CSS 4
T Problema con gestione menu laterale HTML e CSS 6
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18
grgfede Problema javascript con aruba Javascript 1

Discussioni simili