Эффекты на основе Java Script

Раскрывающееся в низ меню

<Вернуться в каталог>

Скопируйте и вставте

Внутри тега <HEAD> - </HEAD>

<SCRIPT language=JavaScript type=text/javascript src="http://skriptkpbstudio.ucoz.ru/demo_srt/menu_wert/wert_kryshki/wert_menu_s_kryshkami.js"></script>
<script>
function down(item){
 if (item==1){
  if (document.all.abouttable.style.display=="")
   img1.src="images/up.gif"                         // закрывающая иконка меню 1
  else img1.src="images/down.gif"}                  // открывающая иконка меню 1
 if (item==2){
  if (document.all.galerytable.style.display=="")
   img2.src="images/up.gif"                         // закрывающая иконка меню 2
  else img2.src="images/down.gif"}                  // открывающая иконка меню 2
 if (item==3){
  if (document.all.feedbacktable.style.display=="")
   img3.src="images/up.gif"                         // закрывающая иконка меню 3
  else img3.src="images/down.gif"}                  // открывающая иконка меню 3
 if (item==4){
  if (document.all.newstable.style.display=="")
   img4.src="images/up.gif"                         // закрывающая иконка меню 4
  else img4.src="images/down.gif"}                  // открывающая иконка меню 4
 if (item==5){
   img5.src="images/right.gif"}                     // иконка меню 5
}
</SCRIPT>
<style>                                  /* стиль меню */
A.menu {COLOR: maroon; FONT-FAMILY: Tahoma; FONT-SIZE: x-small; FONT-WEIGHT: bold; LINE-HEIGHT: 16px; TEXT-DECORATION: none; fontweight: bold; textdecoration: none}
A.menu:visited {COLOR: maroon; FONT-WEIGHT: bold; TEXT-DECORATION: none}
A.menu:active {COLOR: red; FONT-WEIGHT: bold; TEXT-DECORATION: none}
A.menu:hover {COLOR: red; FONT-WEIGHT: bold; TEXT-DECORATION: none; fontweight: bold; textdecoration: none}
                                       /* стиль ссылок */
A.child {COLOR: maroon; FONT-FAMILY: Verdana; FONT-SIZE: xx-small; FONT-WEIGHT: bold; TEXT-DECORATION: underline}
A.child:visited {COLOR: maroon; FONT-FAMILY: Verdana; FONT-SIZE: xx-small; FONT-WEIGHT: bold; TEXT-DECORATION: underline}
A.child:hover {COLOR: red; FONT-FAMILY: Verdana; FONT-SIZE: xx-small; FONT-WEIGHT: bold; TEXT-DECORATION: underline}
</style>

Всё подписано. Задаём иконки перед меню и стили меню и ссылок.

Внутри тега <BODY> - </BODY> там где у Вас будет меню.

