Главная » 2009 » Октябрь » 4 » Горизонтальное выпадающее меню (Javascript)
04.10.2009, 14:34

Горизонтальное выпадающее меню



Хорошее горизонтальное выпадающее меню. Ничего лишнего.

Ставим в head это:

Code
<style>
  body,table {font:8pt MS Sans Serif; color:windowtext; background:menu;}
  td {border:0; cursor:default;}  
</style>

Это сразу после </head>:

Code
<script language="JavaScript">
  var menu_state=0;
   
  function go_menu1()
  {
  tablo.outerHTML="<div id=tablo style=\"POSITION:ABSOLUTE; LEFT:10; TOP:40;\"><table border=2 bordercolordark=black><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Home Submenu 1</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Home Submenu 2</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Home Submenu 3</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Home Submenu 4</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\";\">Home Submenu 5</td></tr></table></div>";
  menu_state=2;
  }
   
  function go_menu2()
  {
  tablo.outerHTML="<div id=tablo style=\"POSITION:ABSOLUTE; LEFT:80; TOP:40;\"><table border=2 bordercolordark=black><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Programs HACK</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Programs C++</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Programs CRACK</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Programs SURCE     </td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Programs All</td></tr></table></div>";
  menu_state=2;
  }

  function go_menu3()
  {
  tablo.outerHTML="<div id=tablo style=\"POSITION:ABSOLUTE; LEFT:165; TOP:40;\"><table border=2 bordercolordark=black><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Link to Microsoft</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Link to .....</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Link to ....</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Link to www.motorhead.da.ru</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Link to SEARCH</td></tr></table></div>";
  menu_state=2;
  }

  function go_menu4()
  {
  tablo.outerHTML="<div id=tablo style=\"POSITION:ABSOLUTE; LEFT:240; TOP:40;\"><table border=2 bordercolordark=black><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Серфинг</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\"onClick=\"\">Чтение почты</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Открой свой сайт  </td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Получи банер</td></tr><tr><td onMouseOver=\"this.style.color='#ffffff';this.style.background='#352983';\" onmouseout=\"this.style.color='#000000';this.style.background='menu';\" onClick=\"\">Тоже подменю</td></tr></table></div>";
  menu_state=2;
  }

  function none_menu()
  {
  if (menu_state==2) {menu_state=1;return;}
  tablo.innerHTML="";
  menu_state=0;
  }
</script>

<body> заменяем на это:

Code
<body onClick="menu_state?none_menu():null;">

<table border="2">
  <tr>
  <td onClick="go_menu1();"
  onMouseOver="this.style.color='#ffffff';this.style.background='#352983';if (menu_state!=0) { go_menu1(); menu_state=1;}"
  onmouseout="this.style.color='#000000';this.style.background='menu';"><font
  face="MS Sans Serif" size="1">Меню Home</font></td>
  <td><font face="MS Sans Serif" size="1">|</font></td>
  <td onClick="go_menu2();"
  onMouseOver="this.style.color='#ffffff';this.style.background='#352983';if (menu_state!=0) { go_menu2(); menu_state=1;}"
  onmouseout="this.style.color='#000000';this.style.background='menu';"><font
  face="MS Sans Serif" size="1">Меню Programs</font></td>
  <td><font face="MS Sans Serif" size="1">|</font></td>
  <td onClick="go_menu3();"
  onMouseOver="this.style.color='#ffffff';this.style.background='#352983';if (menu_state!=0) { go_menu3(); menu_state=1;}"
  onmouseout="this.style.color='#000000';this.style.background='menu';"><font
  face="MS Sans Serif" size="1">Меню LINKS</font></td>
  <td><font face="MS Sans Serif" size="1">|</font></td>
  <td onClick="go_menu4();"
  onMouseOver="this.style.color='#ffffff';this.style.background='#352983';if (menu_state!=0) { go_menu4(); menu_state=1;}"
  onmouseout="this.style.color='#000000';this.style.background='menu';"><font
  face="MS Sans Serif" size="1">Заработай в сети</font></td>
  </tr>
</table>
<div id="tablo" style="POSITION:ABSOLUTE; LEFT:100; TOP:35;"></div>

Исправляем ссылки на свои и готово!

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: JavaScript's | Просмотров: 2985 | Добавил: antisept | Рейтинг: 4.0/1 |
Теги: Горизонтальное выпадающее меню
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]