Witam
Stworzyłem w html-u listę i dołączyłem do niej plik z kodem JS.
W tej chwili po odświeżeniu strony lista od razu jest rozwinięta i istnieje możliwość zwinięcia jej.
Jakie zmiany przeprowadzić w kodzie JS by po uruchomieniu strony w moim menu pojawiły się
takie nagowki:

RTV
Komputery
Zabawki

Następnie po kliknięciu rozwijały się na kategorie i po kolejnym kliknięciu podkategorie. Czyli przykładowo RTV rozwija się na rodzaje sprzętu a sprzęt na marki.

KOD HTMLł

[HTML] pobierz, plaintext 
  1. <dl id="lista">
  2. 	<dt>RTV</dt>
  3. 		<dl>
  4. 			<dt>Telewizory</dt>
  5. 				<dd>orion</dd>
  6. 				<dd>Panasonic</dd>
  7. 				<dd>Philips</dd>
  8. 				<dd>Sony</dd>
  9. 			<dt>Kamery</dt>
  10. 				<dd>orion</dd>
  11. 				<dd>Panasonic</dd>
  12. 				<dd>Philips</dd>
  13. 				<dd>Sony</dd>
  14. 			<dt>Telefony</dt>
  15. 			        <dd>Siemens</dd>
  16. 				<dd>Motorolla</dd>
  17. 				<dd>Philips</dd>
  18. 				<dd>Sony Ericson</dd>
  19. 				<dd>Nokia</dd>
  20.  
  21.  
  22. 		</dl>
  23.  
  24.  
  25.  
  26.  
  27.  
  28. 	       <dt>Komputery</dt>
  29. 		     <dl>
  30. 			<dt>Odtwarzacze mp3/mp4</dt>
  31. 				<dd>orion</dd>
  32. 				<dd>Panasonic</dd>
  33. 				<dd>Philips</dd>
  34. 				<dd>Sony</dd>
  35. 			<dt>Karty graficzne</dt>
  36. 				<dd>Nvidia</dd>
  37. 				<dd>Geforce</dd>
  38. 			<dt>Płyty glówne</dt>
  39. 				<dd>Asus</dd>
  40. 				<dd>gigabite<dd>
  41. 			<dt>Nagrywarki</dt>
  42. 				<dd>Asus</dd>
  43. 				<dd>Nec</dd>
  44. 				<dd>Samsung</dd>
  45. 			<dt>Monitory</dt>
  46. 				<dd>Acer</dd>
  47. 				<dd>Benc</dd>
  48. 		</dl>	
  49. 	   <dt>Zabawki</dt>
  50. 		<dd>Klocki</dd>
  51. 		<dd>Pojazdy sterowane</dd>
  52. 		<dd>Puzle</dd>
  53. 		<dd>Pluszaki</dd>
  54. </dl>
[HTML] pobierz, plaintext


dołączyłem
plik z kodem JS:

