Menu tendina 3 livelli

[Sonikag]

Vorrei trovare un menu a tendina verticale a 3 livelli. Me lo sapreste indicare?
Possibilmente senza uso di Javascript.
Grazie

[nickt]

Prova a dare un'occhiata qui:

http://www.allwebfree.it/script_inde...ri=1&tipscri=1

Dovresti trovare quello che fa per te...

[Sonikag]

Il risultato finale è proprio come il menu verticale che c'è qui:
http://www.allwebfree.it/listascript/586.html

Volevo però sapere se si riusciva a fare con i css una cosa simile in modo da avere una migliore indicizzazione e più accessibiilità

[nickt]

Non penso che si possa realizzare via CSS.

Comunque il codice di quel menù è questo è uno javascript:

	<script language=JavaScript>
// Product title: Gurt JavaScript Menu
// Product version details: 1.1, 01-25-2006 (mm-dd-yyyy) [compressed version]
// Product URL: http://gurtom.com/products/menus/js
// Contact info: gurt-feedback@gurtom.com (specify product title in subject line)
// Notes: This script is free. Feel free to copy, use and change this script as
// long as this head part remains unchanged. Visit official site for details.
// Copyright: (c) 2006 by Gurtom.Com

var menus=[],_m3=window.external?[' style="width:100%;height:100%"','div onclick="','div']:['','a href="javascript:','a'],_mC=document.getElementById?function(_mR){return document.getElementById(_mR)}:function(_mR){return document.all[_mR]};function menu(_m1,_mO){var _=this,i;_._m1=_m1;_._mO=_mO;_._mS='';_.id=menus.length;_._m0=[];_._m2=[];_._m4=[0,0];_._mO[-1]={'firstX':20,'firstY':20,'nextX':15,'nextY':15,'width':100,'height':22,'hideAfter':200,'target':'_self','trace':0,'css':''};for(i=0;i<_._m1.length;i++)if(_._m1[i])new _mE(0,_,_,_._m1[i]);for(i=0;i<_._m2.length;i++)_mA(_._m2[i],1);menus[_.id]=_;}function _mD(_mK){var i,a=menus[_mK]._m0;for(i=0;i<a.length;i++){_mA(a[i],0);_mB(a[i],'norm');}}function _mF(_mK,_mI){var m=menus[_mK],_=m._m0[_mI]._m1[1];_mB(m._m0[_mI],'clck');if(_)open(_,_m9(m._m0[_mI]._m8,m._mO,'target'));}function _mG(_mK,_mI){var m=menus[_mK];m._mL=setTimeout('_mD('+_mK+')',_m9(m._mN._m8,m._mO,'hideAfter'));if(m._mN.id==_mI)m._mN=null;}function _mH(_mK,_mI){var m=menus[_mK],_,_m7,i;m._mN=_=m._m0[_mI];if(m._mL)clearTimeout(m._mL);for(i=0;i<m._m0.length;i++){_=m._m0[i];_m7=!m._mN._mS.indexOf(_._mT);if(_m7)_mB(_,_==m._mN?'over':'norm');_mA(_,_m7);}if(m._mN._m6)for(i=m._mN;i&&i._m5;i=i._mP)_mB(i,'over');}function _mE(l,p,m,_m1){var _=this,i,c=p._m2.length,_mO=m._mO;_._m1=_m1;_._mP=p;_._mT=p._mS;_._mS=p._mS+c+':';_._m8=l;_.id=m._m0.length;m._m0[_.id]=_;p._m2[c]=_;var id=m.id+','+_.id,nX,nY;_._m6=_m9(l,_mO,'trace');for(i=l;i>=-1;i--){if(_mO[i]&&_mO[i]['nextX']!=null)nX=_mO[i]['nextX'];if(_mO[i]&&_mO[i]['nextY']!=null)nY=_mO[i]['nextY'];if(nX!=null||nY!=null)break;}_._m4=[p._m4[0]+_m9(l,_mO,'firstX')+(nX!=null?nX*c+_m9(l,_mO,'width')*c:0),p._m4[1]+_m9(l,_mO,'firstY')+(nY!=null?nY*c+_m9(l,_mO,'height')*c:0)];document.write('<',_m3[1],'_mF(',id,')" id="me',id,'" style="position:absolute;top:',_._m4[1],'px;left:',_._m4[0],'px;width:',_m9(l,_mO,'width'),'px;height:',_m9(l,_mO,'height'),'px;visibility:hidden;z-index:',l,';text-decoration:none" onmouseout="_mG(',id,')" onmouseover="_mH(',id,')"><div',_m3[0],' id="mi',id,'" class="',_m9(l,_mO,'css'),'norm">',_m1[0],'</div></',_m3[2],'>');_._m5=[_mC('me'+m.id+','+_.id),_mC('mi'+m.id+','+_.id),_m9(l,_mO,'css')];if(_m1.length>2){_._m2=[];for(i=2;i<_m1.length;i++)if(_m1[i])new _mE(l+1,_,m,_m1[i]);}}function _mA(_,_mJ){if(_._mQ==_mJ)return;_._mQ=_mJ;if(_mJ)_._m5[0].style.visibility='visible';else if(_._m8)_._m5[0].style.visibility='hidden';}function _mB(_,_mM){if(_._m5[3]==_mM)return;_._m5[3]=_mM;_._m5[1].className=_._m5[2]+_mM}function _m9(l,_mO,k){for(var i=l;i>=-1;i--)if(_mO[i]&&_mO[i][k]!=null)return _mO[i][k];}


