JS rozwijane menu

ImPoSiBlEe · 3 Marca 2014

Witam, otóż mam pewien problem z rozwijanym menu. Użyłem pewnego skyptu JS, który działa, lecz po odświeżeniu strony menu jest rozwinięte a to strasznie krzyżuje plany, gdyż nie wygląda to estetycznie i wychodzi po za zakres strony. Stosowałem się do wszelkich wskazówek ale nie działa na Firefoxie jak i na Chromie.

Zrobiłem Screena, żeby było wiadomo o co chodzi

http://s5975.chomikuj.pl/ChomikImage.aspx?e=lLIRAv0VNBbMrPlioEiRo5vBCDURLLigkMyouc0p9Tbhl-xILsk6rQCnls5zY3fY5xEqMJ3xpGNBESygFUz6fZ5l8rytCDIi_DHFvgxhA0c&pv=2

Chcę, żeby menu było zwinięte po odświeżeniu strony

Kod JavaScript

function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
{
	if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
	if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 250;
	if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
	if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
	
	var url = unescape(window.location.href.replace(/#.*/, ''));
	var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
	
	if (style)
	{
		if (style.indexOf(':') < 0)
		{
			document.getElementById(id).className += ' ' + style;
		}
		else
		{
			style = style.replace(/(^\s+|(\s|+$)/g, '').split(/\s*;\s*/);
			for (var i = 0; i < style.length; i++)
			{
				style[i] = style[i].split(/\s*:\s*/);
				for (var j = 0, c, property = ''; j < style[i][0].length; j++)
				{
					c = style[i][0].charAt(j);
					property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
				}
				eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
			}
		}
	}
	
	for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
	{
		var dd = new Array();
		var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
		var nodeName;
		while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
		{
			if (nodeName == 'dd')
			{
				el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
				if (otworz)
				{
					el.onmouseover = function()
					{
						clearTimeout(this._dt._timoutID);
						this._dt._displayed = false;
						this._dt.onclick();
					}
					el.onmouseout = function()
					{
						clearTimeout(this._dt._timoutID);
						var dt = this._dt;
						this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
					};
				}
				dd[dd.length] = el;
			}
			el = el.nextSibling;
		}
		document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
		document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
		document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
		document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
		{
			clearTimeout(this._timoutID);
			if (!this._displayed)
			{
				var el = this.parentNode.getElementsByTagName('dt')[0];
				while (el)
				{
					if (el.nodeName.toLowerCase() == 'dt' && el != this)
					{
						el._displayed = false;
						if (czasZwin) display(el, 0);
						else display(el);
					}
					el = el.nextSibling;
				}
			}
			this._displayed = !this._displayed;
			if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
			else display(this);
		};
		if (otworz)
		{
			document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
			{
				clearTimeout(this._timoutID);
				var dt = this;
				this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
			};
			document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
			{
				clearTimeout(this._timoutID);
				var dt = this;
				this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
			};
		}
	}
	
	start(document.getElementById(id).getElementsByTagName('dt')[0]);
	
	function start(dt)
	{
		var hide = true;
		var el = dt;
		while (el)
		{
			var nodeName = el.nodeName.toLowerCase();
			if (nodeName == 'dt')
			{
				dt = el;
				hide = true;
			}
			if (nodeName == 'dt' || nodeName == 'dd')
			{
				if (!nieInicjalizuj && el.getElementsByTagName('a').length)
				{
					var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
					if (!active)
					{
						var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
						if (rel)
						{
							var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
							if (matches)
							{
								matches = matches[1].split(',');
								for (var k = 0, pos = -1; k < matches.length; k++)
								{
									if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
									{
										if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 1)).test(url))
										{
											active = true;
											break;
										}
									}
									else
									{
										if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + window.location.host + matches[k];
										else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
										if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
										{
											active = true;
											break;
										}
									}
								}
							}
						}
					}
					if (active)
					{
						el.className = (el.className ? el.className + ' ' : '') + 'active';
						dt._displayed = true;
						display(dt);
						hide = false;
						var el_parentNode = el.parentNode;
						while (el_parentNode != document.getElementById(id))
						{
							if (el_parentNode.nodeName.toLowerCase() == 'dd')
							{
								var el_sibling = el_parentNode.previousSibling;
								while (el_sibling)
								{
									if (el_sibling.nodeName.toLowerCase() == 'dt')
									{
										el_sibling._displayed = true;
										display(el_sibling)
										break;
									}
									el_sibling = el_sibling.previousSibling;
								}
							}
							el_parentNode = el_parentNode.parentNode;
						}
					}
				}
			}
			if (nodeName == 'dd')
			{
				if (hide) el.style.display = 'none';
				start(el.getElementsByTagName('dt')[0]);
			}
			el = el.nextSibling;
		}
	}
	
	function display(dt, i)
	{
		if (typeof i == 'undefined')
		{
			for (var i = 0; i < dt._dd.length; i++)
			{
				dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
				if (!dt._displayed)
				{
					for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
					{
						dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
						display(dt._dd[i].getElementsByTagName('dt')[j]);
					}
				}
			}
		}
		else if (i < dt._dd.length)
		{
			var dir = wysun ? !dt._displayed : dt._displayed;
			var n = dir ? i : dt._dd.length - 1 - i;
			dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
			if (!dt._displayed)
			{
				for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
				{
					dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
					display(dt._dd[n].getElementsByTagName('dt')[j]);
				}
			}
			dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
		}
	}
}

