Делаем всплывающее меню на вебстраничке

Приведённый ниже пример работает как в IE так и в NN.

Вот так он выглядит (подведите мышку к ссылкам):

Ну а теперь собственно сам исходник:

<SCRIPT language=JavaScript><!--
var occupied_header = new Array();
var occupied_menu = new Array();

for(i=1;i<=7;i++) {
 occupied_header[i] = 0;
 occupied_menu[i] = 0; 
}

function CreateLayer(text, id, t, l) {
if(document.layers)
 {
  var str="<LAYER ID=smenu" + id + " TOP=" + t
         + " LEFT=" + l + " onmouseover=\"occupied_menu["
         + id + "]=1;\" onmouseout=\"Turn('"
         + id + "',0);occupied_menu[" + id
         + "]=0;\" VISIBILITY=hide>"
         + text + "</LAYER>";
  document.write(str);
 }
 else if(document.all)
 {
  var strng="<div id=smenu" + id + " style=\"position:absolute;top:"
           + t + ";left:" + l
           + ";visibility:hidden;width:100;filter:alpha(opacity=90);\""
           + " onmouseover=\"occupied_menu[" + id
           + "]=1;\" onmouseout=\"Turn('" + id
           + "',0);occupied_menu[" + id
           + "]=0;\">" + text + "</div>";
  document.write(strng);
 }
 }
 
function Turn(id, mode) {
 if(document.layers || document.all) {
  if(mode)
   eval("setTimeout(\"On(" + id + ", " + mode + ");\",100)");
  else {
   eval("setTimeout(\"Off(" + id + ", " + mode + ");\",100)");
   }
 }
}

 function On(id, mode){
  if(occupied_header[id])
   if(document.all)
    eval("smenu" + id).style.visibility = 'visible';
   else if(document.layers)
    eval("document.layers['smenu" + id + "']").visibility = "show";
 }
 
 function Off(id, mode){
  if(!occupied_menu[id] && !occupied_header[id])
   if(document.all)
    eval("smenu" + id).style.visibility = 'hidden';
   else if(document.layers)
    eval("document.layers['smenu" + id + "']").visibility = "hide";
 }
-->
</SCRIPT>

<script language="JavaScript">
<!-- 
txt = new Array();
txt[2] = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"4\" width=\"116\">"
       + "<tr bgcolor=\"#СССССС\">"
       + "<td>"
       + "<a href=\"java_src.html\">Java</a><br>"
       + "<a href=\"j_script_src.html\">Java Script</a><br>"
       + "<a href=\"c_api32_src.html\">C/C++</a><br>"
       + "<a href=\"vcpp_src.html\">Visual C++</a><br>"
       + "<a href=\"vb_src.html\">Visual Basic</a><br>"
       + "<a href=\"archwww.html\">Www мастерам</a><br>"
       + "<a href=\"rbc32.html\">Информер 1.1</a><br>"
       + "<a href=\"terra32.html\">Чат сервер</a></td>"
       + "</tr></table>";

txt[3] = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"4\" width=\"116\">"
       + "<tr bgcolor=\"#СССССС\">"
       + "<td><b>"
       + "<a href=\"delphi_doc.html\">Delphi</a><br>"
       + "<a href=\"http.html\">HTTP</a></td>"
       + "</tr></table>";

CreateLayer(txt[2], 2, 187, 145);  // - Координаты первого меню
CreateLayer(txt[3], 3, 215, 145);  // - Координаты второго меню

// if (!occupied_header[1]) onclick="return false;"
-->
</script>

Теперь достаточно в любом месте страницы добавить следующий код:

<a onmouseout="Turn('2',0); occupied_header[2]=0; return false;"
   onmouseover="Turn('2',1); occupied_header[2]=1; return false;"
   href="members.html">Исходники</A>
<br>
<br>
<a onmouseout="Turn('3',0); occupied_header[3]=0; return false;"
   onmouseover="Turn('3',1); occupied_header[3]=1; return false;"
   href="catalog.html">Документы</A>
<br>

Все параметры меню можно менять по своему усмотрению: цвет, фон, размеры, координаты.
Кстати, существенным минусом данного примера меню является жесткая привязка к координатам.