прокручивающееся подменю
 

доброго времени суток.
проблема в том что подменю очень длинные и выходят за границу страницы, и ничего другого представить себе не могу как прокручивающееся подменю.

помогите с реализацией на javascript.
уже который день сижу на месте, не знаю что искать, куда смотреть.

css-свойство overflow

)), угу.
но ставить полосу прокрутки подменюшке не красиво.
а значит надо без неё "проворачивать" список, скрывая элементы которые "уходят" за границу видимости.

к тому же надо "родить" )) как определить стрелка(курсор) мышки ниже половины списка или выше, что бы прокрутить список к началу или концу

каждый элемент списка ловит события наведения мышки, далее начинается просчет координат каждого элемента, при этом должны быть два массива с отображенными элементами и скрытыми. функция изменения положения элементов должна знать координаты начала и конца списка. если координаты первого отображенного элемента выходят за границы дива то мы его скрываем и переносим в массив скрытых, и одновременно показываем первый скрытый элемент в конце списка. (организуем два стека, короче) вместе с тем запускается функция перемещения всех элементов списка вверх или вниз. Хотя в том что удасться обеспечить их плавное перемещение я сильно сомневаюсь :)

вот наверно как-то так :)

огого. страшно звучит. я думал вообще без массивов обойтись, просто статичными списками, которыми "ёрзать" :D

Slavenin то что вы описали смахивает на эту реализацию http://deluxe-menu.com/scrollable-submenus-sample.html...но такое собирать это ужас, да и у меня двуязычное меню, в два раза больше возни...

ну да, примерно тоже самое, ничего сложного, меню разве что прописывать, но их можно отдельно в файликах хранить или в бд. я просто точно не помню, можно ли переместить элемент за границу дива, чтобы при этом не изменился сам размер дива, если можно, то вполне можно обойтись одним списком менюшек, просто менять их координаты и вверх вниз и все, самая большая сложность это отслеживать и менять функции смещения для каждого элемента, чтобы то что ниже центра смещало элементы вниз, а то что выше вверх.

<ul id="p" onmousemove="gg(event, this)">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>

* { margin: 0; padding: 0; }

#p { 
border:1px solid #000;
height: 200px;
overflow-y: scroll;
}

function gg(e,t){
var percent=t.offsetHeight/100; // %=(всего/100)
percent=Math.floor(e.clientY/percent); // %=(позиция/%)

if(percent<25)
{
	//up
}
else if(percent>75)
{
	//down
}
}

вот такую фигню собрал...но не получается список "провернуть", не срабатывает ни scroll, ни scrollBy, ни scrollTo, даже когда overflow-y: scroll, не говоря уже о overflow-y: hidden.
может кто подскажет, как должно быть? как правильно

спасибо отозвавшимся. сам разобрался. хотя если у кого нить идеи возникнут, я буду рад услышать.

каждый элемент на страницу имеет свои координаты можно их менять http://javascript.ru/ui/offset двигая весь список целиком вверх или вниз

всё никак скрипт до ума не доведу.
попытался приспособить код к меню.
меню многоуровневое, с выпадающими списками которые ограничены высотой в 200px

var sliding=false;

function up(t){
sliding=clearInterval(sliding);
sliding=setInterval(
						function()
						{
							if(t.scrollTop>0) t.scrollTop--; 
							else sliding=clearInterval(sliding); 
						}
					, 20);
}

function down(t){
var From=t.scrollTop+t.offsetHeight;
sliding=clearInterval(sliding);
sliding=setInterval(
						function()
						{
							if(From<t.scrollHeight) t.scrollTop++; 
							else sliding=clearInterval(sliding); 
						}
					, 20);
}

function gg(e,t){
var ee = e.target || e.srcElement;
var percent=t.offsetHeight/100;
percent=Math.floor((e.clientY-t.offsetParent.offsetTop)/percent);
if(percent<20) up(t); 
else if(percent>80) down(t);
}

function stop(){ sliding=clearInterval(sliding); }

window.onload = function(){

var start=document.getElementById('nav_v');
var height=start.getElementsByTagName('li')[0].offsetHeight;
var all=start.getElementsByTagName('ul');
	for(var i=0; i<all.length; i++)
	{
		if((all[i].childNodes.length * height) > 200)
		{
			all[i].style.overflow = 'hidden';
			all[i].onmouseout = stop;
			all[i].onmouseover=function(event){ gg(event || window.event, this); };
		}
	}
}

больше всего волнует функция gg(e,t) (хотя не против если и в других укажите на ошибки).
в прототипе "процент" (позицию курсора мышки относительно выпадающего списка) вычислял в при помощи

percent=Math.floor((e.clientY-t.offsetTop)/percent);

и всё бы ничего, но когда прикрутил к рабочему меню скрипт начал "козлить", долго думая и ища окольные пути додумал до

percent=Math.floor((e.clientY-t.offsetParent.offsetTop)/percent);

работает лучше, но процент вычисляет с погрешностью.

кто по толковее подскажите как исправить :help:
буду весьма признателен.