inserire menù a tendina

**Many17** · 09-10-2003, 13:41

Ciao a tutti, ho un problema nell'inserire un esempio di menù a tendina nella prova di sito che sto facendo.
Di javascript come ho ribadito più volte non ci capisco quasi niente quindi abbiate pazienza.
Dunque il file l'ho preso da qui http://www.jsdir.com/staffscripts/script043.asp.
Ho seguito le istruzione riportate all'interno del file ma niente.
La mia pagina è in xhtml strict e non vorrei che il problema fosse questo.
Io vorrei inserire esternamente il file dynamenu in questo modo:
<SCRIPT SRC="dynamenu.js"></SCRIPT>,
poi gli stili:
<STYLE type="text/css">
.menuIEb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuNNb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuIE {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;font-weight:bold;color:ffffff;text-decoration:none}
.menuNN {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;color:ffffff;text-decoration:none}
</STYLE>

Questo è l'esempio di pagina xhtml, sapete dirmi esattamente fra che tag devo inserire il codice js e gli stili?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scaletta Srl - Comunicazione Stampata</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="stilescaletta.css" />
</head>
<body>
<div id="bgsu">
[img]immagini/sopralogo.jpg[/img]</div>
</body>
</html>

Scusate la confusione e grazie per l'aiuto

**Shores** · 09-10-2003, 13:53

Gli stili li puoi inserire all'interno del tag HEAD, per quel che riguarda il JavaScript (comunque, nel tag SCRIPT è obbligatorio l'attributo type="text/javascript") devi fare un po' di prove: dei candidati sono dentro allo HEAD, appena dentro al BODY, oppure dentro al tag che usa quel javascript.

Ciao!

**Many17** · 09-10-2003, 14:41

Grazie Shores per la risposta, ho provato in tutti i modi ma il file mi viene visualizzato strano

La cosa particolare è che se lascio la dicitura:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<TITLE>JsDir - Menu a Tendine </TITLE>
<STYLE type="text/css">
.menuIEb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuNNb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuIE {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;font-weight:bold;color:ffffff;text-decoration:none;}
.menuNN {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;color:ffffff;text-decoration:none;}
</STYLE> </HEAD>
<BODY BGCOLOR="#ffffff" onResize="self.location.reload()">
<script type="text/javascript" src="dynamenu.js"></script>
</FONT>
</BODY>
</HTML>
mi viene visualizzato il menù non correttamente,
se invece metto semplicemente:

<html>
<head>
<TITLE>JsDir - Menu a Tendine </TITLE>
<STYLE type="text/css">
.menuIEb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuNNb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuIE {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;font-weight:bold;color:ffffff;text-decoration:none;}
.menuNN {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;color:ffffff;text-decoration:none;}
</STYLE> </HEAD>
<BODY BGCOLOR="#ffffff" onResize="self.location.reload()">
<script type="text/javascript" src="dynamenu.js"></script>
</FONT>
</BODY>
</HTML>
In questo caso il menù è a posto, solo che non devo creare una semplice pagina html!

Consigli?

**Mich_** · 09-10-2003, 15:26

Ci sono degli errori (HTML/JS/CSS) che i browser ignorano, ma se tu chiedi di usare il DTD strict non possono ignorarli.

Puoi provare con il DTD Transitional.

Comunque in XHTML non sono ammessi tutti i tag e gli attributi di formattazione, che vanno invece inseriti nei CSS.

Nel tuo caso vedo:
font
BGCOLOR
tag e attributi scritti maiuscoli
il CSS dentro il documento (va racchiuso in commento oppure messo in un file esterno)

PS. Questo tipo di domande starebbero meglio nel forum XML, XHTML, XSL, Smil

Ciao
Michele

**Shores** · 09-10-2003, 15:55

Interessante, non sapevo che i fogli di stile incorporati non fossero ammessi in XHTML...

Beh, io l'ho sempre pensato che fosse meglio metterli in un file a parte!

**Mich_** · 09-10-2003, 16:06

Non ho detto questo.

