...

View Full Version : CSS collapsing nav menu - need active state help - please



buddy revelle
07-07-2005, 04:48 PM
I have been trying to figure this out for days now and need some help. I am trying to make the submenus on my collapsible nav to stay open when the user is taken to the linked page..any ideas? Here is the code:

<style type="text/css" media="screen">
<!--
body {
margin: 0;
padding: 0;
background color: #d1daec;
font-family: helvetica;
font-size: 0.6em;
font-weight: bold;
}
#dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
white-space: normal;
}
#menu {
position: static; /* Menu position that can be changed at will */
top: 105;
left: 2;
}
#menu {
width: 12em;
}
#menu dt {
cursor: pointer;
margin: 0;

line-height: 15px;
text-align: left;
font-weight: bold;
border: #d1daec;
background: #d1daec;
}
#menu dd {
border: #d1daec;
}
#menu li {
text-align: left;
background: #ffffff;
}
#menu li a, #menu dt a {
color: #d1daec;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu dt a:hover {
background: #ffffff;
}
#menu li a:hover {
background: #d1daec;
}
-->
</style>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=20; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<dl id="menu">
<dt onclick="javascript:show();"><a href="http://www.supportplus.com/Medical_Support_Hose.cfm?catx=&title=Medical%20Support%20Hose"><font size="small" color="#3c4d5f">&nbsp;<b>Medical Support Hose</b></font></a></dt>
<dt onclick="javascript:show('smenu2');"><a href="http://www.supportplus.com/womens_hose.cfm?gender=Women&catx=wsh&title=Women's%20Medical%20Support%20Hose"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Women's</b></font></a></dt>
<dd id="smenu2" style='display:none'>
<ul>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=jobst&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Jobst%20AND%20Womens&&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Jobst</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=futuro&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Futuro%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Futuro</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=bauer%20black&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Bauer%20Black%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Bauer & Black</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=support%20plus&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Support%20Plus%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Support Plus</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Compression</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=mild&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Mild%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Mild (8-15)</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=moderate&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Moderate%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Moderate (15-20)</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Firm%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Firm (20-30)</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=very%20firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Very%20Firm%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Very Firm (30+)</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=knee%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Knee%20High%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Knee-High</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=thigh%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Thigh%20High%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Thigh-High</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=pantyhose&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Pantyhose%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Pantyhose</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=athletic&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Athletic%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Athletic</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=casual&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Casual%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=dress&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Dress%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu3');"><a href="http://www.supportplus.com/mens_hose.cfm?catx=msh&gender=men&title=Men's%20Medical%20Support%20Hose"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Men's</b></font></a></dt>
<dd id="smenu3" style='display:none'>
<ul>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=jobst&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Jobst%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Jobst</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=futuro&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Futuro%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Futuro</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=bauer%20black&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Bauer%20Black%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Bauer & Black</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=support%20plus&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Support%20Plus%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Support Plus</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Compression</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=mild&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Mild%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Mild (8-15)</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=moderate&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Moderate%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Moderate (15-20)</font></a></li>
<li><a href="#http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Firm%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Firm (20-30)</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=very%20firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Very%20Firm%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Very Firm (30+)</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=knee%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Knee%20High%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Knee-High</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=thigh%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Thigh%20High%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Thigh-High</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=athletic&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Athletic%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Athletic</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=casual&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Casual%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=dress&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Dress%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu4');"><a href="http://www.supportplus.com/socks.cfm?catx=tsocks&title=Therapeutic%20Socks"><font size="small" color="#3c4d5f">&nbsp;<b>Therapeutic Socks</b></font></a></dt>
<dd id="smenu4" style='display:none' >
<ul>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=tsocks&active=fordiab&CATEGORY=Therapeutic%20Socks&TYPE=Diabetes&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;For Diabetes</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=tsocks&active=athletic&CATEGORY=Therapeutic%20Socks&TYPE=Athletic&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Athletic</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=tsocks&active=casual&CATEGORY=Therapeutic%20Socks&TYPE=Casual&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=tsocks&active=dress&CATEGORY=Therapeutic%20Socks&TYPE=Dress&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=tsocks&active=widecalf&CATEGORY=Therapeutic%20Socks&TYPE=Wide%20Calf&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Wide Calf</font></a></li>
</ul>
</dd>
<dt onclick="javascript:show();"><a href="http://www.supportplus.com/shoes_footwear.cfm?title=Shoes%20&%20Footware"><font size="small" color="#3c4d5f">&nbsp;<b>Shoes/Footwear</b></font></a></dt>
<dt onclick="javascript:show('smenu5');"><a href="http://www.supportplus.com/womens_shoes.cfm?gender=Women&catx=ws&title=Women's%20Shoes"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Women's</b></font></a></dt>
<dd id="smenu5" style='display:none'>
<ul>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=drew&CATEGORY=Shoes%20Footwear&TYPE=Drew%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Drew</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=clinic&CATEGORY=Shoes%20Footwear&TYPE=Clinic%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Clinic/Footthrills</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=softspots&CATEGORY=Shoes%20Footwear&TYPE=Softspots%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Lowell/Softspots</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=other&CATEGORY=Shoes%20Footwear&TYPE=Womens%20NOT%20Drew%20NOT%20Clinic%20NOT%20Lowell%20NOT%20Soft%20spots&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Other</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=sandal&CATEGORY=Shoes%20Footwear&TYPE=Sandal%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Sandal</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=boot&CATEGORY=Shoes%20Footwear&TYPE=Boot%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Boot</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=casual&CATEGORY=Shoes%20Footwear&TYPE=Casual%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=dress&CATEGORY=Shoes%20Footwear&TYPE=Dress%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=slipper&CATEGORY=Shoes%20Footwear&TYPE=Slipper%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Slipper</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ws&gender=Women&active=Thera&CATEGORY=Shoes%20Footwear&TYPE=Therapeutic%20AND%20Womens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Therapeutic</font></a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu6');"><a href="http://www.supportplus.com/mens_shoes.cfm?catx=ms&gender=men&title=Men's%20Shoes"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Men's</b></font></a></dt>
<dd id="smenu6" style='display:none'>
<ul>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=drew&CATEGORY=Shoes%20Footwear&TYPE=Drew%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Drew</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=hushpuppies&CATEGORY=Shoes%20Footwear&TYPE=Hush%20Puppies%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Hush Puppies</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=&CATEGORY=Shoes%20Footwear&TYPE=New%20Balance%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;New Balance</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=softspots&CATEGORY=Shoes%20Footwear&TYPE=Softspots%20AND%20MENS&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Lowell/Softspots</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=other&CATEGORY=Shoes%20Footwear%20AND%20MENS&TYPE=NOT%20DREW%20NOT%20Hush%20Puppies%20NOT%20Softspots%20NOT%20NEW%20Balance&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Other</font></a></li>
<li><a href="#"><font size="small" color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=sandal&CATEGORY=Shoes%20Footwear&TYPE=Sandal%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Sandal</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=Boot&CATEGORY=Shoes%20Footwear&TYPE=Boot%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Boot</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=Casual&CATEGORY=Shoes%20Footwear&TYPE=Casual%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=Dress&CATEGORY=Shoes%20Footwear&TYPE=Dress%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=Slipper&CATEGORY=Shoes%20Footwear&TYPE=Slipper%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Slipper</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=ms&gender=men&active=thera&CATEGORY=Shoes%20Footwear&TYPE=Therapeutic%20AND%20Mens&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Therapeutic</font></a></li>
</ul>
</dd>
<dt onclick="javascript:show('smenu7');"><a href="http://www.supportplus.com/diabetes.cfm?catx=diabcare&title=Diabetes%20Care"><font size="small" color="#3c4d5f">&nbsp;<b>Diabetes Care</b></font></a></dt>
<dd id="smenu7" style='display:none'>
<ul>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=diabcare&active=socks&CATEGORY=Diabetes%20Care&TYPE=Socks&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Socks</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=diabcare&active=fotwear&CATEGORY=Shoes%20Footwear&TYPE=Diabetes&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Footwear</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=diabcare&active=skincare&CATEGORY=Diabetes%20Care&TYPE=Skin%20Care&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Skin Care</font></a></li>
<li><a href="http://www.supportplus.com/product_list.cfm?catx=diabcare&active=other&SEARCH_CRITERIA=Diabetes%20NOT%20Skin%20Care%20NOT%20Footwear%20NOT%20SOCKS%20NOT%20Shoes&refine.x=12&refine.y=10"><font size="small" color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;Other</font></a></li>
</ul>
</dd>
</dl>


