| |
|
|
| | Здравствуйте Уважаемое сообщество.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
#iMenu {float: left; width: 705px; border: 1px solid black}
#iMenu div.cBtn {float: left; width: 231px; height: 53px; line-height: 53px; text-align: center; cursor: pointer; font-weight: bold; color: black; text-decoration: underline; }
#iMenu #iBtn0 {background-image: url('http://www.my-page29.narod.ru/image/link-1.jpg')}
#iMenu #iBtn1 {background-image: url('http://www.my-page29.narod.ru/image/link-2.jpg'); margin: 0 6px}
#iMenu #iBtn2 {background-image: url('http://www.my-page29.narod.ru/image/link-3.jpg')}
#iMenu #iClr {clear: both}
#iMenu div.cPan {float: left; overflow: hidden; width: 231px; height: 1px}
#iMenu #iPan1 {margin: 0 6px}
</style>
<!--[if IE]><style>#iMenu {width: 707px}</style><![endif]-->
<script>
function fFormContent (x, y) //JS-код формирования содержимого панелей, вам он не нужен, потом удалите
{
for (var s = '<ol>', j = 0; j < x; j++) s += '<li>' + y; with (document) {open (); write (s + '</ol>'); close ()}
} //конец кода формирования содержимого панелей
var gStatus = new Array (0, 0, 0); //Статус трёх пар "кнопка/панель":
// 0 - кнопка активна / панель полностью свёрнута
// 1 - кнопка недоступна / панель в процессе разворачивания
// 2 - кнопка активна / панель полностью развёрнута
// 3 - кнопка недоступна / панель в процессе сворачивания
var gTimer = null; //состояние таймера
function fChangeStatus (x)
{
if (gStatus [x] % 2) return; //статус нечётный (1 или 3), кнопка недоступна, выходим из функции
gStatus [x] = (!gStatus [x]) ? 1 : 3; //установка нового статуса (1 - разворачиваем или 3 - сворачиваем)
with (document.getElementById ('iBtn' + x).style)
{fontWeight = 'normal'; color = 'gray'; textDecoration = 'none'; cursor = 'default'} //делаем кнопку неактивной
if (!gTimer) fProcess (); //запускаем таймер, если он ещё не включён
}
function fProcess ()
{
for (var k = j = 0, l = gStatus.length; j < l; j++) //просматриваем статусы всех пар "кнопка-панель"
{
var st = gStatus [j]; if (st % 2) //если статус нечётный (1 или 3), то сворачиваем/разворачиваем
{
var obj = document.getElementById ('iPan' + j);
var he = obj.offsetHeight + 1 * ((st == 1) ? 1 : -1); //определяем текущую высоту панели и изменяем её (в плюс или в минус, в зависимости от статуса)
obj.style.height = he + 'px';
if (st == 1 && he == obj.scrollHeight) gStatus [j] = 2; //меняем статус на "полностью развёрнута"
if (st == 3 && he == 1) gStatus [j] = 0; //меняем статус на "полностью свёрнута"
if (st != gStatus [j]) with (document.getElementById ('iBtn' + j).style)
{fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной
else k++; //статус не изменился, надо продолжать процесс, меняем флаг
}
}
if (k) gTimer = setTimeout (fProcess, 5); else gTimer = null; //продолжаем процесс или выходим из него
}
</script>
</head>
<body>
<div id="iMenu">
<div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)">Размещение рекламы</div>
<div class="cBtn" id="iBtn1" onclick="fChangeStatus (1)">Изготовление рекламы</div>
<div class="cBtn" id="iBtn2" onclick="fChangeStatus (2)">Интернет-проекты</div>
<div id="iClr"></div>
<div class="cPan" id="iPan0"><script>fFormContent (20, 'Размещение' )</script></div>
<div class="cPan" id="iPan1"><script>fFormContent (15, 'Изготовление' )</script></div>
<div class="cPan" id="iPan2"><script>fFormContent (10, 'Интернет-проект')</script></div>
</div>
</body>
</html>
|
Данный код обеспечивает раскладку горизонтальных кнопок, какие изменения сделать чтобы кнопки располагались вертикально, одна под другой и шла раскладка | |
| |
|
|
| |
|
|
| |
для: pautina
(24.02.2010 в 09:02)
| | | И в каком направлении "раскладывать" хотите?
В вертикальном? Чтобы содержимое первого меню при раскрытии
перекрывало доступ ко второй и третьей кнопкам? :-)
Или как? | |
| |
|
|
| |
|
|
| |
для: АЯ
(24.02.2010 в 10:01)
| | | Хотелось бы чтобы работало так.
Раскладка кнопок идёт вниз, нажимаем 1 кнопку раскладывается подменю, 2 кнопка и 3 при раскладки первой смещается вниз. | |
| |
|
|
| |
|
|
| |
для: pautina
(24.02.2010 в 10:04)
| | | 1. Уберите float: left из стилей отовсюду
2. Уберите margin: 0 6px из стилей отовсюду
3. Уберите <div id="iClr"> из HTML-кода и соответствующий стиль для него
4. Шесть оставшихся DIV'ов внутри <div id="iMenu"> "перетасуйте" парами "Кнопка - панель":
<div id="iBtn0">
<div id="iPan0">
<div id="iBtn1">
<div id="iPan1">
<div id="iBtn2">
<div id="iPan2">
|
5. Запускайте и любуйтесь придуманным вами ужасом в степени кошмар :-) | |
| |
|
|
| |
|
|
| |
для: АЯ
(24.02.2010 в 10:24)
| | | Да согласен ужас.
Может для кнопок и для панели flot: left нужно. или br после панели поставить. | |
| |
|
|
| |
|
|
| |
для: pautina
(24.02.2010 в 10:32)
| | | >"Может для кнопок и для панели flot: left нужно. или br после панели поставить."
Странно... что-то я вас не понял... Что это может дать в принципе?
Выложите сюда код, который у вас получился по моим рекомендациям. | |
| |
|
|
| |
|
|
| |
для: АЯ
(24.02.2010 в 10:49)
| | | Извиняюсь. Вот код.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style>
#iMenu { float: left; width: 705px; border: 1px solid black}
#iMenu div.cBtn { width: 231px; height: 53px; line-height: 53px; text-align: center; cursor: pointer; font-weight: bold; color: black; text-decoration: underline; }
#iMenu #iBtn0 { background: url('http://www.my-page29.narod.ru/image/link-1.jpg') left top no-repeat; margin:5px; padding:0px; }
#iMenu #iBtn1 { background: url('http://www.my-page29.narod.ru/image/link-2.jpg') left top no-repeat; margin:5px; padding:0px; }
#iMenu #iBtn2 { background: url('http://www.my-page29.narod.ru/image/link-3.jpg') left top no-repeat; margin:5px; padding:0px; }
/*#iMenu #iClr {clear: both} */
#iMenu div.cPan { overflow: hidden; width: 231px; height: 1px}
#iMenu #iPan0 { }
#iMenu #iPan1 { }
#iMenu #iPan2 { }
</style>
<!--[if IE]><style>#iMenu {width: 707px}</style><![endif]-->
<script>
function fFormContent (x, y) //JS-код формирования содержимого панелей, вам он не нужен, потом удалите
{
for (var s = '<ol>', j = 0; j < x; j++) s += '<li>' + y; with (document) {open (); write (s + '</ol>'); close ()}
} //конец кода формирования содержимого панелей
var gStatus = new Array (0, 0, 0); //Статус трёх пар "кнопка/панель":
// 0 - кнопка активна / панель полностью свёрнута
// 1 - кнопка недоступна / панель в процессе разворачивания
// 2 - кнопка активна / панель полностью развёрнута
// 3 - кнопка недоступна / панель в процессе сворачивания
var gTimer = null; //состояние таймера
function fChangeStatus (x)
{
if (gStatus [x] % 2) return; //статус нечётный (1 или 3), кнопка недоступна, выходим из функции
gStatus [x] = (!gStatus [x]) ? 1 : 3; //установка нового статуса (1 - разворачиваем или 3 - сворачиваем)
with (document.getElementById ('iBtn' + x).style)
{fontWeight = 'normal'; color = 'gray'; textDecoration = 'none'; cursor = 'default'} //делаем кнопку неактивной
if (!gTimer) fProcess (); //запускаем таймер, если он ещё не включён
}
function fProcess ()
{
for (var k = j = 0, l = gStatus.length; j < l; j++) //просматриваем статусы всех пар "кнопка-панель"
{
var st = gStatus [j]; if (st % 2) //если статус нечётный (1 или 3), то сворачиваем/разворачиваем
{
var obj = document.getElementById ('iPan' + j);
var he = obj.offsetHeight + 1 * ((st == 1) ? 1 : -1); //определяем текущую высоту панели и изменяем её (в плюс или в минус, в зависимости от статуса)
obj.style.height = he + 'px';
if (st == 1 && he == obj.scrollHeight) gStatus [j] = 2; //меняем статус на "полностью развёрнута"
if (st == 3 && he == 1) gStatus [j] = 0; //меняем статус на "полностью свёрнута"
if (st != gStatus [j]) with (document.getElementById ('iBtn' + j).style)
{fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной
else k++; //статус не изменился, надо продолжать процесс, меняем флаг
}
}
if (k) gTimer = setTimeout (fProcess, 5); else gTimer = null; //продолжаем процесс или выходим из него
}
</script>
</head>
<body>
<div id="iMenu">
<div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)">Размещение рекламы</div>
<div class="cPan" id="iPan0"><script>fFormContent (20, 'Размещение' )</script></div>
<div class="cBtn" id="iBtn1" onclick="fChangeStatus (1)">Изготовление рекламы</div>
<div class="cPan" id="iPan1"><script>fFormContent (15, 'Изготовление' )</script></div>
<div class="cBtn" id="iBtn2" onclick="fChangeStatus (2)">Интернет-проекты</div>
<div class="cPan" id="iPan2"><script>fFormContent (10, 'Интернет-проект')</script></div>
<!-- <div id="iClr"></div> -->
</div>
</body>
</html>
|
В принцыпе все работает, в чём ужас :-) | |
| |
|
|
| |
|
|
| |
для: pautina
(24.02.2010 в 10:54)
| | | В том и ужас - что оно РАБОТАЕТ.
Огромные... Цветные... Уплывающие вниз кнопки... Это же - кошмар...
У вас, что, совершенно нет чувства вкуса?:-) | |
| |
|
|
| |
|
|
| |
для: АЯ
(24.02.2010 в 11:00)
| | | Мне пока только метод создания нужно было сделать.
То что кнопки огромные и не смотрится это ничего, главное в будущем этот способ я могу использовать, и в нужный дизайн вставить. | |
| |
|
|
