|
EXAMPLE
1) Insert this style command with the script in
the <HEAD> section of the page or
add to an existing CSS stylesheet if used.
2) Insert the following HTML code in the <BODY>
section where you want the menu to appear in the page:
3) Define the style of the menu and the links in the <STYLE> command section:
<style type="text/css">
.menuOut {cursor:pointer; margin:2px; background-color:#0099cc;
color:#000000; width:120px; border:1px solid #000000;
padding:2px; text-align:center; font-family:arial; font-weight:bold;}
.menuOver {cursor:pointer; margin:2px; background-color:#000000;
color:#0099cc; width:120px; border:1px solid #0099cc;
padding:2px; text-align:center; font-family:arial; font-weight:bold;}
.submenu {width:115px; font-family:arial; font-size:11px;
padding-left:5px;}
.submenu a {color:#000080; text-decoration:none; font-weight:bold;}
.submenu a:hover {color:#ff0000; text-decoration:none; font-style:oblique;
font-weight:bold;}
</style>
4) Define the menu headers and the links in this section of the HTML code:
<!-- Menu start -->
<div id="cont">
<p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')"
onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">SHAREWARE</p>
<div class="submenu" id="sub1" style="display:none;">
• <a href="business.html" title="Business
shareware">Business</a><br/>
• <a href="graphics.html" title="Graphics shareware">Graphics</a><br/>
• <a href="hobby.html" title="Hobby shareware">Hobby</a><br/>
• <a href="programming.html" title="Programming shareware">Programming</a><br/>
• <a href="utilities.html" title="Utilities shareware">Utilities</a><br/>
• <a href="web_utilities.html" title="Internet utilities shareware">Web utilities</a>
</div>
<p id="menu2" class="menuOut" onclick="SwitchMenu('sub2')"
onmouseover="ChangeClass('menu2','menuOver')" onmouseout="ChangeClass('menu2','menuOut')">SCRIPTS</p>
<div class="submenu" id="sub2" style="display:none;">
• <a href="cgi_scripts/cgi_scripts.html" title="CGI scripts">CGI scripts</a><br/>
• <a href="scripts/dhtml_scripts.html" title="DHTML scripts & Javascripts">DHTML scripts</a>
</div>
and so forth...
That's all there is to it.
For more information you can also visit
the getElementById.com
web site.
|