[PHP] pobierz, plaintext 
  1. function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
  2. {
  3. 	if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
  4. 	if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
  5. 	if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
  6. 	if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
  7.  
  8. 	var url = unescape(window.location.href.replace(/#.*/, ''));
  9. 	var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
  10.  
  11. 	if (style)
  12. 	{
  13. 		if (style.indexOf(':') < 0)
  14. 		{
  15. 			document.getElementById(id).className += ' ' + style;
  16. 		}
  17. 		else
  18. 		{
  19. 			style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
  20. 			for (var i = 0; i < style.length; i++)
  21. 			{
  22. 				style[i] = style[i].split(/\s*:\s*/);
  23. 				for (var j = 0, c, property = ''; j < style[i][0].length; j++)
  24. 				{
  25. 					c = style[i][0].charAt(j);
  26. 					property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
  27. 				}
  28. 				eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
  29. 			}
  30. 		}
  31. 	}
  32.  
  33. 	for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
  34. 	{
  35. 		var dd = new Array();
  36. 		var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
  37. 		var nodeName;
  38. 		while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
  39. 		{
  40. 			if (nodeName == 'dd')
  41. 			{
  42. 				el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
  43. 				if (otworz)
  44. 				{
  45. 					el.onmouseover = function()
  46. 					{
  47. 						clearTimeout(this._dt._timoutID);
  48. 						this._dt._displayed = false;
  49. 						this._dt.onclick();
  50. 					}
  51. 					el.onmouseout = function()
  52. 					{
  53. 						clearTimeout(this._dt._timoutID);
  54. 						var dt = this._dt;
  55. 						this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  56. 					};
  57. 				}
  58. 				dd[dd.length] = el;
  59. 			}
  60. 			el = el.nextSibling;
  61. 		}
  62. 		document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
  63. 		document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
  64. 		document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
  65. 		document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
  66. 		{
  67. 			clearTimeout(this._timoutID);
  68. 			if (!this._displayed)
  69. 			{
  70. 				var el = this.parentNode.getElementsByTagName('dt')[0];
  71. 				while (el)
  72. 				{
  73. 					if (el.nodeName.toLowerCase() == 'dt' && el != this)
  74. 					{
  75. 						el._displayed = false;
  76. 						if (czasZwin) display(el, 0);
  77. 						else display(el);
  78. 					}
  79. 					el = el.nextSibling;
  80. 				}
  81. 			}
  82. 			this._displayed = !this._displayed;
  83. 			if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
  84. 			else display(this);
  85. 		};
  86. 		if (otworz)
  87. 		{
  88. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
  89. 			{
  90. 				clearTimeout(this._timoutID);
  91. 				var dt = this;
  92. 				this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
  93. 			};
  94. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
  95. 			{
  96. 				clearTimeout(this._timoutID);
  97. 				var dt = this;
  98. 				this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  99. 			};
  100. 		}
  101. 	}
  102.  
  103. 	start(document.getElementById(id).getElementsByTagName('dt')[0]);
  104.  
  105. 	function start(dt)
  106. 	{
  107. 		var hide = true;
  108. 		var el = dt;
  109. 		while (el)
  110. 		{
  111. 			var nodeName = el.nodeName.toLowerCase();
  112. 			if (nodeName == 'dt')
  113. 			{
  114. 				dt = el;
  115. 				hide = true;
  116. 			}
  117. 			if (nodeName == 'dt' || nodeName == 'dd')
  118. 			{
  119. 				if (!nieInicjalizuj && el.getElementsByTagName('a').length)
  120. 				{
  121. 					var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
  122. 					if (!active)
  123. 					{
  124. 						var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
  125. 						if (rel)
  126. 						{
  127. 							var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
  128. 							if (matches)
  129. 							{
  130. 								matches = matches[1].split(',');
  131. 								for (var k = 0, pos = -1; k < matches.length; k++)
  132. 								{
  133. 									if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
  134. 									{
  135. 										if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
  136. 										{
  137. 											active = true;
  138. 											break;
  139. 										}
  140. 									}
  141. 									else
  142. 									{
  143. 										if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
  144. 										else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
  145. 										if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
  146. 										{
  147. 											active = true;
  148. 											break;
  149. 										}
  150. 									}
  151. 								}
  152. 							}
  153. 						}
  154. 					}
  155. 					if (active)
  156. 					{
  157. 						el.className = (el.className ? el.className + ' ' : '') + 'active';
  158. 						dt._displayed = true;
  159. 						display(dt);
  160. 						hide = false;
  161. 						var el_parentNode = el.parentNode;
  162. 						while (el_parentNode != document.getElementById(id))
  163. 						{
  164. 							if (el_parentNode.nodeName.toLowerCase() == 'dd')
  165. 							{
  166. 								var el_sibling = el_parentNode.previousSibling;
  167. 								while (el_sibling)
  168. 								{
  169. 									if (el_sibling.nodeName.toLowerCase() == 'dt')
  170. 									{
  171. 										el_sibling._displayed = true;
  172. 										display(el_sibling)
  173. 										break;
  174. 									}
  175. 									el_sibling = el_sibling.previousSibling;
  176. 								}
  177. 							}
  178. 							el_parentNode = el_parentNode.parentNode;
  179. 						}
  180. 					}
  181. 				}
  182. 			}
  183. 			if (nodeName == 'dd')
  184. 			{
  185. 				if (hide) el.style.display = 'none';
  186. 				start(el.getElementsByTagName('dt')[0]);
  187. 			}
  188. 			el = el.nextSibling;
  189. 		}
  190. 	}
  191.  
  192. 	function display(dt, i)
  193. 	{
  194. 		if (typeof i == 'undefined')
  195. 		{
  196. 			for (var i = 0; i < dt._dd.length; i++)
  197. 			{
  198. 				dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
  199. 				if (!dt._displayed)
  200. 				{
  201. 					for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
  202. 					{
  203. 						dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
  204. 						display(dt._dd[i].getElementsByTagName('dt')[j]);
  205. 					}
  206. 				}
  207. 			}
  208. 		}
  209. 		else if (i < dt._dd.length)
  210. 		{
  211. 			var dir = wysun ? !dt._displayed : dt._displayed;
  212. 			var n = dir ? i : dt._dd.length - 1 - i;
  213. 			dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
  214. 			if (!dt._displayed)
  215. 			{
  216. 				for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
  217. 				{
  218. 					dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
  219. 					display(dt._dd[n].getElementsByTagName('dt')[j]);
  220. 				}
  221. 			}
  222. 			dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
  223. 		}
  224. 	}
  225. }
[PHP] pobierz, plaintext