Всем доброго времени суток.
Прощу помощи у тех, кто разбирается в JavaScript, т.к. сам я его очень плохо знаю. В общем ситуация такова, есть у меня сайт у него есть три основных категории: продажа, покупка, обмен. При наведении на них выпадет список подкатегорий. Само выпадение производит небольшой яваскрипт. Дело в том, что этот скрипт ранее был гораздо сложнее и он осуществлял красивое плавное выпадение (развертывание списка) и его плавное свёртывание. Со временем вид списка я изменил и эта "плавность" перестала быть нужной. Я, в меру своих возможностей и путём проб и ошибок всё таки смог удалить большую часть кода и тем самым уменьшив его вес и размер. Но, как мне кажется, имеющийся код можно ещё унифировать. Помогите и подскажите что ещё там необходимо лишнее удалить, но чтобы он выполнял функцию моментального отображения если курсор наведён на категорию или подкатегорию из выпавшего списка и моментального скрытия списка, в случае если курсор уведён? Короче всё также, как есть сейчас.
Код яваскрипта постараюсь выложить тут:
Код HTML на сайте:
Прощу помощи у тех, кто разбирается в JavaScript, т.к. сам я его очень плохо знаю. В общем ситуация такова, есть у меня сайт у него есть три основных категории: продажа, покупка, обмен. При наведении на них выпадет список подкатегорий. Само выпадение производит небольшой яваскрипт. Дело в том, что этот скрипт ранее был гораздо сложнее и он осуществлял красивое плавное выпадение (развертывание списка) и его плавное свёртывание. Со временем вид списка я изменил и эта "плавность" перестала быть нужной. Я, в меру своих возможностей и путём проб и ошибок всё таки смог удалить большую часть кода и тем самым уменьшив его вес и размер. Но, как мне кажется, имеющийся код можно ещё унифировать. Помогите и подскажите что ещё там необходимо лишнее удалить, но чтобы он выполнял функцию моментального отображения если курсор наведён на категорию или подкатегорию из выпавшего списка и моментального скрытия списка, в случае если курсор уведён? Короче всё также, как есть сейчас.
Код яваскрипта постараюсь выложить тут:
| Код |
|---|
function ddMenu(id,dir)
{
var head = document.getElementById(id + '-ddhead');
var cont = document.getElementById(id + '-ddcont');
clearInterval(cont.timer);
if (dir == 1)
{
clearTimeout(head.timer);
if (cont.maxh && cont.maxh <= cont.offsetHeight)
{
return;
}
else if (!cont.maxh)
{
cont.style.display = 'block';
cont.style.height = 'auto';
}
cont.timer = setInterval("ddSlid('" + id + "-ddcont', 1)");
}
else
{
head.timer = setTimeout("ddColl('" + id + "-ddcont')");
}
}
function ddColl(id)
{
var cont = document.getElementById(id);cont.timer = setInterval("ddSlid('" + id + "', -1)");
}
function ddHide(id)
{
var head = document.getElementById(id + '-ddhead');
var cont = document.getElementById(id + '-ddcont');
clearTimeout(head.timer);
clearInterval(cont.timer);
if (cont.offsetHeight < cont.maxh)
{
cont.timer = setInterval("ddSlid('" + id + "-ddcont', 1)");
}
}
function ddSlid(id,dir)
{
var cont = document.getElementById(id);
var currheight = cont.offsetHeight;
var dist;
if (dir == 1)
{
dist = (cont.maxh - currheight);
}
else
{
dist = currheight;
}
if (dist <= 1)
{
dist = 1;
}
cont.style.height = currheight + (dist * dir) + 'px';
}
|
Код HTML на сайте:
| Код |
|---|
<li class=""><div id="one-ddhead" OnMouseOver="ddMenu('one',1)" OnMouseOut="ddMenu('one',-1)"><a class="lev" href="/prodam/">Продажа</a></div>
<div class="ddconte" id="one-ddcont" OnMouseOver="ddHide('one')" OnMouseOut="ddMenu('one',-1)">
<div class="ddinner">
<ul>
<li><a href="/prodam/acer/">Acer • 216</a></li>
</ul>
</div>
</div>
</li>
<li class=""><div id="two-ddhead" OnMouseOver="ddMenu('two',1)" OnMouseOut="ddMenu('two',-1)"><a class="lev" href="/kuplu/">Покупка</a></div>
<div class="ddconte" id="two-ddcont" OnMouseOver="ddHide('two')" OnMouseOut="ddMenu('two',-1)">
<div class="ddinner">
<ul>
<li><a href="/kuplu/acer/">Acer • 4</a></li>
</ul>
</div>
</div>
</li>
<li class=""><div id="tree-ddhead" OnMouseOver="ddMenu('tree',1)" OnMouseOut="ddMenu('tree',-1)"><a class="lev" href="/obmen/">Обмен</a></div>
<div class="ddconte" id="tree-ddcont" OnMouseOver="ddHide('tree')" OnMouseOut="ddMenu('tree',-1)">
<div class="ddinner">
<ul>
<li><a href="/obmen/acer/">Acer • 1</a></li>
</ul>
</div>
</div>
</li>
|
