Uncle Jims Web Designs

Slide Down Menu Bar

This drop down menu is very easy to configure and place on your web page.

Web Design

Services
Support
Portfolio

Tutorials

Scripting
MS Office

Helpful Tips

Main Page
Link Two
Link Three

Search

Google
Yahoo
CNN
MSNBC
BBC News
JavaScript

Instructions for Use:
1. Save the following script to your directory: menu.js

2. Save the following style sheet to the same directory: sddm.css

3. Place the following code between your <head> and </head> tags:

4. Place the following code inside the body of your document:

<table border="0" width="600" cellspacing="1" cellpadding="1"><tr>
<td width="125" valign="top">

<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" > Web Design</small></div>      <div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/web/index.html" target="main"> Services</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/web/services.html" target="main"> Support</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/portfolio.html"> Portfolio</a>
</span></div></div></div>

</td>
<td width="125" valign="top">

<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" > Tutorials</div>        
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/jdstut.html" target="_blank">Scripting</span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/jd.main_office.html" target="_blank">MS Office
</a></span></div></div></div>

</td>
<td width="125" valign="top">

<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" > Helpful Tips</div>        
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/tips/index.html" target="_blank"> Main Page</span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/" target="_blank"> Link Two</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/" target="_blank"> Link Three</a></span>
</div></div></div>

</td>
<td width="125" valign="top">

<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" > Search</div>        
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.google.com/advanced_search" target="_blank">Google</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yahoo.com" target="_blank">Yahoo</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://cnn.com">CNN</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://msnbc.com" target="_blank">MSNBC</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://news.bbc.co.uk" target="_blank">BBC News</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://jdstiles.com/java/links.html" >JavaScript</a></span>
</div></div></div>

</td></tr></table></center><br><br>

5. Configure the above code for your own links.

6. Enjoy!