Раздвижение ячеек
Как сделать так.
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, время: 18:00. |