Shank said:
Is there a way that when you have your tabs on your home page that
when you put your cursor on it, it will show everything for that tab
so all you have to do to the right of the tab is open up one of the
pages.
Example:
About Us and when you cursor is on it then to the right would be
Staff phone #'s
History
Addresses
You would click on one of them and be able to open it.
The way I have it now you click on the tab About Us and that opens
and then there is the staff phone #'s ect and you click on that to
open it.
People don't open the tabs to see what there is and I hate to make a
tab for every subject and there would be about 30.
I don't know exactly what code you have
Is it an <a> tag such as <a href="phonenos.html">About Us<a> ?
There are scripts for menus that open in the way you want
Here is one, but it has a vertical list that expands to show sublists. Alter
it as you wish
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Collapsible List Demonstration</title>
<script language="JavaScript">
<!--
function FP_getObjectByID(id,o)
{// v1.0
var c, el, els, f, m, n
if(!o) o = document
if(o.getElementById)
el = o.getElementById(id)
else if(o.layers)
c = o.layers
else if(o.all)
el = o.all[id]
if(el)
return el
if(o.id==id || o.name==id)
return o
if(o.childNodes)
c = o.childNodes
if(c)
for(n = 0; n < c.length; n++)
{ el = FP_getObjectByID(id,c[n])
if(el)
return el }
f = o.forms
if(f)
for(n = 0; n < f.length; n++)
{ els = f[n].elements
for(m = 0; m < els.length; m++)
{ el = FP_getObjectByID(id,els[n])
if(el)
return el }
}
return null
}
function FP_changePropRestore()
{//v1.0
var d = document, x;
if(d.$cpe)
{ for(i = 0; i < d.$cpe.length; i++)
{ x = d.$cpe
;
if(x.v == "")
x.v = "";
eval("x." + x.n + "=x.v"); }
d.$cpe = null; }
}
function FP_changeProp()
{//v1.0
var args = arguments,
d = document,
i,j,
id = args[0],
o = FP_getObjectByID(id),
s, ao, v, x;
d.$cpe = new Array();
if(o)
for(i = 2; i < args.length; i += 2)
{ v = args[i+1];
s = "o";
ao = args.split(".");
for(j = 0; j < ao.length; j++)
{ s += "." + ao[j];
if(null == eval(s))
{ s = null;
break; }
}
x = new Object;
x.o = o;
x.n = new Array();
x.v = new Array();
x.n[x.n.length] = s;
eval("x.v[x.v.length] =" + s);
d.$cpe[d.$cpe.length] = x;
if(s) eval(s + "=v");
}
}
// -->
</script>
<style type="text/css">
<!--
body { margin:50px;
background-color:#F9FAC7;
font: 18px/22px Verdana, arial, helvetica, sans-serif;
color:black;}
..list {font: 14px/18px Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
..list a{text-decoration:none;color:green;}
..list a:hover, #list a:focus
{text-decoration
verline;
border-bottom:1px solid purple;
color
urple;}
#suba1, #suba2, #suba3,#subb1, #subb2, #subb3
{display: none;}
-->
</style>
</head>
<body>
<p style="width:30em">
Here follows a simple collapsible list created with the Change Property
behavior and the CSS styles display:block, and display:none.
Note that each list item is clickable, produces the proper cursor, and that
clicking on one list item collapses the other two.</p>
<div class="list">
<ul>
<li><a href="#"
onmouseover="FP_changeProp('suba1',1,'style.display','block');
FP_changeProp('suba2',1,'style.display','none');
FP_changeProp('suba3',1,'style.display','none')">
List Item 1</a>
<ul id="suba1">
<li>Suba1-1</li>
<li>Suba1-2</li>
</ul>
</li>
<li><a href="#"
onmouseover="FP_changeProp('suba1',1,'style.display','none');
FP_changeProp('suba2',1,'style.display','block');
FP_changeProp('suba3',1,'style.display','none')">
List Item 2</a>
<ul id="suba2">
<li>Suba2-1</li>
<li>Suba2-2</li>
<li>Suba2-3</li>
</ul>
</li>
<li><a href="#"
onmouseover="FP_changeProp('suba1',1,'style.display','none');
FP_changeProp('suba2',1,'style.display','none');
FP_changeProp('suba3',1,'style.display','block')">
List Item 3</a>
<ul id="suba3">
<li>Suba3-1</li>
<li>Suba3-2</li>
</ul>
</li>
</ul>
</div>
<p style="width:30em">
In this second example, the "collapse on click" feature has been removed.
Once expanded, the sublist remains expanded until the page is refreshed.</p>
<div class="list">
<ul>
<li><a href="#"
onmouseover="FP_changeProp('subb1',1,'style.display','block')">
List Item 1</a>
<ul id="subb1">
<li>Subb1-1</li>
<li>Subb1-2</li>
</ul>
</li>
<li><a href="#"
onmouseover="FP_changeProp('subb2',1,'style.display','block')">
List Item 2</a>
<ul id="subb2">
<li>Subb2-1</li>
<li>Subb2-2</li>
<li>Subb2-3</li>
</ul>
</li>
<li><a href="#"
onmouseover="FP_changeProp('subb3',1,'style.display','block')">
List Item 3</a>
<ul id="subb3">
<li>Subb3-1</li>
<li>Subb3-2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>