ciao, premetto che sono alle prime armi con javascript...
ho creato tramite fireworks un menu pop up (che utlizza javascript).... il menu funziona perfettamente in mozilla, ma con explorer mi da dei problemi: il menu si apre e si chiude correttamente, ma non funzionano ne i collegamenti all'interno del menu, ne gli altri collegamenti all'interno della pagina (che prima di creare il menu funzionavano).... qualcuno ha qualche idea?
Ciao,
non ho mai usato fireworks ma se ti può essere utile ti posto il codice del menu verticale a tendina che uso di solito. Il layout è molto scarno ma lavorando sul css di possono fare dei bei menù.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MENU VERTICALE A TENDINA</title>
<style>
div#menulat {
margin: 0px;
padding: 0px;
border: 0px none #000000;
width: 180px;
}
div#menulat ul {
margin: 0px;
padding: 0px;
border: 0px none #000000;
}
div#menulat li {
margin: 0px;
padding: 0px;
border: 0px none #000000;
list-style-type: none;
position: relative;
}
div#menulat a {
display: block;
text-decoration: none;
background-color:#99CC33;
width: 174px;
margin: 0px;
padding: 3px;
}
div#menulat a:hover {
background-color: #999933;
}
div#menulat div.spot {
display: none;
position: absolute;
top: 0px;
left: 180px;
margin: 0px;
padding: 0px;
border: 0px none #000000;
width: 180px;
}
div#menulat div.cont {
position: relative;
width: 180px;
}
</style>
<script type="text/javascript">
function visualizza(i) {
document.getElementById(i).style.display="block";
}
function nascondi(i) {
document.getElementById(i).style.display="none";
}
</script>
</head>
<body>
<div id="menulat"><ul>[*]<div class="cont" onmouseover="visualizza('ciccio');" onmouseout="nascondi('ciccio');">ciccio<div id="ciccio" class="spot"><ul>[*]ciccio1.1[*]<div class="cont" onmouseover="visualizza('ciccio12');" onmouseout="nascondi('ciccio12');">ciccio1.2<div id="ciccio12" class="spot"><ul>[*]ciccio1.2.1[*]ciccio1.2.2[/list]</div></div>[/list]</div></div>[*]ciccio2[/list]</div>
</body>
</html>
Per non avere problemi con IE, il codice HTML del menù (da DIV a DIV per capirci) deve stare tutto in una riga.
Ciao
Akito
grazie mille per la velocitànon vorrei abusare troppo della tua gentilezza, ma ne hai anche uno per un menu a tendina che scende in verticale? non sono sicuro di riuscire a modificare lo script per il mio scopo.... come ti dicevo sono alle prime armi
Ho un esempio in tre file.
File prova.html:
<!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>Bosa Vertical Menu</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script type="text/javascript" src="js/OpenClose.js"></script>
</head>
<body>
<div class="menu">
<div class="supervoce" onmouseover="style.backgroundColor='#C0C0C0';" onmouseout="style.backgroundColor='#E0E0E0';"><tab le><tr><td>Fare Web</td><td class="img">[img]image/piu.gif[/img]</td></tr></table></div>
<div class="bloccovoci" id="A">
<div class="voce">:: HTML</div>
<div class="voce">:: CSS</div>
<div class="voce">:: XML</div>
<div class="voce">:: Javascript</div>
<div class="voce">:: VBScript</div>
<div class="voce">:: ASP e ASP.NET</div>
<div class="voce">:: PHP</div>
<div class="voce">:: JSP</div>
<div class="voce">:: Cold Fusion</div>
<div class="voce">:: CGI e Perl</div>
<div class="voce">:: Front Page</div>
<div class="voce">:: Dreamweaver</div>
</div>
<div class="supervoce" onmouseover="style.backgroundColor='#C0C0C0';" onmouseout="style.backgroundColor='#E0E0E0';"><tab le><tr><td>Programmazione</td><td class="img">[img]image/piu.gif[/img]</td></tr></table></div>
<div id="B" style="display:none;">
<div class="voce">:: Java</div>
<div class="voce">:: Visual Basic</div>
<div class="voce">:: C e C++</div>
<div class="voce">:: UML</div>
</div>
<div class="supervoce" onmouseover="style.backgroundColor='#C0C0C0';" onmouseout="style.backgroundColor='#E0E0E0';"><tab le><tr><td>Database</td><td class="img">[img]image/piu.gif[/img]</td></tr></table></div>
<div id="C" style="display:none;">
<div class="voce">:: SQL</div>
<div class="voce">:: MySQL</div>
<div class="voce">:: MS Access</div>
<div class="voce">:: MS SQL Server</div>
</div>
</div>
</p>
</body>
</html>
File menu.css:
img {
border: 0px none #000000;
}
div.menu {
background-color: #778899;
color: #FFFFFF;
width: 150px;
padding: 2px;
border: solid 1px #000000;
}
div.supervoce {
background-color: #E0E0E0;
color: #192939;
font-weight: bold;
font-size: 10px;
font-family: Verdana, arial, sans-serif;
margin-bottom: 3px;
border: solid 1px #192939;
cursor: pointer;
width: 100%;
}
div.supervoce a {
color: #000000;
font-weight: bold;
font-size: 10px;
font-family: Verdana, arial, sans-serif;
text-decoration: none;
display: block;
}
div.supervoce table {
border-spacing: 0px;
border-collapse: collapse;
border: 0px none #000000;
color: #192939;
font-weight: bold;
font-size: 10px;
font-family: Verdana, arial, sans-serif;
margin: 0px auto;
padding: 0px;
width: 100%;
}
div.supervoce table tr td {
vertical-align: middle;
text-align: left;
}
div.supervoce table tr td.img {
vertical-align: middle;
text-align: right;
width: 20px;
}
div.bloccovoci {
display: none;
background-color: #778899;
width: 100%;
}
div.voce a {
display: block;
background-color: #555555;
color: #FFFFFF;
padding: 1px 0px 2px 0px;
margin-bottom: 1px;
text-decoration: none;
border: solid 1px #000000;
font-weight: bold;
font-size: 10px;
font-family: Verdana, arial, sans-serif;
width: 100%;
}
div.voce a:hover {
background-color: #E0E0E0;
color: #192939;
}
File OpenClose.js:
function openclose(i, j) {
if (document.getElementById(i).style.display=="none") {
document.getElementById(i).style.display="block";
document.getElementById(j).src="image/meno.gif";
} else {
document.getElementById(i).style.display="none";
document.getElementById(j).src="image/piu.gif";
}
}
Controlla e correggi i path dei file se non funziona correttamente.
Spero ti possa essere utile. Cmq ti consiglio di imparare html e css per cominciare e poi ti butti su javascript (che è relativamente più complesso).
Ciao
Akito
ok, grazie del consiglio....
Permessi di invio
Rispondi quotando