EXxX
-
Posts
2 -
Joined
-
Last visited
EXxX's Achievements
Explorer (1/14)
0
Reputation
-
Спасибо за совет. А смену табов как-то можно сделать анимированную?
-
Здравствуйте, уважаемые форумчане. Сразу проше не бить меня ногами, я уважаю Ваше время, но решить проблему своими силами не могу. Поэтому прошу помощи у тех, кто найдет возможность. Суть вот в чем - нужно сделать сайт на РНР с принципом навигации и отображения информации как вот тут Вопрос целесообразности очень прошу не поднимать. основательно порыл Ваш форум и, как мне показалось, нашел подходящий мне пример скрипта. К сожалению, моих возможностей и знаний не хватило на то, чтобы все сделать как следует. Пытался разобраться хотя бы в принципе действия и сделал вот это: <html> <head> <title></title> <link rel="stylesheet" href="" type="text/css" media="screen" /> <style> #iMenu {float: left; width: 515px; border: 1px solid; } #iMenu div.cBtn {float: left; width: 200px; height: 40px; line-height: 53px; text-align: center; cursor: pointer; font-weight: bold; color: black; text-decoration: underline; font-size:14px; border: 1px solid; } #iMenu div.cBtn img { width: 14px; height: 14px; margin: 0px 10px 0px 0px; } #iMenu #iClr {clear: both} /* панель, которая выдвигается */ #iMenu div.cPan {float: left; overflow: hidden; width: 1px; height: 100%} #iMenu #iPan1 {margin: 0 10px} /* link1 стили для 1-ой раскрывающейся фигни */ .vneshniy_link1 { width:100px; height: 50px; margin:0 auto; padding:0px; position: relative; left: 0px; top: 0px; border: 1px solid; } /* link2 стили для 2-ой раскрывающейся фигни */ .vneshniy_link2 { width:100px; height: 50px; margin:0 auto; padding:0px; position: relative; left: 105px; bottom: 52px; border: 1px solid; } <!--[if IE]><style>#iMenu {width: 515px}</style><![endif]--> <!-- ширина меню если браузер IE --> </style> <script src="" type="text/javascript"></script> <script> // JavaScript Document <!-- ФУНКЦИЯ ДЛЯ РАСКРЫТИЯ МЕНЮ --> 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'} //делаем кнопку неактивной document.getElementById ('iBtn' + x).firstChild.style.visibility = 'hidden'; 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 wd = obj.offsetWidth + 2 * ((st == 1) ? 1 : -2); //определяем текущую ширину панели и изменяем её (в плюс или в минус, в зависимости от статуса) obj.style.width = wd + 'px'; if (st == 1 && wd == obj.scrollWidth) {gStatus [j] = 2;} //меняем статус на "полностью развёрнута" if (st == 3 && wd == 1) {gStatus [j] = 0;} //меняем статус на "полностью свёрнута" if (st != gStatus [j]) {with (document.getElementById ('iBtn' + j).style) {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной document.getElementById ('iBtn' + j).firstChild.style.visibility = 'visible'} 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)" float="left"><img src="" />Выдвинуть/Задвинуть</div> <div class="cPan" id="iPan0"> <div class="vneshniy_link1"> текст_1 </div> <div class="vneshniy_link2"> текст_2 </div> <div id="iClr"></div> </div> <!-- #iPan0 --> </div> <!-- #iMenu --> </body> </html> Сейчас важен сам принцип действия, а не внешний вид. Не могу понять, почему первый блок, после открывания, сдвигается вправо пока не откроется второй. Если не затруднит, помогите советом или примером. Может, я вообще не в том направлении двигаюсь. Заранее спасибо!