| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
|
|
Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
|
|
#1
|
|||
|
|||
|
Drop Down Menu
I am using this code to produce a drop down menu however would like it to go vertically down my page and the drop down menu to come out at the side. How do i do this and is it possible. here is the code i am using
<html> <head> <title>Figby Industries, Inc.</title> <script language="JavaScript" src="menu.js"> </script> </head> <body style="margin-left:0; margin-top:0;"> <table border="0" cellpadding="4"> <tr> <td ID="menu-products" width="100" bgcolor="silver" onMouseOver="Menu('products');" onMouseOut="Timeout('products');"> <a href="products.html"><b>Products</b></a> </td> <td ID="menu-sales" width="100" bgcolor="Silver" onMouseOver="Menu('sales');" onMouseOut="Timeout('sales');"> <a href="sales.html"><b>Sales</b></a> <td ID="menu-service" width="100" bgcolor="Silver" onMouseOver="Menu('service');" onMouseOut="Timeout('service');"> <a href="service.html"><b>Service</b></a> </td> <td ID="menu-staff" width="100" bgcolor="Silver" onMouseOver="Menu('staff');" onMouseOut="Timeout('staff');"> <a href="staff.html"><b>Staff</b></a> </td> <td ID="menu-jobs" width="100" bgcolor="Silver" onMouseOver="Menu('jobs');" onMouseOut="Timeout('jobs');"> <a href="jobs.html"><b>Employment</b></a> </td> </tr> </table> <div ID="products" STYLE="position:absolute; visibility: hidden"> <table width="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <td width="100%" ID="p1" onMouseOver="Highlight('products','p1');" onMouseOut="UnHighlight('products','p1');"> <a href="equip.html">Equipment</a></td></tr> <tr> <td width="100%" ID="p2" onMouseOver="Highlight('products','p2');" onMouseOut="UnHighlight('products','p2');"> <a href="supplies.html">Supplies</a></td></tr> </table> </div> <div ID="sales" STYLE="position:absolute; visibility: hidden"> <table width="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <td width="100%" ID="s1" onMouseOver="Highlight('sales','s1');" onMouseOut="UnHighlight('sales','s1');"> <a href="prices.html">Price List</a></td></tr> <tr> <td width="100%" ID="s2" onMouseOver="Highlight('sales','s2');" onMouseOut="UnHighlight('sales','s2');"> <a href="order.html">Order Form</a></td></tr> <tr> <td width="100%" ID="s3" onMouseOver="Highlight('sales','s3');" onMouseOut="UnHighlight('sales','s3');"> <a href="specials.html">Specials</a></td></tr> </table> </div> <div ID="service" STYLE="position:absolute; visibility: hidden"> <table width="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <td width="100%" ID="r1" onMouseOver="Highlight('service','r1');" onMouseOut="UnHighlight('service','r1');"> <a href="support.html">Support</a></td></tr> <tr> <td width="100%" ID="r2" onMouseOver="Highlight('service','r2');" onMouseOut="UnHighlight('service','r2');"> <a href="cservice.html">Contact Us</a></td></tr> </table> </div> <div ID="staff" STYLE="position:absolute; visibility: hidden"> <table width="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <td width="100%" ID="t1" onMouseOver="Highlight('staff','t1');" onMouseOut="UnHighlight('staff','t1');"> <a href="staff.html">Meet the Staff</a></td></tr> </table> </div> <div ID="jobs" STYLE="position:absolute; visibility: hidden"> <table width="100%" border="0" cellpadding="4" cellspacing="0"> <tr> <td width="100%" ID="j1" onMouseOver="Highlight('jobs','j1');" onMouseOut="UnHighlight('jobs','j1');"> <a href="jobs.html">Job Listings</a></td></tr> </table> </div> <img align="center" src="logo.gif" width="486" height="180" border="0" alt=""><br> <h1>Welcome to Figby Industries!</h1> <p>Welcome! This is the home page of Figby Industries, your source for all sorts of imaginary products. Follow the links below or use the menu above to learn more about our company and our products. </p> <ul> <li><a href="products.html"><b>Products</b></a></li> <li><a href="sales.html"><b>Sales</b></a></li> <li><a href="service.html"><b>Service</b></a></li> <li><a href="staff.html"><b>Staff</b></a></li> <li><a href="jobs.html"><b>Employment</b></a></li> </ul> </body> </html> |
|
#2
|
||||
|
||||
|
You need to post the code in the menu.js file, because that is the code that is controlling the menu.
|
|
#3
|
|||
|
|||
|
var inmenu=false;
var lastmenu=0; function Menu(current) { if (!document.getElementById) return; inmenu=true; oldmenu=lastmenu; lastmenu=current; if (oldmenu) Erase(oldmenu); m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.left= m.offsetLeft; box.style.top= m.offsetTop + m.offsetHeight; box.style.visibility="visible"; m.style.backgroundColor="aqua"; box.style.backgroundColor="aqua"; box.style.width="108px"; } function Erase(current) { if (!document.getElementById) return; if (inmenu && lastmenu==current) { return; } m=document.getElementById("menu-" + current); box=document.getElementById(current); box.style.visibility="hidden"; m.style.backgroundColor="silver"; } function Timeout(current) { inmenu=false; window.setTimeout("Erase('" + current + "');",500); } function Highlight(menu,item) { if (!document.getElementById) return; inmenu=true; lastmenu=menu; obj=document.getElementById(item); obj.style.backgroundColor="Silver"; } function UnHighlight(menu,item) { if (!document.getElementById) return; Timeout(menu); obj=document.getElementById(item); obj.style.backgroundColor="Aqua"; } |
|
#4
|
||||
|
||||
|
I looked at the menu.js code, but didn't see how to modify the script to have it slide out horizonally.
Below is a link to some other free javascript menus, that may better suit the layout you are trying to achieve. Javascript Menus |
![]() |
| Viewing: ASP Free Forums > Web Design > Web Layout > Drop Down Menu |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
|