DHTML

Движущийся фон
Движущиеся объекты
Подсветка кнопок
Выпадающие меню
Ожидание загрузки
Drag'n'Drop
Титры
Телетайп
Попади в меня!
Анимация
ActiveX
Прозрачность
Эффекты загрузки
Шлейф
Шторы

JavaScript


Книги

English | Главная


Полезные ссылки:





Выпадающие меню | Описание

Если Вы хотите использовать любой из наших примеров, поставьте на нас ссылку.
Здесь Вы можете взять готовый HTML-код для такой ссылки.

<html><head>
<title>www.redmount.com - DHTML - Выпадающие меню</title>
</head>
<body bgcolor=White onLoad="init()">
<script language=javascript>
<!--
  //global variables
  var visibleVar="null";
  var layerRef="null",styleSwitch="null",visibleVar="null";
  function init()
  {
    layerRef="document.all";
    styleSwitch=".style";
    visibleVar="visible";
  }
  function showHideLayerSwitch(layerName)
  {
    if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility == visibleVar'))
      hideLayer(layerName);
    else
      showLayer(layerName);
  }

  function showLayer(layerName)
  {
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
  }
  function hideLayer(layerName)
  {
    eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
  }
//-->
</script>

<style type="text/css">
#hardButton {position: absolute; z-index: 80; left: 20px; top: 20px;}
#hardMenu {position: absolute; z-index: 70; visibility: hidden; left: 33px; top: 36px;}
#softButton {position: absolute; z-index: 80; left: 220px; top: 20px;}
#softMenu {position: absolute; z-index: 70; visibility: hidden; left: 233px; top: 36px;}
#gamesButton {position: absolute; z-index: 80; left: 420px; top: 20px;}
#gamesMenu {position: absolute; z-index: 70; visibility: hidden; left: 433px; top: 36px;}

#text {position: absolute; z-index: 20; visibility: visible; left: 15px; top: 75px;}
</style>


<div id="text">
Text
</div>

<!-- Hard -->
    <div id="hardButton" >
        <a href="javascript:showHideLayerSwitch('hardMenu');">
        <img src="hard.gif" width=167 height=25 border=0></a>
    </div>

    <div id="hardMenu">
    <table width="138" border="0" bgcolor="#F3F3F3">
        <tr>
            <td>
            <font face=arial size=-2><br>
            <a href="javascript:alert('Link');">ACER</a><br>
            <a href="javascript:alert('Link');">CANON</a><br>
            <a href="javascript:alert('Link');">DELL</a><br>
            <a href="javascript:alert('Link');">EPSON</a><br>
            <a href="javascript:alert('Link');">FUJITSU</a><br>
            <a href="javascript:alert('Link');">GIGABYTE</a><br>
            <a href="javascript:alert('Link');">HP</a><br>
            <a href="javascript:alert('Link');">INTEL</a><br>
            <a href="javascript:alert('Link');">LEXMARK</a><br>
            <a href="javascript:alert('Link');">MINOLTA</a><br>
            <a href="javascript:alert('Link');">NEC</a><br>
            <a href="javascript:alert('Link');">OKI</a><br>
            <a href="javascript:alert('Link');">PANASONIC</a><br>
            <a href="javascript:alert('Link');">QUANTUM</a><br>
            <a href="javascript:alert('Link');">ROCKWELL</a><br>
            <a href="javascript:alert('Link');">SIEMENS</a><br>
            <a href="javascript:alert('Link');">TOSHIBA</a><br>
            <a href="javascript:alert('Link');">U.S.ROBOTICS</a><br>
            <a href="javascript:alert('Link');">VIEWSONIC</a><br>
            <a href="javascript:alert('Link');">WD</a><br>
            <a href="javascript:alert('Link');">XEROX</a><br>
            <a href="javascript:alert('Link');">YAMAHA</a><br>
            <a href="javascript:alert('Link');">ZYXEL</a>
            </font>   
            </td>
        </tr>
    </table>
    </div>
    
