help noob, menu script

trinzia

09-01-2006, 06:08 AM

Hi,

I am a novice, trying to make a menu script. It is a simple 2-level hierarchy, using a query string to keep open the branch which was clicked. It also adds a style the selected page link (red).

If you save this html as page1 and page2, you can see, that the menu will close all open branches when you click a new one. This is what I wanted. But, sometimes it does not... sometimes 2 branches can be open at the same time. I need it to have only 1 branch open at a time.

Please understand that I can barely write one line of code without breaking it all... I didn't write the menuOPen function. I can understand the problem is that I have assigned 2 items the "menuopen" state, but any time I touch the script at this point, I break everything. OH and there's an error in the script too but I don't know what it is.

Thanks for any help.
Trinzia

<html>
<head>
<title>persist menu</title>
<style type="text/css">
div.menuclosed div.sublinks { display: none; }
div.menuopen {display:visible;}
.toplink { display:block; padding:3px 2px 3px 5px;
text-decoration:none; color:#006099;
border-top: 1px solid #cccccc;}
.sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
.sublinks a:link { color:#006099;}
.sublinks a:visited { color:#006099;}
.sublinks a:hover { color:#996000; background:#eeeeee;}
.selected {color:#ff2222 !important;}
</style>

<script language="javascript" type="text/javascript">
var theDiv;
var selectParent;
function checkMenu(){
var result = location.search.split("=");
var selected = document.getElementById(result[1]);
selected.className="selected";
selectParent = selected.parentNode.parentNode;
selectParent.className = "menuopen";
}

function openMenu(toplink) {
if(theDiv){
theDiv.className = "menuclosed";
if(theDiv==toplink.parentNode){
theDiv = null;
return false;
}
}
theDiv = toplink.parentNode;
theDiv.className = "menuopen";
}

</script>
</head>
<body onLoad="checkMenu()">

<div class="menuclosed" id="a">
<a class="toplink" href="#" onclick="openMenu(this); return false;">Branch A</a>
<div class="sublinks">
<a href="page1.html?menuItem=a1" id="a1">Link Page a1</a>
<a href="page2.html?menuItem=a2" id="a2">Link Page a2</a>
</div>
</div>
<div class="menuclosed" id="b">
<a class="toplink" href="#" onclick="openMenu(this); return false;">Branch B</a>
<div class="sublinks">
<a href="page1.html?menuItem=b1" id="b1">Link Page b1</a>
<a href="page2.html?menuItem=b2" id="b2">Link Page b2</a>
</div>
</div>

</body>
</html>

vwphillips

09-01-2006, 11:17 AM

<html>
<head>
<title>persist menu</title>
<style type="text/css">
div.menuclosed div.sublinks { display: none; }
div.menuopen {display:visible;}
.toplink { display:block; padding:3px 2px 3px 5px;
text-decoration:none; color:#006099;
border-top: 1px solid #cccccc;}
.sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
.sublinks a:link { color:#006099;}
.sublinks a:visited { color:#006099;}
.sublinks a:hover { color:#996000; background:#eeeeee;}
.selected {color:#ff2222 !important;}
</style>

<script language="javascript" type="text/javascript">
var theDiv;
var selectParent;
function checkMenu(){
document.getElementById('a').className='menuclosed';
document.getElementById('b').className='menuclosed';
var result = location.search.split("=");
var selected = document.getElementById(result[1]);
if (!selected){ return; }
selected.className="selected";
selectParent = selected.parentNode.parentNode;
selectParent.className = "menuopen";
}

function openMenu(toplink,id) {
document.getElementById(id).className='menuclosed';
if(theDiv){
theDiv.className = "menuclosed";
if(theDiv==toplink.parentNode){
theDiv = null;
return false;
}
}
theDiv = toplink.parentNode;
theDiv.className = "menuopen";
}

</script>
</head>
<body onLoad="checkMenu()">
Page2
<div class="menuclosed" id="a">
<a class="toplink" href="#" onclick="openMenu(this,'b'); return false;">Branch A</a>
<div class="sublinks">
<a href="page1.html?menuItem=a1" id="a1">Link Page a1</a>
<a href="page2.html?menuItem=a2" id="a2">Link Page a2</a>
</div>
</div>
<div class="menuclosed" id="b">
<a class="toplink" href="#" onclick="openMenu(this,'a'); return false;">Branch B</a>
<div class="sublinks">
<a href="page1.html?menuItem=b1" id="b1">Link Page b1</a>
<a href="page2.html?menuItem=b2" id="b2">Link Page b2</a>
</div>
</div>

</body>
</html>

trinzia

09-01-2006, 11:43 AM

That did the trick, thanks so much, vwphillips! What a relief, after a week trying to solve this! Thx!

:D :D :D

vwphillips

09-01-2006, 01:06 PM

be easier using a cookie

say if interested

trinzia

09-04-2006, 05:11 AM

The script is for cookie-disabled site.

However, can anyone do it so I don't have to have list the parent IDs? That would quickly become complicated on a menu with 500 links. Perhaps using getElementbyClass, close them all, and then apply the menuOpen style to the correct one?

Thanks :cool:

trinzia

09-04-2006, 05:12 AM

or better, get the item that has menuOpen class on it, close it, then place menuOpen onto the new one. that would be better right?

vwphillips

09-04-2006, 08:55 AM

<html>
<head>
<title>persist menu</title>
<style type="text/css">
div.menuclosed div.sublinks { display: none; }
div.menuopen {display:visible;}
.toplink { display:block; padding:3px 2px 3px 5px;
text-decoration:none; color:#006099;
border-top: 1px solid #cccccc;}
.sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
.sublinks a:link { color:#006099;}
.sublinks a:visited { color:#006099;}
.sublinks a:hover { color:#996000; background:#eeeeee;}
.selected {color:#ff2222 !important;}
</style>

<script language="javascript" type="text/javascript">
var theDiv;
var selectParent;
var Ary=[];

function checkMenu(){
var divs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
var cnt=0;
for (var zxc0=0;zxc0<divs.length;zxc0++){
if (divs[zxc0].className=='menuclosed'){
Ary.push(divs[zxc0]);
var as=divs[zxc0].getElementsByTagName('A')
for (var zxc1=0;zxc1<as.length;zxc1++){
as[zxc1].href+='?'+cnt;
}
cnt++
}
}
var div=location.search.split('?')[1];
if (div){ Ary[parseInt(div)].className='menuopen'; }
}

function openMenu(toplink,id) {
document.getElementById(id).className='menuclosed';
if(theDiv){
theDiv.className = "menuclosed";
if(theDiv==toplink.parentNode){
theDiv = null;
return false;
}
}
theDiv = toplink.parentNode;
theDiv.className = "menuopen";
}

</script>
</head>
<body onLoad="checkMenu()">
Page1
<div class="menuclosed" id="a">
<a class="toplink" href="#" onclick="openMenu(this,'b'); return false;">Branch A</a>
<div class="sublinks">
<a href="page1.html" id="a1">Link Page a1</a>
<a href="page2.html" id="a2">Link Page a2</a>
</div>
</div>
<div class="menuclosed" id="b">
<a class="toplink" href="#" onclick="openMenu(this,'a'); return false;">Branch B</a>
<div class="sublinks">
<a href="page1.html" id="b1">Link Page b1</a>
<a href="page2.html" id="b2">Link Page b2</a>
</div>
</div>

</body>
</html>

vwphillips

09-04-2006, 10:01 AM

better

<html>
<head>
<title>persist menu</title>
<style type="text/css">
div.menuclosed div.sublinks { display: none; }
div.menuopen {display:visible;}
.toplink { display:block; padding:3px 2px 3px 5px;
text-decoration:none; color:#006099;
border-top: 1px solid #cccccc;}
.sublinks a { display:block; padding:2px 2px 5px 26px; text-decoration:none;}
.sublinks a:link { color:#006099;}
.sublinks a:visited { color:#006099;}
.sublinks a:hover { color:#996000; background:#eeeeee;}
.selected {color:#ff2222 !important;}
</style>

<script language="javascript" type="text/javascript">

var Ary=[];
var Cls='menuclosed';

function checkMenu(){
var divs=document.getElementsByTagName('BODY')[0].getElementsByTagName('DIV');
var cnt=0;
for (var zxc0=0;zxc0<divs.length;zxc0++){
if (divs[zxc0].className=='menuclosed'){
Ary.push(divs[zxc0]);
}
}
ALinks();
var div=location.search.split('?')[1];
if (div){ Ary[parseInt(div.split(':')[0])].className=div.split(':')[1]; }
}

function ALinks(){
for (var zxc1=0;zxc1<Ary.length;zxc1++){
var as=Ary[zxc1].getElementsByTagName('A')
for (var zxc2=0;zxc2<as.length;zxc2++){
as[zxc2].href=as[zxc2].href.substring(0,as[zxc2].href.indexOf('?'));
as[zxc2].href+='?'+zxc1+':'+Cls;
}
}
}

function openMenu(toplink) {
var div=toplink.parentNode;
for (var zxc0=0;zxc0<Ary.length;zxc0++){
if (Ary[zxc0]==div){
Ary[zxc0].className=(Ary[zxc0].className=='menuclosed')?'menuopen':'menuclosed';
Cls=Ary[zxc0].className;
}
else {
Ary[zxc0].className='menuclosed';
}
}
ALinks();
}

</script>
</head>
<body onLoad="checkMenu()">
Page1
<div class="menuclosed" id="a">
<a class="toplink" href="#" onclick="openMenu(this); return false;">Branch A</a>
<div class="sublinks">
<a href="page1.html?" id="a1">Link Page a1</a>
<a href="page2.html?" id="a2">Link Page a2</a>
</div>
</div>
<div class="menuclosed" id="b">
<a class="toplink" href="#" onclick="openMenu(this); return false;">Branch B</a>
<div class="sublinks">
<a href="page1.html?" id="b1">Link Page b1</a>
<a href="page2.html?" id="b2">Link Page b2</a>
</div>
</div>

</body>
</html>