saxman
05-08-2006, 06:08 PM
I am trying to modify this menu and am having a hard time.
I have two frames with this menu in the left. After expanding the menu, I am able to click on a sublink and then change the frame on the right. However, the menu collapses back up and I then have to reopen it again. What do I have to do in order to keep the menu expanded until I click on another mainlink? you can still reproduce this error by clicking on one of the sublinks. Even though a new browser window appears, when you go back to the menu, it has collapsed. :(
thanks,
S
here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>menu test</title>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}
html {
overflow-x: hidden;
}
body {
background-color: #FFFFFF;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}
/******* hyperlink and anchor tag styles *******/
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #000;
}
/***********************************************/
/* Menu */
/***********************************************/
div.menu {
position: fixed;
left: 16px;
top: 20px;
}
ul.zzul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:1;
left:50;
}
li {
display:inline;
}
span.zzspace {
padding:2px;
}
a.mainlink, a.mainlink:visited{
width:150px;
font-size: 18px;
margin-top: 3px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #DE1010;
font-weight: bold;
padding: 0px 0px 1px 5px;
color: #fff;
}
a.mainlink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF2929;
text-decoration: none;
}
a.sublink, a.sublink:visited{
width:150px;
font-size: 13px;
margin: 0px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #FFc1c1;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000;
text-decoration:none;
}
a.sublink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF8282;
text-decoration: none;
}
a.activelink, a.activelink:visited, a.activelink:hover{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 25px solid #666;
border-right: 1px solid #999;
background-color: #ffffff;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000000;
text-decoration:none;
}
/********************* end **********************/
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function ExpCont(obj){
/* if (obj.style == "sublink") { */
if (!obj.ul){
obj.ul=obj.getElementsByTagName('UL')[0];
if (!obj.parentNode.ary){ obj.parentNode.ary=[]; }
obj.parentNode.ary.push(obj);
obj.ary=obj.parentNode.ary;
}
obj.ul.style.display=obj.ul.style.display=='none'?'':'none';
for (var zxc0=0;zxc0<obj.ary.length;zxc0++){
if (obj.ary[zxc0]!=obj){
obj.ary[zxc0].ul.style.display='none';
}
}
/* } */
}
//-->
</script>
</head>
<body>
<div class="menu">
<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">
<li onClick="ExpCont(this);" ><a href="http://www.yahoo.com" class="mainlink" target="main">New Patient</a>
<ul class="zzul" id="sp_0" style="display:none;">
<li>
<a href="Movies/New Patient/DP01.htm" class="sublink" target="main">Login and select patient</a>
</li>
<li>
<a href="Movies/New Patient/DP02.htm" class="sublink" target="main">Review facesheet</a>
</li>
<li>
<a href="Movies/New Patient/DP03.htm" class="sublink" target="main">Chief complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP04.htm" class="sublink" target="main">HPI for chief complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP05.htm" class="sublink" target="main">HPI for second complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP06.htm" class="sublink" target="main">PE</a>
</li>
<li>
<a href="Movies/New Patient/DP07.htm" class="sublink" target="main">Procedures</a>
</li>
<li>
<a href="Movies/New Patient/DP08.htm" class="sublink" target="main">DX</a>
</li><li>
<a href="Movies/New Patient/DP09.htm" class="sublink" target="main">Orders</a>
</li><li>
<a href="Movies/New Patient/DP10.htm" class="sublink" target="main">Rx</a>
</li><li>
<a href="Movies/New Patient/DP11.htm" class="sublink" target="main">Note</a>
</li><li>
<a href="Movies/New Patient/DP12.htm" class="sublink" target="main">Charges</a>
</li><li>
<a href="Movies/New Patient/DP13.htm" class="sublink" target="main">Annotate and sign note</a>
</li>
<li>
<a href="Movies/New Patient/DP14.htm" class="sublink" target="main">Review tests</a>
</li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Civil</a>
<ul class="zzul" id="sp_1" style="display:none;">
<li><a href="civil/masonry.htm" class="sublink">Masonry Bridges</a></li>
<li><a href="civil/strength.htm" class="sublink">Bridge Strengthening</a></li>
<li><a href="civil/concrete.htm" class="sublink">Concrete Repairs</a></li>
<li><a href="civil/ironstee.htm" class="sublink">Iron & Steel</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a class="mainlink">Environment</a>
<ul class="zzul" id="sp_2" style="display:none;">
<li><a href="enviro/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="enviro/timber.htm" class="sublink">Timber Frames</a></li>
<li><a href="enviro/lintel.htm" class="sublink">Lintel Repairs</a></li>
<li><a href="enviro/arch.htm" class="sublink">Arch Repairs</a></li>
<li><a href="enviro/flinclay.htm" class="sublink">Flint & Clay Lump</a></li>
<li><a href="enviro/damprot.htm" class="sublink">Damp & Rot</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Business</a>
<ul class="zzul" id="sp_3" style="display:none;">
<li><a href="business/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="business/quality.htm" class="sublink">Quality</a></li>
<li><a href="business/partywal.htm" class="sublink">Party Walls</a></li>
<li><a href="business/warranty.htm" class="sublink">Warranties</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Company Info</a>
<ul class="zzul" id="sp_4" style="display:none;">
<li><a href="company/about.htm" class="sublink">About Us</a></li>
<li><a href="company/clients.htm" class="sublink">Clients</a></li>
<li><a href="company/news.htm" class="sublink">News</a></li>
<li><a href="company/policies.htm" class="sublink">Company Policies</a></li>
<li><a href="company/opps.htm" class="sublink">Opportunities</a></li>
<li><a href="company/enquiries.htm" class="sublink">Enquiries</a></li>
</ul>
</li>
</div>
</body>
</html>
I have two frames with this menu in the left. After expanding the menu, I am able to click on a sublink and then change the frame on the right. However, the menu collapses back up and I then have to reopen it again. What do I have to do in order to keep the menu expanded until I click on another mainlink? you can still reproduce this error by clicking on one of the sublinks. Even though a new browser window appears, when you go back to the menu, it has collapsed. :(
thanks,
S
here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/menu.js"></script>
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>menu test</title>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}
html {
overflow-x: hidden;
}
body {
background-color: #FFFFFF;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-attachment: fixed;
}
/******* hyperlink and anchor tag styles *******/
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #000;
}
/***********************************************/
/* Menu */
/***********************************************/
div.menu {
position: fixed;
left: 16px;
top: 20px;
}
ul.zzul {
list-style-type:none;
padding:0px;
margin:0px;
line-height:1;
left:50;
}
li {
display:inline;
}
span.zzspace {
padding:2px;
}
a.mainlink, a.mainlink:visited{
width:150px;
font-size: 18px;
margin-top: 3px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #DE1010;
font-weight: bold;
padding: 0px 0px 1px 5px;
color: #fff;
}
a.mainlink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF2929;
text-decoration: none;
}
a.sublink, a.sublink:visited{
width:150px;
font-size: 13px;
margin: 0px;
display: block;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #000000;
border-left: 1px solid #333;
border-right: 1px solid #ccc;
background-color: #FFc1c1;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000;
text-decoration:none;
}
a.sublink:hover{
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 1px solid #666;
border-right: 1px solid #999;
background-color: #FF8282;
text-decoration: none;
}
a.activelink, a.activelink:visited, a.activelink:hover{
font-size: 12px;
margin: 0px;
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #333;
border-left: 25px solid #666;
border-right: 1px solid #999;
background-color: #ffffff;
font-weight: normal;
padding: 0px 0px 1px 5px;
color: #000000;
text-decoration:none;
}
/********************* end **********************/
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function ExpCont(obj){
/* if (obj.style == "sublink") { */
if (!obj.ul){
obj.ul=obj.getElementsByTagName('UL')[0];
if (!obj.parentNode.ary){ obj.parentNode.ary=[]; }
obj.parentNode.ary.push(obj);
obj.ary=obj.parentNode.ary;
}
obj.ul.style.display=obj.ul.style.display=='none'?'':'none';
for (var zxc0=0;zxc0<obj.ary.length;zxc0++){
if (obj.ary[zxc0]!=obj){
obj.ary[zxc0].ul.style.display='none';
}
}
/* } */
}
//-->
</script>
</head>
<body>
<div class="menu">
<ul style="list-style-type:none; margin:0; padding:5px; width: 115px;">
<li onClick="ExpCont(this);" ><a href="http://www.yahoo.com" class="mainlink" target="main">New Patient</a>
<ul class="zzul" id="sp_0" style="display:none;">
<li>
<a href="Movies/New Patient/DP01.htm" class="sublink" target="main">Login and select patient</a>
</li>
<li>
<a href="Movies/New Patient/DP02.htm" class="sublink" target="main">Review facesheet</a>
</li>
<li>
<a href="Movies/New Patient/DP03.htm" class="sublink" target="main">Chief complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP04.htm" class="sublink" target="main">HPI for chief complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP05.htm" class="sublink" target="main">HPI for second complaint</a>
</li>
<li>
<a href="Movies/New Patient/DP06.htm" class="sublink" target="main">PE</a>
</li>
<li>
<a href="Movies/New Patient/DP07.htm" class="sublink" target="main">Procedures</a>
</li>
<li>
<a href="Movies/New Patient/DP08.htm" class="sublink" target="main">DX</a>
</li><li>
<a href="Movies/New Patient/DP09.htm" class="sublink" target="main">Orders</a>
</li><li>
<a href="Movies/New Patient/DP10.htm" class="sublink" target="main">Rx</a>
</li><li>
<a href="Movies/New Patient/DP11.htm" class="sublink" target="main">Note</a>
</li><li>
<a href="Movies/New Patient/DP12.htm" class="sublink" target="main">Charges</a>
</li><li>
<a href="Movies/New Patient/DP13.htm" class="sublink" target="main">Annotate and sign note</a>
</li>
<li>
<a href="Movies/New Patient/DP14.htm" class="sublink" target="main">Review tests</a>
</li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Civil</a>
<ul class="zzul" id="sp_1" style="display:none;">
<li><a href="civil/masonry.htm" class="sublink">Masonry Bridges</a></li>
<li><a href="civil/strength.htm" class="sublink">Bridge Strengthening</a></li>
<li><a href="civil/concrete.htm" class="sublink">Concrete Repairs</a></li>
<li><a href="civil/ironstee.htm" class="sublink">Iron & Steel</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a class="mainlink">Environment</a>
<ul class="zzul" id="sp_2" style="display:none;">
<li><a href="enviro/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="enviro/timber.htm" class="sublink">Timber Frames</a></li>
<li><a href="enviro/lintel.htm" class="sublink">Lintel Repairs</a></li>
<li><a href="enviro/arch.htm" class="sublink">Arch Repairs</a></li>
<li><a href="enviro/flinclay.htm" class="sublink">Flint & Clay Lump</a></li>
<li><a href="enviro/damprot.htm" class="sublink">Damp & Rot</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Business</a>
<ul class="zzul" id="sp_3" style="display:none;">
<li><a href="business/structur.htm" class="sublink">Structural Repairs</a></li>
<li><a href="business/quality.htm" class="sublink">Quality</a></li>
<li><a href="business/partywal.htm" class="sublink">Party Walls</a></li>
<li><a href="business/warranty.htm" class="sublink">Warranties</a></li>
</ul>
</li>
<li onClick="ExpCont(this);" ><a href="#" class="mainlink">Company Info</a>
<ul class="zzul" id="sp_4" style="display:none;">
<li><a href="company/about.htm" class="sublink">About Us</a></li>
<li><a href="company/clients.htm" class="sublink">Clients</a></li>
<li><a href="company/news.htm" class="sublink">News</a></li>
<li><a href="company/policies.htm" class="sublink">Company Policies</a></li>
<li><a href="company/opps.htm" class="sublink">Opportunities</a></li>
<li><a href="company/enquiries.htm" class="sublink">Enquiries</a></li>
</ul>
</li>
</div>
</body>
</html>