thanks!!!
:thumbsup:

vwphillips
07-07-2005, 07:43 PM
to stay open when the user is taken to the linked page..

dont understand how the menu can exist when above happens

but it would be normal to use a cookie to remember the menu state when the page is revisited/refreshed

see
http://www.vicsjavascripts.org.uk/MenuMemory/MenuMemory.htm

buddy revelle
07-07-2005, 08:16 PM
the menu is an included page...everytime a new page is loaded the menu shows up in its "block" state. If the user clicks on one of the submenus I want that submenu to stay open on the next page...very frustrating

buddy revelle
07-11-2005, 09:12 PM
anyone else out there got a solution? it'd be greatly appreciated! :confused:

buddy revelle
07-14-2005, 02:14 PM
Since nobody was able to help me I banged my head against my monitor for a few days and came up with the script. Here's the JS with a small snippet of some of the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<-- "Your CSS Goes Here" -->
</style>
<script type="text/javascript">

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
</head>

<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')"><A STYLE="text-decoration:none" href="http://www.supportplus.com/Medical_Support_Hose.cfm?catx=&title=Medical%20Support%20Hose"><font color="#3c4d5f">&nbsp;<b>Medical Support Hose</b></font></a></div>
<span class="submenu" id="sub1"></span>
<div class="menutitle" onclick="SwitchMenu('sub2')"><A STYLE="text-decoration:none" href="http://www.supportplus.com/womens_hose.cfm?gender=Women&catx=wsh&title=Women's%20Medical%20Support%20Hose"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Women's</b></font></a></div>
<span class="submenu" id="sub2">
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=jobst&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Jobst%20AND%20Womens&&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jobst</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=futuro&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Futuro%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Futuro</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=bauer%20black&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Bauer%20Black%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bauer & Black</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=support%20plus&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Support%20Plus%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Support Plus</font></a>
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Compression</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=mild&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Mild%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mild (8-15)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=moderate&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Moderate%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Moderate (15-20)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Firm%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Firm (20-30)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=very%20firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Very%20Firm%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Very Firm (30+)</font></a>
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=knee%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Knee%20High%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knee-High</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=thigh%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Thigh%20High%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thigh-High</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=pantyhose&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Pantyhose%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pantyhose</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=athletic&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Athletic%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Athletic</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=casual&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Casual%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=wsh&gender=women&active=dress&CATEGORY=MEDICAL%20SUPPORT%20HOSE&Type=Dress%20AND%20Womens&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')"><A STYLE="text-decoration:none" href="http://www.supportplus.com/mens_hose.cfm?catx=msh&gender=men&title=Men's%20Medical%20Support%20Hose"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>Men's</b></font></a></div>
<span class="submenu" id="sub3">
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Brand</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=jobst&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Jobst%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jobst</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=futuro&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Futuro%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Futuro</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=bauer%20black&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Bauer%20Black%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bauer & Black</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=support%20plus&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Support%20Plus%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Support Plus</font></a>
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Compression</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=mild&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Mild%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mild (8-15)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=moderate&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Moderate%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Moderate (15-20)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Firm%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Firm (20-30)</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=very%20firm&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Very%20Firm%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Very Firm (30+)</font></a>
<A STYLE="text-decoration:none" href="#"><font color="#3c4d5f">&nbsp;&nbsp;&nbsp;<b>By Style</b></font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=knee%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Knee%20High%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knee-High</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=thigh%20high&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Thigh%20High%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thigh-High</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=athletic&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Athletic%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Athletic</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=casual&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Casual%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Casual</font></a>
<A STYLE="text-decoration:none" href="http://www.supportplus.com/product_list.cfm?catx=msh&gender=men&active=dress&CATEGORY=MEDICAL%20SUPPORT%20HOSE&TYPE=Dress%20AND%20MENS&refine.x=12&refine.y=10"><font color="#526981">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dress</font></a>
</span>
</div>
</body>
</html>

The problem was that my site contains over 24,000 dynamic pages and couldn't place an "id" within each page, so I used a cookie instead.

Thanks to dynamic drive for a little help on this...the rest is mine, hope this is useful for anyone out there needing a dynamic menu that follows your users throughout your site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum