Раздвижение ячеек
Как сделать так.
1) Контейнер в виде таблицы (table или div не имеет значение) 3 строки 3 столбца (к примеру). в каждой яейки будет ссылка, при наведении на которую будет появляться подменю. Но нужно сделать именно так, что-бы выпадающее подменю не уходило на нижнюю строку и не перекрывало ее, а раздвигала свою строку? |
Вот сырой код, смотри:
<!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>
|
Классно. А как сделать что-бы это было при наведении.
При чем при наведении выпадал весь блок (к примеру будет 3 подменю first - first 2 - first 2 - first 2), а не по отдельности при каждом нажатии? |
<!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>
|
Ну и последний вопрос.
А как сделать, что-бы при наведении выпадал только один болк подменю first - first 1 - first 2 - first 3, а после убирания все возвращалось к first и все вновь сужалось? |
Мендыбаев Игорь,
А может начнёте уже учить 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>
|
Очень благодарен.
Так я учу его, просто очень медленно))) Синтаксис понятен еле еле, плюс сами условия не знаю, типа "document.getElementById" . Вот беру ваши примеры и разбираю досканально, при чем со словарем. А если бы был справочник. В котором указывалось бы, что "document.getElementById" это извлечение элемента по идентификатору, а не приходилось бы самому переводить дословно было бы вообще круто. Еще раз спасибо, очень помогло))) |
Цитата:
|
Skipp,
Вопрос, если конечно есть желание голову поломать, как воспользоваться таким выпадающим меню? ))))))) Немного поясню: скажем "- first 1" это ссылка, как умудриться её нажать? |
рони,
не знаю) что меня просили, то я и написал:) Точнее знаю, но не таким путём. Можно допустим ловить таргеты. |
| Часовой пояс GMT +3, время: 23:28. |