help with site navigation

**riptide** · 11-21-2006, 02:55 PM

no one has been wanting to help me so this is my like 3 forum. I think it may be because they don't know enough or something.

I have a big problem I wanted to make a site navigation thing

that starts with a single cell table. and when you click on it a nother table begains to move away from it. then apears and contenues to move. if you move the mouse off the second table it waits for seven seconds then dissapears.
it should look kinda like this http://www.elportalsedona.com/index1.html

here is the code, I want to know what I did wrong

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">

function show()
{ var hider = document.getElementById ("sectab");
var layerPosition = parseInt(hider.style.left);
changed();}
if(layerPosition == 35){hider.style.left=(layerPosition + 5) + "px"; setTimeout(show(), 15);}

function changed(){
var shifer = document.getElementbyId("sectab");
var slide = parseInt(shifter.stile.left);
var see = shifter.display="none"; }

if (slide==43) {shifter.display="inline"}

function clap() {
var ran = document.getElementById("sectab");
ran.style.display ="none"; setTimeout("clap()",7000);}

</script>

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table align="left" width="50" height="50 "border="3" bgcolor="#0033FF" >
<tr>
<td> <a onclick="show()">Click me</a>
</td>
</tr>

</table>

<div id="sectab" onmouseout="clap()">

<table border="3" bgcolor="#FF0066" style="display:none;height:50;width:50;Z-index:5;top:10;left:35" >
<tr>
<td>
<p> this is the second table
</p>
</td>
</tr>
</table>

</div>
</body>
</html>

**mastergeek70** · 11-22-2006, 04:22 PM

It looks like you are just wanting to make a vertical pop out menu bar? Look at this example and see if it gives you some ideas.

vert_menu.html

Code:

<html>
<head>
<title>Simple Navmenu</title>
<script language="JavaScript" src="vert_menu.js">
</script>
</head>
<body leftmargin=0 topmargin=0>
<table cellspacing="0" cellpadding="0" align="left"> <!-- layout table -->
<tr><td valign="top">  <!-- menu on left side -->
<table border="0" cellpadding="4"> <!-- menu table -->
<tr>
   <td ID="menu-products" width="100" bgcolor="Silver"
      onMouseOver="Menu('products');" onMouseOut="Timeout('products');">
     <a href="products.html"><b>Products</b></a>
   </td>
</tr>
<tr>
   <td ID="menu-sales" width="100" bgcolor="Silver"
      onMouseOver="Menu('sales');" onMouseOut="Timeout('sales');">
      <a href="sales.html"><b>Sales</b></a>
   </td>
</tr>
<tr>
   <td ID="menu-service" width="100" bgcolor="Silver"
      onMouseOver="Menu('service');" onMouseOut="Timeout('service');">
      <a href="service.html"><b>Service</b></a>
   </td>
</tr>
<tr>
   <td ID="menu-staff" width="100" bgcolor="Silver"
      onMouseOver="Menu('staff');" onMouseOut="Timeout('staff');">
      <a href="staff.html"><b>Staff</b></a>
   </td>
</tr>
<tr>
   <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>  <!-- end of menu 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>
</td>
<td>  <!-- body of page on right side -->

</td></tr>
</table>  <!-- end of layout table -->
</body>
</html>

vert_menu.js

Code:

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 + m.offsetWidth + 2;
   box.style.top= m.offsetTop;
   box.style.visibility="visible";
   m.style.backgroundColor="Aqua";
   box.style.backgroundColor="Silver";
   box.style.width="100px";
}

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="Aqua";
}

function UnHighlight(menu,item) {
   if (!document.getElementById) return;
   Timeout(menu);
   obj=document.getElementById(item);
   obj.style.backgroundColor="Silver";
}

**riptide** · 11-22-2006, 08:57 PM

that didn't come from that site did it?

**mastergeek70** · 11-26-2006, 06:19 AM

No, that website appears to have used a product called Menu Machine (http://menumachine.com). It's a commercial package that puts together pro looking menus without the hassle of a lot of coding.

The code example I sent is just a very simple example of kind of what goes on in the background.

**riptide** · 02-01-2007, 02:23 PM

oh okay I see now. I have a script that works for my site now I guess this thread can be locked or something

Thread: help with site navigation

Thread Tools

Search Thread

help with site navigation

RE: !!!help

Bookmarks

Bookmarks

Posting Permissions