problema menu espandibile

[gguida]

ciao a tutti,

ho questo script

www.raffygio.com/menu.htm


e testandolo mi sono accorto che quando si scorre dall'alto verso il basso muovendosi da una voce all'altra, avvengono dei salti e spesso si apre due voci in giù di quella richiesta......si può fare qualcosa...grazie

[gguida]

magari far aprire il menu principale con un clic....

grazie

[gguida]

nessuno mi può aiutare..... non riesco a risolvere

[Mich_]

Io non noto errori, ma
- una certa lentezza nella risposta,
- una risposta solo sulla stringa (e non su tutto il campo);

Pero` il codice non e` scritto bene:
- ci sono cose nella head che dovrebbero stare nel body (il <div id="divStayTopLeft"...> )
- ci sono cose che starebbero meglio nella head ( <STYLE TYPE="text/css"> )
- la tabella serve solo a posizionare il menu` (sarebbe meglio un <div> )
- l'uso di attributi obsoleti (andrebbero sostituiti con i CSS sempre ove possibile).

Anche i vari document.write() andrebbero sostitutiti con dei <div> o <span> cui applicare la proprieta` CSS visibility o display.

Si puo` renderlo "moderno", e i vari problemi, comprese le differenze tra browser dovrebbero sparire.

[gguida]

ok grazie dei suggerimenti mi metto subito a lavoro.....

[gguida]

ok ho fatto una aggiustatina per le mie limitate conoscenze inserendolo in un files esterno e definendo i css in un altro file esterno....per il resto puoi darmi una mano.....
grazie tanto...


posto il file esterno è questo:

// creazione e definizione dei due array progressivi con voci menu principali e sottomenu + link
mv2_menu = new Array();
mv2_lien = new Array();
// creazione delle voci principali menu 
mv2_menu[0] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px; \"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\" >Company Profile</div>';
mv2_menu[1] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px;\"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\">Products</div>';
mv2_menu[2] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px;\"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\">Service & Support</div>';
mv2_menu[3] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px;\"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\">Applications</div>';
mv2_menu[4] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px;\"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\">Partnership</div>';
mv2_menu[5] = '<div align=\"left\" style=\"margin-left: 0px; margin-top: 0px; margin-bottom: 0px;\"><img src=\"/images/imageshome/punto1.gif\" BORDER=\"0\">Info</div>';

mv2_lien[0] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"whoweare.asp\" onMouseOver=\'document.images.visualizzatore.src="/images/cp/whowearemsx.jpg"\' onMouseOut=\'document.images.visualizzatore.src="/images/imageshome/trasparente.gif"\' CLASS=\"mv2style\" TARGET=\"main\">who we are</A>
';
mv2_lien[1] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"cat_products.asp\" CLASS=\"mv2style\" TARGET=\"main\" >catologue</A>
';
mv2_lien[2] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"upgrade_prod/frmlogin.asp\" CLASS=\"mv2style\" TARGET=\"main\">home</A>
';
mv2_lien[3] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"whoweare.asp\" CLASS=\"mv2style\" TARGET=\"main\">who we are</A>
';
mv2_lien[4] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"aaa.asp\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione1</A>
';
mv2_lien[5] = '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc2.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione2</A>
';

mv2_lien[0] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"mission.asp\"  onMouseOver=\'document.images.visualizzatore.src="/images/cp/missionmsx.jpg"\' onMouseOut=\'document.images.visualizzatore.src="/images/imageshome/trasparente.gif"\' CLASS=\"mv2style\" TARGET=\"main\">mission</A>
';
mv2_lien[0] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"technology.asp\"  onMouseOver=\'document.images.visualizzatore.src="/images/cp/tecnologymsx.jpg"\' onMouseOut=\'document.images.visualizzatore.src="/images/imageshome/trasparente.gif"\' CLASS=\"mv2style\" TARGET=\"main\">technology</A>
';
mv2_lien[0] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"productscp.asp\"  onMouseOver=\'document.images.visualizzatore.src="/images/cp/productscpmsx.jpg"\' onMouseOut=\'document.images.visualizzatore.src="/images/imageshome/trasparente.gif"\' CLASS=\"mv2style\" TARGET=\"main\">assistence</A>
';
mv2_lien[0] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"future.asp\"  onMouseOver=\'document.images.visualizzatore.src="/images/cp/futuremsx.jpg"\' onMouseOut=\'document.images.visualizzatore.src="/images/imageshome/trasparente.gif"\' CLASS=\"mv2style\" TARGET=\"main\">future</A>
';
mv2_lien[1] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione4</A>
';
mv2_lien[1] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione5</A>
';
mv2_lien[2] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"faq.asp\" CLASS=\"mv2style\" TARGET=\"main\">Faq</A>
';
mv2_lien[2] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione7</A>
';
mv2_lien[3] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione8</A>
';
mv2_lien[3] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\"  style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione9</A>
';
mv2_lien[4] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione10</A>
';
mv2_lien[5] += '<IMG SRC=\"/images/imageshome/link.gif\" width=\"12\"  height=\"12\" style=\"margin-left: 20px;\" BORDER=\"0\"><A HREF=\"http://www.lasercutinc.com\" CLASS=\"mv2style\" TARGET=\"main\">Descrizione11</A>
';

// caratteristiche della tabella menu
mv2_pos = -1;
function mv2_menu_draw()
	{
	mv2_aff = '<TABLE BORDER=0  BGCOLOR=#f0f0f0 CELLPADDING=3 align=left CELLSPACING=0 WIDTH=170><TR><TD><TABLE BORDER=0 align=left CELLPADDING=3 CELLSPACING=0 WIDTH=100%>';
        for(a=0;a<mv2_menu.length;a++)     
		{
		if(mv2_pos == a || !document.getElementById)
			bgcolor = "#F0F0F0"; //colore celle aperte 	
		else
			bgcolor = "#F0F0F0";  //colore celle chiuse
			background = "/images/imageshome/bg_menusx.gif"; //img sfondo celle menu
			background1 = "/images/imageshome/bg_s_menusx.gif"; //img sfondo celle sottomenu	
	             if(document.getElementById)
			mv2_aff += " <TR><TD BGCOLOR="+bgcolor+"><TD BACKGROUND="+background+"><A HREF=\"\" onMouseOver=\"mv2_pos="+a+";mv2_menu_draw()\"  CLASS=\"mv1style\">"+mv2_menu[a]+"</A></TD></TR>";
		     else
			mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"></TD><TD BACKGROUND="+background+" align=\"left\" > "+mv2_menu[a]+"</TD></TR>"
	                if(mv2_pos == a || !document.getElementById)
			  mv2_aff += "<TR><TD BGCOLOR="+bgcolor+"></TD><TD BACKGROUND="+background1+" >"+mv2_lien[a]+"</TD></TR>";
		}
        mv2_aff += "</TABLE></TD></TR></TABLE>";
	if(document.getElementById)
		document.getElementById("mv2").innerHTML = mv2_aff;
	else
		document.write(mv2_aff);
	}

mv2_menu_draw();

poi lo richiamo cosi dalla pagina:

<DIV ID=mv2>
  <script LANGUAGE="JavaScript" type="text/JavaScript" SRC="js/menusx.js"></SCRIPT></DIV>

però il problema che all'apertura dei sottomenu salta mi rimane......

grazie ancora....

[Mich_]

Qualcosa hai corretto, ma ancora non ci siamo.

Nella head non ci puo` stare uno script che scrive un tag che deve stere nel body.

Tutti quelli stili nel codice qui sopra, dovrebbero stare in un CSS ed essere solo richiamati.

Dovresti dare uno sguardo ad un tutorial sui CSS, e poi ripensare da zero la struttura del tuo pezzetto.

Comunque quelli che tu chiami "salti" io non li noto (Mozilla 1.4 sotto linux). Che browser usi tu? (o forse non so cosa intendi per "salti").

[gguida]

uso ie 6..per salti intendo ..che passando da una voce principale all'altra dall'alto verso il basso spesso mi salta una voce.... ...ora mi dedico allo studio dei css....potresti indicarmi una buona guida in italiano....

grazie

[Mich_]

www.html.it (per una prima infarinata).

Poi guarda tra i "link utili" del forum "XML, XHTML, ..."