Tutaj kod HTML

<dl id="menu0">
<dt>
	<div id="produkt1">											
		<div class="imgPrd"></div>
		<div class="txtPrd1"><a href="javascript:void(0)">Noże do kosiarek</a></div>
		</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt2">
		<div class="imgPrd"></div>
		<div class="txtPrd2"><a href="javascript:void(0)">Części Oryginalne</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt3">
		<div class="imgPrd"></div>
		<div class="txtPrd3"><a href="javascript:void(0)">Świece zapłonowe</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt4">
		<div class="imgPrd"></div>
		<div class="txtPrd4"><a href="javascript:void(0)">Korki paliwa</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt5">
		<div class="imgPrd"></div>
		<div class="txtPrd5"><a href="javascript:void(0)">Gaźniki</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>									
<dt>
	<div id="produkt6">
		<div class="imgPrd"></div>
		<div class="txtPrd6"><a href="javascript:void(0)">Membrany</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt7">
		<div class="imgPrd"></div>
		<div class="txtPrd7"><a href="javascript:void(0)">Sprężyny</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>									
<dt>
	<div id="produkt8">
		<div class="imgPrd"></div>
		<div class="txtPrd8"><a href="javascript:void(0)">Koła rozrusznika</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt9">
		<div class="imgPrd"></div>
		<div class="txtPrd9"><a href="javascript:void(0)">Tłoki kompletne</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt10">
		<div class="imgPrd"></div>
		<div class="txtPrd10"><a href="javascript:void(0)">Dźwignie gazu</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt11">
		<div class="imgPrd"></div>
		<div class="txtPrd11"><a href="javascript:void(0)">Pasy napędowe</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt12">
		<div class="imgPrd"></div>
		<div class="txtPrd12"><a href="javascript:void(0)">Koła</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt13">
		<div class="imgPrd"></div>
		<div class="txtPrd13"><a href="javascript:void(0)">Części odśnieżarki</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt14">
		<div class="imgPrd"></div>
		<div class="txtPrd14"><a href="javascript:void(0)">Wyposażenie</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>										
<dt>
	<div id="produkt15">
		<div class="imgPrd"></div>
		<div class="txtPrd15"><a href="javascript:void(0)">Asortyment</a></div>
	</div>
</dt>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd><a href="#"> produkt </a></dd>
	<dd style="border-bottom: solid 1px #d2cf99;"><a href="#"> produkt </a></dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0', '', false, false, 50, 0);
// ]]>
</script>

Jeżeli już był podobny post to najmocniej przepraszam, nie mogłem się dokopać.

Majkel · 5 Marca 2014

http://www.mpcforum.pl/topic/1161507-js-rozwijane-menu/#entry9972294

Zaloguj się

👋 Witaj na MPCForum!

JS rozwijane menu

Rekomendowane odpowiedzi

ImPoSiBlEe

ImPoSiBlEe

Majkel

Majkel

Zarchiwizowany