</script>

	<script language=JavaScript>
var menuHierarchy = [
	['Europe', null,
		['Germany', null, ['Berlin'], ['Hamburg'], ['M&uuml;nchen']],
		['Turkey', null, ['&Igrave;stanbul'], ['Ankara'], ['&Igrave;zmir']],
		['United Kingdom', null, ['London'], ['Birmingham'], ['Glasgow']],
		['France', null, ['Paris'], ['Marseille'], ['Lyon']],
		['Italy', null, ['Roma'], ['Milano'], ['Napoli']]
	],
	['America', null,
		['U.S.A.', null, ['New York'], ['Los Angeles'], ['Chicago']],
		['Brazil', null, ['Sa&otilde; Paulo'], ['Rio de Janeiro'], ['Salvador']],
		['Mexico', null, ['Ciudad de Mexico'], ['Guadalajara'], ['Ecatepec']],
		['Colombia', null, ['Bogot&aacute;'], ['Cali'], ['Medell&iacute;n']],
		['Argentina', null, ['Buenos Aires'], ['C&oacute;rdoba'], ['San Justo']]
	],
	['Asia', null,
		['China', null, ['Shanghai'], ['Beijing'], ['Tianjin']],
		['India', null, ['Mumbai'], ['Kolkata'], ['Delhi']],
		['Indonesia', null, ['Jakarta'], ['Surabaya'], ['Bandung']],
		['Pakistan', null, ['Karachi'], ['Lahore'], ['Faisalabad']],
		['Bangladesh', null, ['Dhaka'], ['Chittagong'], ['Khulna']]
	],
	['Africa', null,
		['Nigeria', null, ['Lagos'], ['Kano'], ['Ibadan']],
		['Egypt', null, ['Al-Qahirah'], ['Al-Iskandariyah'], ['Al-Jizah']],
		['Ethiopia', null, ['Adis Abeba'], ['Dire Dawa'], ['Nazret']],
		['Congo', null, ['Kinshasa'], ['Lubumbashi'], ['Mbuji-Mayi']],
		['Sudan', null, ['Umm Durman'], ['Al-Khartum'], ['Al-Khartum Bahr&iuml;']]
	],
	['Australia', null,
		['Australia', null, ['Sydney'], ['Melbourne'], ['Brisbane']]
	]
];



</script>

<style>
body {
	font: 11px Arial,Verdana,Helvetica,sans-serif;
}
</style>
<style>
.gurtl0norm {
	padding: 4px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid #5E8383;
	border-left: 4px solid #5E8383;
	background: #5E8383;
	color: white;
	cursor: hand;
}
.gurtl0over {
	padding: 4px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid #A4A4A4;
	border-left: 4px solid #E1B700;
	background: #A4A4A4;
	color: white;
	cursor: hand;
}
.gurtl0clck {
	padding: 4px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid #A4A4A4;
	border-left: 4px solid #E1B700;
	background: #949494;
	color: white;
	cursor: hand;
}
.gurtl1norm {
	padding: 3px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid white;
	border-left: 4px solid #EBEFEF;
	background: #EBEFEF;
	color: #243D4B;
	cursor: hand;
}
.gurtl1over {
	padding: 3px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid white;
	border-left: 4px solid #E1B700;
	background: #EBEFEF;
	color: #243D4B;
	cursor: hand;
}
.gurtl1clck {
	padding: 3px;
	font: 12px Arial, Tahoma, Verdana, Geneva, Helvetica, sans-serif;
	text-decoration: none;
	border: 1px solid white;
	border-left: 4px solid #E1B700;
	background: #DBDFDF;
	color: #243D4B;
	cursor: hand;
}
</style>


</head>
<body bottommargin="0" topmargin="15" leftmargin="15" marginheight="15" marginwidth="15">
One page can contain as many navigation menus as you need. The number is limited only by clients computing resources.

Menu can share their config and hierarchy, partially or in full.

Menus, if several, can appear on a page not in a order they are mentioned in its source code.

<script language="JavaScript">
<!--
new menu (menuHierarchy, [
{
	'height':  25,
	'width' : 70,
	'firstX' : 100,
	'firstY' : 65,
	'nextX' : 1,
	'hideAfter' : 200,
	'css'   : 'gurtl0',
	'trace' : true
},
{
	'height':  23,
	'width' : 110,
	'firstY' : 25,
	'firstX' :  0,
	'nextY' : -1,
	'css' : 'gurtl1'
},
{
	'firstX' : 111,
	'firstY' : 0
}
])

new menu (menuHierarchy, [
{
	'height':  25,
	'width' : 70,
	'firstX' : 15,
	'firstY' : 65,
	'nextY' : 1,
	'hideAfter' : 200,
	'css'   : 'gurtl0',
	'trace' : true
},
{
	'width' : 110,
	'firstY' :  0,
	'firstX' : 71,
	'nextY' : -1,
	'css' : 'gurtl1'
},
{
	'firstX' : 111,
	'firstY' : 0
}
])
//-->
</script>

[gengix]

Dimenticati javascript, lo puoi fare con i css, se fai una ricerca sul forum è un argomento trattato diverse volte.

Vai qui:
http://www.cssplay.co.uk/menus/

trovi tutti i tipi di menu solo css, puoi anche accedere al codice sorgente.

Se non sbaglio un menu simile al tuo è questo:
http://www.cssplay.co.uk/menus/fly_drop.html