Красивое графическое выпадающее меню.

Это в head:

Код:

<LINK href="images/navstyle.css" rel=STYLESHEET type=text/css>

<SCRIPT language=JavaScript type=text/javascript>
function display(item){
document.all.abouttable.style.display="none"
document.all.galerytable.style.display="none"
document.all.feedbacktable.style.display="none"
document.all.newstable.style.display="none"
document.all.aboutlink.href="javascript:display(1)"
document.all.galerylink.href="javascript:display(2)"
document.all.feedbacklink.href="javascript:display(3)"
document.all.newslink.href="javascript:display(4)"
 if (item==1){
 document.all.aboutlink.style.textdecoration="none"
  document.all.abouttable.style.display=""
  document.all.aboutlink.href="javascript:hide(1)"}
 if (item==2){
  document.all.galerytable.style.display=""
  document.all.galerylink.href="javascript:hide(2)"}
 if (item==3){
  document.all.feedbacktable.style.display=""  
  document.all.feedbacklink.href="javascript:hide(3)"}
 if (item==4){
  document.all.newstable.style.display=""
  document.all.newslink.href="javascript:hide(4)"}
 if (item==5){
 document.all.withus.style.backgroundcolor="#00ff80"}
}

function hide(item){
 if (item==1){
  document.all.abouttable.style.display="none"
  document.all.aboutlink.href="javascript:display(1)"}
 if (item==2){
  document.all.galerytable.style.display="none"
  document.all.galerylink.href="javascript:display(2)"}
 if (item==3){
  document.all.feedbacktable.style.display="none"
  document.all.feedbacklink.href="javascript:display(3)"}
 if (item==4){
  document.all.newstable.style.display="none"
  document.all.newslink.href="javascript:display(4)"}
}

function down(item){
 if (item==1){
  if (document.all.abouttable.style.display=="")
   img1.src="images/up.gif"
  else img1.src="images/down.gif"}
 if (item==2){
  if (document.all.galerytable.style.display=="")
   img2.src="images/up.gif"
  else img2.src="images/down.gif"}
 if (item==3){
  if (document.all.feedbacktable.style.display=="")
   img3.src="images/up.gif"
  else img3.src="images/down.gif"}
 if (item==4){
  if (document.all.newstable.style.display=="")
   img4.src="images/up.gif"
  else img4.src="images/down.gif"}
 if (item==5){
   img5.src="images/right.gif"}
}
</SCRIPT>

А это - в body:

Код:

<BODY bgColor=#ffffff>

<TABLE align=left border=0 cellPadding=0 cellSpacing=0 width=109>
  <TBODY>
  
  <TR>
    <TD align=left bgColor=#00b864 id=abouttd>&nbsp;<IMG alt="" border=0 height=10 id=img1 src="images/t.gif" width=12>&nbsp;<A 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>&nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>&nbsp;<IMG alt="" border=0 height=10 id=img2 src="images/t.gif" width=12>&nbsp;<A 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>&nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>&nbsp;<IMG alt="" border=0 height=10 id=img3 src="images/t.gif" width=12>&nbsp;<A 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>&nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>&nbsp;<IMG alt="" border=0 height=10 id=img4 src="images/t.gif" width=12>&nbsp;<A 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>&nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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>
              &nbsp;&nbsp;<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">&nbsp;<IMG alt="" border=0 height=10 id=img5 src="images/t.gif" width=12>&nbsp;<A href="mailto:case2@online.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 height=0 src="images/down.gif" width=0><IMG alt="" border=0 height=0 src="images/right.gif" width=0><IMG alt="" border=0 height=0 src="images/up.gif" width=0></TD></TR>

</TBODY>
</TABLE>

А вот файлы картинки: скачать
Источник: everyweb.ru

Скрипт тэйкер

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Красивое графическое выпадающее меню.

Сообщений 1 страница 1 из 1

Поделиться12010-08-17 09:48:48