<!-- Soft -->
    <div id="softButton" >
        <a href="javascript:showHideLayerSwitch('softMenu');">
        <img src="soft.gif" width=169 height=25 border=0></a>
    </div>

    <div id="softMenu">
        <table width="138" border="0" bgcolor="#F3F3F3">
        <tr>
            <td>
            <font face=arial size=-2><br>
            <a href="javascript:alert('Link');">ADOBE</a><br>
            <a href="javascript:alert('Link');">BORLAND</a><br>
            <a href="javascript:alert('Link');">CLARIS</a><br>
            <a href="javascript:alert('Link');">COREL</a><br>
            <a href="javascript:alert('Link');">IBM</a><br>
            <a href="javascript:alert('Link');">KINETIX</a><br>
            <a href="javascript:alert('Link');">LOTUS</a><br>
            <a href="javascript:alert('Link');">MICROSOFT</a><br>
            <a href="javascript:alert('Link');">NETSCAPE</a><br>
            <a href="javascript:alert('Link');">NORTON</a><br>
            <a href="javascript:alert('Link');">NOVELL</a><br>
            <a href="javascript:alert('Link');">ORACLE</a><br>
            <a href="javascript:alert('Link');">SUN</a><br>
            <a href="javascript:alert('Link');">XING</a><br></font>
            </td>
        </tr>
    </table>
    </div>

    
<!-- Games -->
    <div id="gamesButton" >
        <a href="javascript:showHideLayerSwitch('gamesMenu');">
        <img src="games.gif" width=168 height=25 border=0></a>
    </div>

    <div id="gamesMenu">
            <table width="138" border="0" bgcolor="#F3F3F3">
        <tr>
            <td>
            <font face=arial size=-2><br>
            <a href="javascript:alert('Link');">AGE OF EMPIRES</a><br>
            <a href="javascript:alert('Link');">BALDUR'S GATE</a><br>
            <a href="javascript:alert('Link');">CAESAR III</a><br>
            <a href="javascript:alert('Link');">CARMAGEDDON 2</a><br>
            <a href="javascript:alert('Link');">COMMANDOS</a><br>
            <a href="javascript:alert('Link');">FALLOUT II</a><br>
            <a href="javascript:alert('Link');">FINAL FANTASY VII</a><br>
            <a href="javascript:alert('Link');">GRIM FANDANGO</a><br>
            <a href="javascript:alert('Link');">HALF-LIFE</a><br>
            <a href="javascript:alert('Link');">HERETIC II</a><br>
            <a href="javascript:alert('Link');">MYTH II</a><br>
            <a href="javascript:alert('Link');">QUAKE II</a><br>
            <a href="javascript:alert('Link');">RAINBOW SIX</a><br>
            <a href="javascript:alert('Link');">SETTLERS 3</a><br>
            <a href="javascript:alert('Link');">SHOGO</a><br>
            <a href="javascript:alert('Link');">STARCRAFT</a><br>
            <a href="javascript:alert('Link');">THIEF</a><br>
            <a href="javascript:alert('Link');">TOMB RAIDER III</a><br>
            <a href="javascript:alert('Link');">UNREAL</a><br></font>   
            </td>
        </tr>
    </table>
    </div>
</body>
</html>


ACER
CANON
DELL
EPSON
FUJITSU
GIGABYTE
HP
INTEL
LEXMARK
MINOLTA
NEC
OKI
PANASONIC
QUANTUM
ROCKWELL
SIEMENS
TOSHIBA
U.S.ROBOTICS
VIEWSONIC
WD
XEROX
YAMAHA
ZYXEL

ADOBE
BORLAND
CLARIS
COREL
IBM
KINETIX
LOTUS
MICROSOFT
NETSCAPE
NORTON
NOVELL
ORACLE
SUN
XING

AGE OF EMPIRES
BALDUR'S GATE
CAESAR III
CARMAGEDDON 2
COMMANDOS
FALLOUT II
FINAL FANTASY VII
GRIM FANDANGO
HALF-LIFE
HERETIC II
MYTH II
QUAKE II
RAINBOW SIX
SETTLERS 3
SHOGO
STARCRAFT
THIEF
TOMB RAIDER III
UNREAL