СообЧа > База Знаний > Интернет > Веб-строительство

Вопрос

Нужно сделать выпадающее меню, состоящее предположительно из более, чем 100 элементов. Но не это сложно — сложно то, что необходимое условие — когда подменю вываливается, оно должно сдвигать нижние пункты меню, а не наезжать на них. Типа вот так:

Styles
Info
Contacts

Нажимаю на Styles и получается вот так:

Styles-
        |-Rock
        |-Metal
        |-2 Step
        |-Other
Info
Contacts

Я в непонятках. Если кто согласен на альтруистичной основе мне помочь этим скриптом, помогите… Буду вечно благодарен.

Ответ

1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> New Document </TITLE></HEAD>
<style>
a {text-decoration:none}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--

function DoClick(child)
{
   o=child.style;
   (o.display == 'none')?o.display = 'block':o.display = 'none';
}
//-->
</SCRIPT>

<BODY BGCOLOR="#FFFFFF">
<TABLE border=1 id="tbl">
<TR>
         <TD>
       <div><a href="#" onClick="DoClick(c1)">+</a>Родитель
       </div>
     </td>
</tr>
  <tr>
     <td>
    <div id="c1" style="display:none" >
     &nbsp;&nbsp;&nbsp;&nbsp;Сына
     </div>
     </td>
</tr>
<tr>
     <td>
       <div><a href="#" onClick="DoClick(c2)">+</a>Родитель 2
       </div>
     <div id="c2" style="display:none">
     &nbsp;&nbsp;&nbsp;&nbsp;Сына 2<br>
     &nbsp;&nbsp;&nbsp;&nbsp;Сына 3<br>
     &nbsp;&nbsp;&nbsp;&nbsp;Сына 4<br>
     &nbsp;&nbsp;&nbsp;&nbsp;Сына 2
     </div>
     </TD>
</TR>
</TABLE>
</BODY>
</HTML>

2.
Вставьте между тэгами <Head> и </Head>:

<style>
a:link { color: #FFFF00; text-decoration: none;font-size: 8pt; font-family: Arial }
a:visited { color: #FFFF00; text-decoration: none; font-size:8pt; font-family: Arial }
a:active { color: #FFFF00; text-decoration: none; font-size: 8pt; font-family: Arial }
b { font-size: 10pt; font-family: Arial };
</style>

Вставьте между тэгами <Body> и </Body> и отредактируйте:

<script language=JavaScript> function clickHandler() {
var targetId, srcElement, targetElement; srcElement = window.event.srcElement;
if (srcElement.className == "Outline") { targetId = srcElement.id +
"details"; targetElement = document.all(targetId); if
(targetElement.style.display == "none") { targetElement.style.display
= ""; } else { targetElement.style.display = "none"; } }}
document.onclick = clickHandler; </script>
   <!-- НАЧАЛО СПИСКА РАЗДЕЛОВ САЙТА -->
   <b id="Out1" class="Outline" style="cursor: hand;">Фоны</b><br>
   <div id="Out1details" style="display:None; position:relative; left:12;">
     <a href="">Фоны</a><br>
     <a href="">Фоны с разделителями</a><br>
   </div>

evrica, A.Z.



Copyright © 2000-2004 Сообщество Чайников
Контактная информация