Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Раздвижение ячеек (https://javascript.ru/forum/dom-window/10199-razdvizhenie-yacheek.html)

Мендыбаев Игорь 23.06.2010 11:33

Раздвижение ячеек
 
Как сделать так.
1) Контейнер в виде таблицы (table или div не имеет значение) 3 строки 3 столбца (к примеру). в каждой яейки будет ссылка, при наведении на которую будет появляться подменю. Но нужно сделать именно так, что-бы выпадающее подменю не уходило на нижнюю строку и не перекрывало ее, а раздвигала свою строку?

Skipp 23.06.2010 11:41

Вот сырой код, смотри:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function show(elem)
{
	var div = document.createElement('div');
	div.innerHTML = " - first 2";
	elem.parentNode.appendChild(div);
}
</script>
</head>
<body>
<div><div onclick="show(this)">first</div></div>
<div>two</div>
</body>
</html>

Мендыбаев Игорь 23.06.2010 11:57

Классно. А как сделать что-бы это было при наведении.
При чем при наведении выпадал весь блок (к примеру будет 3 подменю
first
- first 2
- first 2
- first 2), а не по отдельности при каждом нажатии?

Skipp 23.06.2010 12:00

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function show(elem)
{
	
	var div = document.createElement('div');
	div.innerHTML = " - first 1";
	elem.parentNode.appendChild(div);
	var div = document.createElement('div');
	div.innerHTML = " - first 2";
	elem.parentNode.appendChild(div);
	var div = document.createElement('div');
	div.innerHTML = " - first 3";
	elem.parentNode.appendChild(div);
}
</script>
</head>
<body>
<div><div onmouseover="show(this)">first</div></div>
<div>two</div>
</body>
</html>

Мендыбаев Игорь 23.06.2010 12:10

Ну и последний вопрос.
А как сделать, что-бы при наведении выпадал только один болк подменю
first
- first 1
- first 2
- first 3,
а после убирания все возвращалось к
first
и все вновь сужалось?

Skipp 23.06.2010 12:37

Мендыбаев Игорь,
А может начнёте уже учить js?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function show(elem)
{
	
	var div = document.createElement('div');
	div.innerHTML = " - first 1";
	elem.parentNode.appendChild(div);
	var div = document.createElement('div');
	div.innerHTML = " - first 2";
	elem.parentNode.appendChild(div);
	var div = document.createElement('div');
	div.innerHTML = " - first 3";
	elem.parentNode.appendChild(div);
}
function del(elem)
{
	var fel = elem.parentNode.firstChild;
	while(fel.tagName != "DIV")
		 fel = fel.nextSibling;
	var lel = elem.parentNode.lastChild;
	while(fel != lel)
	{
		elem.parentNode.removeChild(lel);
		lel = elem.parentNode.lastChild;
	}
}
</script>
</head>
<body>
<div><div onmouseover="show(this)" onmouseout="del(this)">first</div></div>
<div>two</div>
</body>
</html>

Мендыбаев Игорь 23.06.2010 12:46

Очень благодарен.

Так я учу его, просто очень медленно)))
Синтаксис понятен еле еле, плюс сами условия не знаю, типа "document.getElementById" . Вот беру ваши примеры и разбираю досканально, при чем со словарем. А если бы был справочник. В котором указывалось бы, что "document.getElementById" это извлечение элемента по идентификатору, а не приходилось бы самому переводить дословно было бы вообще круто. Еще раз спасибо, очень помогло)))

e1f 23.06.2010 14:03

Цитата:

Сообщение от Мендыбаев Игорь (Сообщение 60732)
Очень благодарен.

Так я учу его, просто очень медленно)))
Синтаксис понятен еле еле, плюс сами условия не знаю, типа "document.getElementById" . Вот беру ваши примеры и разбираю досканально, при чем со словарем. А если бы был справочник. В котором указывалось бы, что "document.getElementById" это извлечение элемента по идентификатору, а не приходилось бы самому переводить дословно было бы вообще круто. Еще раз спасибо, очень помогло)))

Бред. Хотели бы, давно уже выучили. Справочник по методам есть на этом сайте.

рони 23.06.2010 16:31

Skipp,
Вопрос, если конечно есть желание голову поломать, как воспользоваться таким выпадающим меню? )))))))
Немного поясню: скажем "- first 1" это ссылка, как умудриться её нажать?

Skipp 23.06.2010 16:39

рони,
не знаю) что меня просили, то я и написал:)

Точнее знаю, но не таким путём.
Можно допустим ловить таргеты.


Часовой пояс GMT +3, время: 18:00.