Menu
Ok, I’m a newbie and trying to build this navigation bar that works with onClick which reveals horizontal sub navigation. I apply this javascript and the nav bar dissappears. You can see it at the link below. If you hit refresh you’ll be a bale to see the nav bar for a split of second.
Have a look: [url]http://auctionexcel.com/css/test5.htm
Here’s the code:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Untitled Document</title>
<script type=”text/javascript”>
function init()
{
if(document.getElementById && document.createTextNode)
{
var mn=document.getElementById(‘mainnav’);
var as=mn.getElementsByTagName(‘a’);
for (var i=0;i<as.length;i++)
{
as[i].onclick=function(){show(this);return false}
as[i].onkeypress=function(){show(this);return false}
}
hidem();
}
}
function show(l)
{
hidem();
var id=l.href.match(/#(w.+)/)[1];
document.getElementById(id).style.display=’block’;
}
function hidem()
{
for (var i=0;i<document.getElementsByTagName(‘div’).length;i++)
{
document.getElementsByTagName(‘div’)[i].style.display=’none’;
}
}
window.onload=init;
</script>
<style type=”text/css”>
/* navigation
#nav {
float: left;
margin: 0;
padding: 0;
list-style: none;
font-size: 75%;
font-family:Arial, Helvetica, sans-serif;
background:url([url]http://auctionexcel.com/css/images/navcorner_right.gif
padding-right:7px;
height:33px;
}
#nav ul {
margin: 0px;
padding: 0px;
padding-left:7px;
height:33px;
background:url([url]http://auctionexcel.com/css/images/navcorner_left.gif
float:left;
}
#nav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
background: url(images/navback_darkgreen.gif);
height:33px;
line-height:33px;
}
#nav a {
float: left;
padding:0 16px;
height:33px;
text-decoration: none;
border-bottom: none;
color: #fff;
background: url(images/navback_lightgreen.gif);
}
#nav a.last{padding:0 18px;}
#nav a:hover, #nav a.active {
color: #fff;
background:transparent;
}
</style>
</head>
<body>
<div id=”nav”>
<ul id=”mainnav”>
<li><a href=”#acc”>Accounts</a></li>
<li><a href=”#mor”>Mortgages</a></li>
<li><a href=”#loa”>Loans</a></li>
<li><a href=”#con”>Convenience Services</a></li>
<li><a href=”#inv”>Investment Planning</a></li>
<li><a href=”#you”>Young Finance</a></li>
<li><a class=”last” href=”#”>FMFCU Info</a></li>
</ul>
</div>
<div id=”acc”>…why data…</div>
<div id=”mor”>…now data…</div>
<div id=”loa”>…brown data…</div>
<div id=”con”>…cow data…</div>
</body>
</html>