Netscape Equivalent for collapsing menu.

ID10T16 · Jul 27, 2001

I need this to do what it does in IE, to do it in Netscape. Anybody know a quick modification I can make to my code that would allow for this effect, or am I using some things that netscape just won't support? Here's the code, it's basically just a collapsing menu:

<html>
<head>
<title>Menu</title>
<script language="Javascript">
meanfiddler = new Object();
meanfiddler.expanmenu = new Object();
meanfiddler.expanmenu.expandos = new Array();
meanfiddler.expanmenu.heights = new Array();
meanfiddler.expanmenu.names = new Array();
var PrintersMenu = 0
var CopiersMenu = 0
var BrandsMenu = 0
var PartsMenu = 0

function meanmenu(identifier){
if (eval(identifier+'Menu') == 1){
if (PrintersMenu){
mf_change('Printers')
PrintersMenu--;
arrow1.className = 'hid';
} else if(CopiersMenu){
mf_change('Copiers');
CopiersMenu--;
arrow2.className = 'hid';
} else if (BrandsMenu){
mf_change('Brands');
BrandsMenu--;
arrow3.className = 'hid';
} else if (PartsMenu){
mf_change('Parts')
PartsMenu--;
arrow4.className = 'hid';
}

}else{
if (PrintersMenu){
mf_change('Printers')
PrintersMenu--;
arrow1.className = 'hid';
} else if(CopiersMenu){
mf_change('Copiers');
gettingthereMenu--;
arrow2.className = 'hid';
} else if (BrandsMenu){
mf_change('Brands');
BrandsMenu--;
arrow3.className = 'hid';
} else if (PartsMenu){
mf_change('Parts')
PartsMenu--;
arrow4.className = 'hid';
}
if (identifier == 'Printers'){
PrintersMenu = 1;
arrow1.className = 'nothid';
} else if (identifier == 'Copiers'){
CopiersMenu = 1;
arrow2.className = 'nothid';
} else if (identifier == 'Brands'){
BrandsMenu = 1;
arrow3.className = 'nothid';
} else if (identifier == 'Parts'){
PartsMenu = 1;
arrow4.className = 'nothid';
}
mf_change(identifier);
}
}

function mf_change(id) {
if (document.all){
if(document.all[id].style.display == 'none'){
document.all[id].style.display = '';
} else {
document.all[id].style.display = 'none';
}
} else if (document.getElementById){
if(document.getElementById(id).style.display == 'none'){
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
} else if(document.layers) { if(parseInt(id + 1)){ ditem = id + 1; } else { ditem = meanfiddler.expanmenu.names[id]; } if(meanfiddler.expanmenu.expandos[ditem].clip.bottom == 0) { meanfiddler.expanmenu.expandos[ditem].clip.bottom = meanfiddler.expanmenu.heights[ditem]; } else { meanfiddler.expanmenu.expandos[ditem].clip.bottom = 0; } mf_align();
}
}

function mf_align() {
var i,j,nsbug;
nsbug = meanfiddler.expanmenu.expandos.length;
for(i=0; i<nsbug; i++) {
j = i + 1;
if(meanfiddler.expanmenu.expandos[j]){
if(document.layers) {
meanfiddler.expanmenu.expandos[j].top = meanfiddler.expanmenu.expandos.top + meanfiddler.expanmenu.expandos.clip.bottom;
}
}
}
}

function domenu(){

if(document.layers) {
for(i=0; i<document.layers['mainLayer'].document.layers.length; i++){
meanfiddler.expanmenu.expandos = document.layers['mainLayer'].document.layers;
meanfiddler.expanmenu.names[document.layers['mainLayer'].document.layers.name] = i;
meanfiddler.expanmenu.heights = meanfiddler.expanmenu.expandos.clip.bottom;
}
for (p=0;p<meanfiddler.expanmenu.expandos.length;p=p+2){
mf_change(p);
}
document.layers['mainLayer'].visibility = 'visible';
} else if (document.all){
for(i = 0; i < document.all('mainLayer').all.length; i++){ document.all('mainLayer').all.style.position = 'relative'; if(document.all('mainLayer').all.className == 'menu'){ document.all('mainLayer').all.style.display = 'none'; }
}
document.all('mainLayer').style.visibility = 'visible';
} else if (document.getElementsByTagName && document.getElementById){
var contained = document.getElementById('mainLayer').getElementsByTagName('div');
for(i = 0; i < contained.length; i++){ contained.style.position = 'relative'; if(contained.getAttribute('class') == 'menu'){ contained.style.display = 'none'; }
}
document.getElementById('mainLayer').style.visibility = 'visible';
}
}

</script>
<style>
.meanmenu {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 11px;
color : black;
text-decoration : underline;
}
.meanmenu:active {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 11px;
color : #CC3300;
text-decoration : none;
}
.meanmenu:hover {
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 11px;
color : #0000FF;
text-decoration : none;
}
.hid {
visibility : hidden;
}
.nothid {
visibility : show;
}
</style>
</head>
<body bgcolor="#FFFFFF" onload="javascript:domenu();">
<div id="mainLayer" style="visibility: hidden; border: 0px none #FFFFFF">
<div style="border: 1px none #FFFFFF">
<img src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#">Link Here</a> </div>
<div>
<img id="arrow1" src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#" onclick="meanmenu('Printers'); return false">Link Here</A>
</div>
<div class="menu" id="Printers" style="padding-left:24px;">
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
</div>
<div><img id="arrow2" src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#" onclick="meanmenu('Copiers'); return false">Link Here</A> </div>
<div class="menu" id="Copiers" style="padding-left:24px;">
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
</div>
<div><img src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#">Link Here</A>
</div>
<div><img id="arrow3" src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#" onclick="meanmenu('Brands'); return false">Link Here</A>
</div>
<div class="menu" id="Brands" style="padding-left:24px;">
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
</div>
<div><img src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#subscribe">Link Here</A>
</div>
<div><img id="arrow4" src="arrow.gif" width="11" height="10" border="0" alt="" class="hid">
<a class="meanmenu" href="#" onclick="meanmenu('Parts'); return false">Link Here</A>
</div>
<div class="menu" id="Parts" style="padding-left:24px;">
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
<a class="meanmenu" href="#">Link Here</A><br>
</div>
</div>
</body>
</html>

Thanx for the help.

avnercohen · Jul 27, 2001

To make long story short I would suggest you'll find a script that is a cross browsers script try one of this links :

http://developer.netscape.com/viewsource/smith_menu/smith_menu.html

http://www.treemenu.com/

http://www.webreference.com/dhtml/hiermenus/instructions/noframes/step1.html

http://webreference.com/dhtml/dynomat/hiermenus3/ie/index.html

http://www.bratta.com/dhtml/scripts.asp?url=scripts/scripts.asp?id=28&ac=7&order=created

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

http://www.ivanpeters.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Netscape Equivalent for collapsing menu.

ID10T16

Technical User

avnercohen

Programmer

Similar threads

Part and Inventory Search

Sponsor