Ho detto che non possono far parte del documento.

Esempio di codice valido:
<style type="text/css">
/*<![CDATA[*/
body { width:98%; padding-right:10px; padding-left:2px;
font-family:Helvetica,Arial,sans-serif; }
/*]]*/
</style>

Il tag XML CDATA trasforma tutto il pezzo in un oggetto unico che non viene interpretato dal browser come tale, ma e` come se fosse un altro file.
Lo stesso vale per gli <script>

Ciao
Michele

**Shores** · 09-10-2003, 16:59

Originariamente inviato da Mich_
Non ho detto questo.

Ho detto che non possono far parte del documento.

Esempio di codice valido:
<style type="text/css">
/*<![CDATA[*/
body { width:98%; padding-right:10px; padding-left:2px;
font-family:Helvetica,Arial,sans-serif; }
/*]]*/
</style>

Il tag XML CDATA trasforma tutto il pezzo in un oggetto unico che non viene interpretato dal browser come tale, ma e` come se fosse un altro file.
Lo stesso vale per gli <script>

Ciao
Michele

Ok, solo che è un po' uno schifo così, allora è meglio metterli in un file esterno!

**Many17** · 09-10-2003, 19:04

Ciao Michele

ho postato qui perchè mi sembrava più giusto, forse ho sbagliato, a parte questo ora provo a fare come dici per risolvere il problema poi se non funziona troverò (ovviamente con l'aiuto di tutti) un altro rimedio.
Ciao

**Mich_** · 10-10-2003, 09:04

Originariamente inviato da Many17
Ciao Michele

ho postato qui perchè mi sembrava più giusto, forse ho sbagliato, a parte questo ora provo a fare come dici per risolvere il problema poi se non funziona troverò (ovviamente con l'aiuto di tutti) un altro rimedio.
Ciao

La mia postilla non era rivolta a te. E` chiaro che non lo sapevi (altrimenti non avresti chiesto).

Ma essendo io co-moderatore del forum "XML, XHTML, XSL, Smil" volevo fare un po' di pubblicita` al forum, facendolo conscere a quegli utenti che magari non sanno che in tale forum si parla anche di nuove tecnologie e CSS.

Ciao a tutti
Michele

**Many17** · 10-10-2003, 15:35

Eccomi di nuovo, ed ecco il problema.
La pagina di prova funziona con IE ed Opera, con Netscape no, perchè?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//IT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<title>JsDir - Menu a Tendine </title>
<style type="text/css">
.menuIEb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuNNb {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;font-weight:bold;font-style:italic;color:ffffff;text-decoration:none;}
.menuIE {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;font-weight:bold;color:ffffff;text-decoration:none;}
.menuNN {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight:bold;color:ffffff;text-decoration:none;}
</style>
</head>
<body>
<script type="text/javascript" src="dynamenu.js"></script>
</body>
</html>

ed ecco il codice js del menù dynamenu.js:

var ron="#c00000"; // Colore al MouseOver
var roff="#000000"; // Colore di default
var leftmargin=170; // Distanza dal margine sinistro della pagina ( ---> v. commento alla riga 57)
var topmargin=70; // Distanza dal margine superiore della pagina
var largo=125; // Larghezza dei layers, quindi distanza (orizzontale) fra i sottomenu

var Home = true; // Settare a "false" se non si desidera il link all'homepage
var HomeLink = "/"; // URL della homepage
var HomeText = "Home"; // Testo del link alla homepage
var HomeWidth = 50; // Larghezza del livello che contiene il tasto alla homepage. (se "Home" viene impostato a "false" viene azzerato.
var voci=new Array();
voci[0]=new Array("JavaScript","StaffScripts","UserScripts","F lyScripts","P.O.J.","Newsgroup icly")
voci[1]=new Array("Documenti","F.A.Q & Answers","Tutorials","Risorse e Downloads","Biblioteca","Links");
voci[2]=new Array("About us","Staff","Collaboratori","Contatti","Credits" );
voci[3]=new Array("Varie","Servizi Gratuiti","Sondaggi","Hanno detto di noi","Banner","Advertising","Questo menu...");
var links=new Array();
links[0]=new Array("/","#","#","#","#")
links[1]=new Array("/","#","#","#","#","#","#")
links[2]=new Array("/","#","#","#","#")
links[3]=new Array("/","#","#","#","#","#","http://www.jsdir.com")
var targets=new Array();
targets[0]=new Array("new","self","self","self","self")
targets[1]=new Array("new","self","self","self","self","self","se lf")
targets[2]=new Array("new","self","self","self","self")
targets[3]=new Array("new","self","self","self","self","self","ne w")
var wst=new Array();
wst[0]=new Array("Finalmente un NG che da\' riposte serie a chi ha bisogno di aiuto!!! (-=Gigio 2K=-)");
wst[1]=new Array("Sono innumerevoli i siti presenti in rete dedicati a JavaScript. Questa raccolta, lungi dall\'essere esaustiva, comprende gia\' molti links, aiutaci nella raccolta segnalandoli allo staff");
wst[2]=new Array("Le persone che lavorano (giorno e notte!) a JsDir");
wst[3]=new Array("Altri link e servizi");
var nn=document.layers?true:false,N6=navigator.userAge nt.toLowerCase().indexOf("gecko")!=-1?true:false,conta=0,last=0;
var op=navigator.userAgent.toLowerCase().indexOf("oper a")!=-1?true:false
HomeWidth=Home?HomeWidth:0;
var MenuLength=HomeWidth+largo*voci.length;
var BrowserWidth=nn||op?window.innerWidth:N6?document. width:document.body.clientWidth;
leftmargin=parseInt((BrowserWidth-MenuLength)/2); // Commentare questa riga con // all'inizio se non si desidera i menu al centro della pagina, bensi' nella posizione definita in "leftmargin"

if (nn)
{
if (Home)
document.write("<LAYER NAME=mtop. position=absolute left="+leftmargin+" top="+topmargin+" width="+HomeWidth+" height=15 clip=0,0,"+HomeWidth+",15 bgColor="+roff+" visibility=visible onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.') CLASS=menuNNb>"+HomeText+"</LAYER>");
for (i=0;i<voci.length;i++)
{
var n=i;
document.writeln("<LAYER NAME=mtop"+n+". position=absolute left="+eval(leftmargin+HomeWidth+largo*i)+" top="+topmargin+" width="+largo+" height=15 clip=0,0,"+largo+",15 bgColor="+roff+" visibility=visible onMouseOver=MostraMenu("+i+");mroll('mtop"+i+".'); conta++ onMouseOut=last="+i+";unmroll('mtop"+i+".');conta--><DIV ALIGN=center CLASS=menuNNb><A HREF=javascript:mroll('mtop"+i+".') onClick=vai('"+links[i][0]+"',"+i+",0) CLASS=menuNNb>"+voci[i][0]+"</A></DIV></LAYER>");
for (l=1;l<voci[i].length;l++)
document.writeln("<LAYER NAME=mdep"+i+"."+l+" position=absolute left="+eval(leftmargin+HomeWidth+largo*i)+" top="+eval(topmargin+15*l)+" width="+largo+" height=15 clip=0,0,"+largo+",15 bgColor="+roff+" visibility=hidden onMouseOver=mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta-- CLASS=menuNNb><A HREF=javascript:mroll('mdep"+n+"."+l+"') onClick=vai('"+links[i][l]+"',"+i+","+l+") CLASS=menuNN>"+voci[i][l]+"</A></LAYER>");
}
}
else
{
if (Home)
document.write("<DIV ID=mtop. STYLE=\"position:absolute;left:"+leftmargin+";top: "+topmargin+";width:"+HomeWidth+";height:15;backgr ound:"+roff+";visibility:visible;cursor:hand\" onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')>"+HomeText+"</DIV>");
for (i=0;i<voci.length;i++)
{
var n=i;
document.writeln("<DIV ID=mtop"+n+". STYLE=\"position:absolute;left:"+eval(leftmargin+H omeWidth+largo*i)+";top:"+topmargin+";width:"+larg o+";height:15;background:"+roff+";visibility:visib le;cursor:hand\" onMouseOver=MostraMenu("+n+");mroll('mtop"+n+".'); conta++ onMouseOut=last="+n+";unmroll('mtop"+n+".');conta--><DIV ALIGN=center CLASS=menuIEb onClick=vai('"+links[i][0]+"',"+i+",0)>"+voci[i][0]+"</DIV></DIV>");
for (l=1;l<voci[i].length;l++)
document.writeln("<DIV ID=mdep"+i+"."+l+" STYLE=\"position:absolute;left:"+eval(leftmargin+H omeWidth+largo*i)+";top:"+eval(topmargin+15*l)+";w idth:"+largo+";height:15;background:"+roff+";visib ility:hidden;cursor:hand\" onMouseOver=;mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta-- CLASS=menuIE onClick=vai('"+links[i][l]+"',"+i+","+l+")>"+voci[i][l]+"</DIV>");
}
}

timer=setInterval("NascondiMenu()",1000)

function NascondiMenu()
{
if (conta==0)
{
coloratutti(true)
timer=setTimeout("coloratutti(false)",200);
timer=setTimeout("showdeps(last,false)",250);
}
}

function coloratutti(col)
{
colore=col?ron:roff;
for (i=0;i<voci.length;i++)
for (j=1;j<voci[i].length;j++)
{
if (nn)
document.layers["mdep"+i+"."+j].bgColor=colore;
else
if(document.all)
document.all["mdep"+i+"."+j].style.background=colore;
else
document.getElementById('mdep'+i+"."+j).style.back ground=colore;
}
}

function MostraMenu(n)
{
showdeps(last,false);
showdeps(n,true);
last=n;
}

function showdeps(n,act)
{
if (conta==0)
{
act?stat="visible":stat="hidden";
if (nn)
for (i=1;i<voci[n].length;i++)
document.layers["mdep"+n+"."+i].visibility=stat;
else
for (i=1;i<voci[n].length;i++)
if(document.all)
document.all["mdep"+n+"."+i].style.visibility=stat;
else
document.getElementById('mdep'+n+"."+i).style.visi bility=stat;
}
}

function vai(dove,r,c)
{
if (c>0)
lev=nn?document.layers["mdep"+r+"."+c]

document.all)?document.all["mdep"+r+"."+c].style:document.getElementById("mdep"+r+"."+c).sty le;
else
lev=nn?document.layers["mtop"+r+"."]

document.all)?document.all[LTop].style.background=ron:document.getElementById(LTop ).style.background=ron;
nn?document.layers[l].bgColor=ron

document.all)?document.all[l].style.background=ron:document.getElementById(l).s tyle.background=ron;
document.getElementById?document.getElementById(l) .style.cursor=document.all?'hand':'pointer':'void( 0)';
if (l.substr(0,4)=="mdep")
stringa=wst[l.substr(4,l.indexOf(".")-4)][l.substring(l.indexOf(".")+1,l.length)];
else if (l.length>5)
stringa=wst[l.substr(4,l.indexOf(".")-4)][0];
else stringa="Home Page";
window.status=stringa;
timer=setTimeout("window.status=stringa",20);
}

function unmroll(l)
{
LTop="mtop"+l.substr(4,l.indexOf(".")-4)+".";
nn?document.layers[LTop].bgColor=roff

document.all)?document.all[LTop].style.background=roff:document.getElementById(LTo p).style.background=roff;
nn?document.layers[l].bgColor=roff

document.all)?document.all[l].style.background=roff:document.getElementById(l). style.background=roff;
window.status="";
}

Non ho molte speranze che vi mettiate a guardare questo codice chilometrico, però ci provo cmq!
Grazie,

Discussione: inserire menù a tendina

Strumenti discussione

Ricerca discussione

Visualizza

inserire menù a tendina

Permessi di invio