<TABLE align=left border=0 cellPadding=0 cellSpacing=0 width=109>
  <TBODY>
  <TR><TD><IMG border=0 width=109 src="images/navtop.gif"></TD></TR>
  <TR>
    <TD align=left bgColor=#00b864 id=abouttd> <IMG alt="" border=0 height=10 id=img1 src="images/t.gif" width=12> <A class=menu href="javascript:display(1)" id=aboutlink  onmouseout="img1.src='images/t.gif'" onmouseover=down(1)>Меню 1</A> 
      <TABLE bgColor=#00ff80 id=abouttable style="DISPLAY: none" width=109>
        <TBODY>
        <TR>
          <TD>  <IMG alt="" border=0 height=8 id=a1 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="a1.src='images/HARVBULL.GIF'" onmouseover="a1.src='images/harvbull2.gif'" target=main>Ссылка 1</A><BR>
                <IMG alt="" border=0 height=8 id=a2 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="a2.src='images/HARVBULL.GIF'" onmouseover="a2.src='images/harvbull2.gif'" target=main>Ссылка 2</A>
          </TD></TR></TBODY></TABLE></TD></TR>
 <TR>
    <TD bgColor=#00b864 id=galerytd> <IMG alt="" border=0 height=10 id=img2 src="images/t.gif" width=12> <A class=menu href="javascript:display(2)" id=galerylink onmouseout="img2.src='images/t.gif'" onmouseover=down(2)>Меню 2</A> 
      <TABLE bgColor=#00ff80 id=galerytable style="DISPLAY: none" width=109>
        <TBODY>
        <TR>
          <TD>  <IMG alt="" border=0 height=8 id=b1 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="b1.src='images/HARVBULL.GIF'" onmouseover="b1.src='images/harvbull2.gif'" target=main>Ссылка 1</A><BR>
                <IMG alt="" border=0 height=8 id=b2 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="b2.src='images/HARVBULL.GIF'" onmouseover="b2.src='images/harvbull2.gif'" target=main>Ссылка 2</A><BR>
                <IMG alt="" border=0 height=8 id=b3 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="b3.src='images/HARVBULL.GIF'" onmouseover="b3.src='images/harvbull2.gif'" target=main>Ссылка 3</A> 
          </TD></TR></TBODY></TABLE></TD></TR>
 <TR>
    <TD bgColor=#00b864 id=feedbacktd> <IMG alt="" border=0 height=10 id=img3 src="images/t.gif" width=12> <A class=menu href="javascript:display(3)" id=feedbacklink  onmouseout="img3.src='images/t.gif'" onmouseover=down(3)>Меню 3</A><BR>
      <TABLE bgColor=#00ff80 id=feedbacktable style="DISPLAY: none" width=109>
        <TBODY>
        <TR>
          <TD>  <IMG alt="" border=0 height=8 id=c1 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="c1.src='images/HARVBULL.GIF'" onmouseover="c1.src='images/harvbull2.gif'" target=main>Ссылка 1</A><BR>
                <IMG alt="" border=0 height=8 id=c2 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="c2.src='images/HARVBULL.GIF'" onmouseover="c2.src='images/harvbull2.gif'" target=main>Ссылка 2</A><BR>
                <IMG alt="" border=0 height=8 id=c3 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="c3.src='images/HARVBULL.GIF'" onmouseover="c3.src='images/harvbull2.gif'" target=main>Ссылка 3</A>
              </TD></TR></TBODY></TABLE></TD></TR>
   <TR>
    <TD bgColor=#00b864 id=newstd> <IMG alt="" border=0 height=10 id=img4 src="images/t.gif" width=12> <A class=menu href="javascript:display(4)" id=newslink onmouseout="img4.src='images/t.gif'" onmouseover=down(4)>Меню 4</A><BR>
      <TABLE bgColor=#00ff80 id=newstable style="DISPLAY: none" width=109>
        <TBODY>
        <TR>
          <TD>  <IMG alt="" border=0 height=8 id=d1 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="d1.src='images/HARVBULL.GIF'"  onmouseover="d1.src='images/harvbull2.gif'" target=main>Ссылка 1</A><BR>
                <IMG alt="" border=0 height=8 id=d2 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="d2.src='images/HARVBULL.GIF'"  onmouseover="d2.src='images/harvbull2.gif'" target=main>Ссылка 2</A><BR>
                <IMG alt="" border=0 height=8 id=d3 src="images/HARVBULL.gif" width=8><A class=child href="http://" onmouseout="d3.src='images/HARVBULL.GIF'"  onmouseover="d3.src='images/harvbull2.gif'" target=main>Ссылка 3</A>
              </TD></TR></TBODY></TABLE></TD></TR>
  <TR><TD id=withus style="BACKGROUND-COLOR: #00b864"> <IMG alt="" border=0 height=10 id=img5 src="images/t.gif" width=12> <A class=menu href="mailto:kpb521@mail.ru" onclick=display(5) onmouseout="img5.src='images/t.gif'" onmouseover="img5.src='images/right.gif'" target=main>E-mail</A></TD></TR>
  <TR><TD><IMG alt="" border=0 src="images/navbottom.gif" width=109></TD></TR>
</TBODY>
</TABLE>

Впринципе из примера всё понятно. Разберите его и я думаю у Вас проблем не будет. Колличество меню и подменю неограничено. Рабочим является только первое меню "Мои сайты" и последнее "E-mail", остальное для демонстрации возможностей структуры меню.

И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу.
Вы экономите место и время.

Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера].
Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.