Here's a simple piece of navigation I'm working on. It works in IE, of course NN is killing me. I am trying to write some JS to make it cross compatibile, but it's a mess. So I included my good IE version. Does anyone, PLEASE, have some suggestions for how to best make this work in NN?? You're help would be GREATLY appreciated! Thanks!
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.navGreen { font-family: arial; color: #000000; font-weight="500"; font-size: 11px; background-color : #99cc00; }
.navGrey { font-family: arial; color: #000000; font-weight="500"; font-size: 14px; background-color : #cccccc; }
.navBlue { font-family: arial; color: #000000; font-weight="500"; font-size: 11px; background-color : #000066; }
a {text-decoration : none;}
.active{visibility:visible; position:absolute; width:589px; height:18px; z-index:1; left: 14px; top: 41px}
.inactive{visibility:hidden; position:absolute; width:589px; height:18px; z-index:1; left: 14px; top: 41px}
</style>
<script language="javascript">
var i, x
var net = document.getElementsByTagName('div')
function activate(tag){
for (x=0; x<net.length;x++){
if (net.item(x).getAttribute("name")==tag || net.item(x).getAttribute("name2")==tag || net.item(x).getAttribute("name3")==tag){
net.item(x).className="active"}
}
}
function deactivate(tag){
for (i=0;i<net.length;i++){
net.item(i).className="inactive"};
activate(tag);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="600" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="navGrey" bgcolor="#cccccc"><span ONCLICK="deactivate('layer1');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">Self Service Center</span></td>
<td class="navGrey"><span ONCLICK="deactivate('layer2');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">Resources</span></td>
<td class="navGrey"><span ONCLICK="deactivate('layer3');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">Products</span></td>
<td class="navGrey"><span ONCLICK="deactivate('layer4');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">About us</span></td>
<td class="navGrey"><span ONCLICK="deactivate('layer5');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">Help & Contact us</span></td>
<td class="navGrey"><span ONCLICK="deactivate('layer6');" ONMOUSEOVER="this.style.color='black';this.style.backgroundColor='#99cc00'" ONMOUSEOUT="this.style.color='black';this.style.backgroundColor='#cccccc'">Main page</span></td>
</tr>
<tr>
<td colspan="5">
<DIV CLASS="inactive" NAME="layer1"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</table>
</div>
<div class="inactive" name="layer2"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table></div>
<div class="inactive" name="layer3"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Eleven</td>
<td>Twelve</td>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
</tr>
</table></div>
<div class="inactive" name="layer4"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Eleven</td>
<td>Twelve</td>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
</tr>
</table></div>
<div class="inactive" name="layer5"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Eleven</td>
<td>Twelve</td>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
</tr>
</table></div>
<div class="inactive" name="layer6"><table width="550" border="0" cellspacing="2" cellpadding="2">
<tr>
<td>Eleven</td>
<td>Twelve</td>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
</tr>
</table></div>
</td>
</tr>
</table>
</body>
</html>
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
DHTML navigation...functional in NN4
Linear Mode
