+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: JS menu rozwijane (/thread-js-menu-rozwijane)
JS menu rozwijane - teN - 13-01-2010
Dziś pierwszy raz zainteresowałem się JS i mam taki problem chcę miec menu rozwijane płynnie. Mam jakiś kod i jak w tym menu jest tekst to wszystko pięknie sie płynnie rozwija lecz jeśli mam tam grafike ( ma tam znajdowac sie grafika ) to jak kliknę na nagłówek to wyskakuje od razu wszystkie obrazki a mają sie rowijac płynnie można temu zaradzic?
html
Kod:
<!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" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Portal twojego telefonu" />
<meta name="Keywords" content="Sony Ericsson, tapety ,animacje, tapety, motywy, twoj se, se," />
<link rel="Stylesheet" type="text/css" href="style.css" />
<title>Sone Ericsson Dla ciebie | Portal dla twojego telefonu</title>
<link rel="Shortcut icon" href="images/i.ico" />
<script type="text/javascript">
// <![CDATA[
new Menu('menu0');
// ]]>
</script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body link="#00c6ff" vlink="white" alink="lightblue">
<center>
<div id="gora"><a href="index.html"><img border="0" src="images/logo.PNG" /> </a></div>
<div id="hed">
<div id="menu" border="0">
<a href="index.html" style="text-decoration: none">Strona Glowna</a>
<a href="tapety.html" style="text-decoration: none">Tapety</a>
<a href="motywy.html" style="text-decoration: none">Motywy</a>
<a href="gry.html" style="text-decoration: none">Gry</a>
<a href="index.html" style="text-decoration: none">Kontakt</a>
</div>
<font color="#949494" size="2"><i>By powiększyc kliknij na obrazek</i></font>
<dl id="menu0">
<dt><font color="#00c6ff" size="5"><dt>240x320</dt></font></dt>
<dd><a href="images/tapety/1.PNG"><img src="images/tapety/1s.PNG" alt="1" border="0" /></a> <a href="images/tapety/2.PNG"><img src="images/tapety/2s.PNG" alt="1" border="0"/></a> <a href="images/tapety/3.PNG"><img src="images/tapety/3s.PNG" alt="1" border="0"/></a> <a href="images/tapety/4.PNG"><img src="images/tapety/4s.PNG" alt="1" border="0"/></a> <a href="images/tapety/5.PNG"><img src="images/tapety/5s.PNG" alt="1" border="0"/></a></dd>
<dd><a href="images/tapety/6.PNG"><img src="images/tapety/6s.PNG" alt="1" border="0"/></a> <a href="images/tapety/7.PNG"><img src="images/tapety/7s.PNG" alt="1" border="0"/></a> <a href="images/tapety/8.PNG"><img src="images/tapety/8s.PNG" alt="1" border="0"/></a> <a href="images/tapety/9.PNG"><img src="images/tapety/9s.PNG" alt="1" border="0"/></a> <a href="images/tapety/10.PNG"><img src="images/tapety/10s.PNG" alt="1" border="0"/></a></dd>
<dd>Element 1.3</dd>
<dt>Nagłówek 2</dt>
<dd>Element 2.1</dd>
<dd>Element 2.2</dd>
<dd>Element 2.3</dd>
</dl>
<script type="text/javascript">
// <![CDATA[
new Menu('menu0');
// ]]>
</script>
<div id="s">
<font size="2">All right reserved by SonyEricsson4u.pl<br />
Wszelkie prawa do kopiowania zastrzeżone</font>
</div>
</div>
</center>
</body>
</html>JS
Kod:
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.boo.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
{
if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 100;
if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 100;
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);
}
}
}