Ciao a Tutti,
ho adattato il codice preso da un sito internet per creare un menu' a tendina con piu' livelli.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript + CSS Dropdown Menu</title>
<style type="text/css">
body {margin:25px; font:12px Arial;}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#ffffff; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:160px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#dldldl}
ul.menu ul li a:hover {background-color:#c2dfff}
ul.menu ul li li {position:relative; border:1px solid #aaa; border-top:none; width:100px; margin:0}
ul.menu ul li li li {position:relative; border:1px solid #aaa; border-top:none; width:100px; margin:0}
ul.menu ul ul {left:160px; top:0px}
ul.menu ul ul ul {left:100px; top:0px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; width:146px}
ul.menu .sub {background:#ffffff url(../images/arrow.gif) 60px 8px no-repeat}
ul.menu ul ul .sub2 {background:#ffffff url(../images/arrow.gif) 80px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}
ul#tps {left:160px; top:-1px}
ul#tps ul {left:100px; top:0px}
</style>
<script type="text/javascript">
//
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible '}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
//
</script>
</head>
<body>
<ul class="menu" id="menu">
<li>
<li><a href="#" class="menulink">Italia</a>
<ul>
<li><a href="#" class="sub topline">Nord</a>
<ul>
<li><a href="#" class="sub2 topline">Lombardia</a>
<ul>
<li><a href="#" class="topline">Milano</a></li>
<li><a href="#">Bergamo</a></li>
<li><a href="#">Pavia</a></li>
</ul>
</li>
<li><a href="#" class="sub2">Piemonte</a>
<ul>
<li><a href="#" class="topline">Torino</a></li>
<li><a href="#">Alessandria</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Centro</a></li>
<li><a href="#">Sud</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<input type="text" name="choice" id="choice" value="..." size="58">
</body>
</html>
In questo caso se uno sceglie: Nord / Lombardia / Milano,
vorrei che questo valore, selezionato col click, venisse memorizzato per intero in un input type text ....
Si puo' fare ??
N.B. mi rendo conto che tale menu' adattato da un codice copiato ininternet contiene tanti collegamenti ipertestuali che a me non servono .... pero' con il mio know-how sono arrivato a questo punto ...
Grazie mille in anticipo !!!!