DHTML

Moving Background
Moving Objects
Rollover
Pulldown Menu
Preloading
Drag'n'Drop
Scrolling Text
Teletype
Shoot Me!
Animation
ActiveX
Opacity
Transition
Mad Bubbles
Gates

JavaScript


Books

Russian | Main Page


Useful links:



Pulldown Menu | Description

If you want to use any of this examples, please put a link to our site.
Here you can find HTML-code for such link.

<html><head>
<title>www.redmount.com - DHTML - Pulldown Menu</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