Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Смещение ячеек, после наведения 
:(
    Опции темы
Guedda
Дата 21.11.2007, 11:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



Доброго времени суток. Подскажите, как можно лучше реализовать следующее. есть три ячейки таблицы, под ними располагается одна единственная ячейка с текстом (см. рис.):
user posted image
так вот после наведения мышкой на слово Меню, раскрывалось меню, а весь текст смещался вправо (то есть, освобождение как бы для этого меню (имеется ввиду, что меню не закрывает текст.)) как на втором рисунке:
user posted image

Подскажите, пожалуйста, как и через что это лучше реализовать?

Заранее благодарен.

Это сообщение отредактировал(а) Guedda - 21.11.2007, 11:04


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
Castro
Дата 21.11.2007, 11:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: 3
Всего: 5



Единственное, что приходит в голову- это обрабатывать onMouseOver меню, а потом через DOM менять параметры ячейки с текстом, как вариант делать ей colspan=2, задавая левой ячейке размер равный ширине меню + ещё некоторый отступ для удобства чтения, но не ясно конечно в какой из этих ячеек окажется текст.
Ещё можно сделать блоками -это ИМХО проще.
Тот же onMouseOver меню, но пока меню не активно, левый <div style="display:none;width:200px;">(хм..возможено ещё нужно и float:left),  правому не указываете ширину - он и так должен занять всю ширину содержащего блока.  
Как только наводите на меню курсор, меняем стиль скрытого блока на display:block - у Вас вылезает Вас левый блок и двигает "резину" справа.
 smile 

Это сообщение отредактировал(а) Castro - 21.11.2007, 12:11


--------------------
user posted image
PM MAIL ICQ GTalk   Вверх
dstorm81
Дата 21.11.2007, 12:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



положить внуть большой объединенной ячейки div со стилем float и display:none
а потом когда меню будет выпадапть присваивать этому div display="block"

вот как то так 




--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
Guedda
Дата 21.11.2007, 12:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



а как реализовать это самое присваивание??? что нужно написать примерно???


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
Castro
Дата 21.11.2007, 12:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 353
Регистрация: 31.8.2007
Где: Украина

Репутация: 3
Всего: 5



Смотрите.
Задаёте Вашему диву id, потом жабаскриптом ищете его 
function f(divID)
Код

{
var div=document.getElementByID(divID);
div.style.display="block";
}

Примерно так, если не ошибаюсь, давненько не писал на жабаскрипте.

Это сообщение отредактировал(а) Castro - 21.11.2007, 16:55


--------------------
user posted image
PM MAIL ICQ GTalk   Вверх
dstorm81
Дата 21.11.2007, 13:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


бездельник
***


Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 3
Всего: 39



Код

<html>
<head>
<style>
#s2{float:rigth;height:100%}
#s1,#s2{display:block}
#s1{width:200px;background:red;float:left;height:100%;display:none}

</style>
<script>
var make=function()
{
if(document.getElementById("s1").style.display!="block"){document.getElementById("s1").style.display="block"}
else{document.getElementById("s1").style.display="none"}
}
</script>
</head>
<body>
<table border=1>
<tbody>
<tr><td onmouseover="make()" onmouseout="make()">menu</td><td>&nbsp;</td></tr>
<tr><td colspan=2>
<div id="s1">скрываемый блок</div>
<div id="s2">
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
многа многа тектсамнога многа тектсамнога многа тектса
</div>
</td></tr>
</tbody>
</table>
</body>
</html>



--------------------
на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0993 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.