Here is something I just whipped up for you. Change as needed if it is what you want.
Code:
<html>
<head>
<script type="text/javascript" langauge="javascript">
var navbar_expanded = true;
function toggleNavbar() { document.getElementById("navmenu").style.display = navbar_expanded?"none":"block"; navbar_expanded = !navbar_expanded; }
</script>
<style type="text/css">
#navbar {
position: absolute;
top: 0px;
left: 0px;
}
#navbar td {
border: solid 2px #000000;
color: #cccccc;
background-color: #666666;
}
#navcontrol a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#navcontrol a:link, #navcontrol a:active, #navcontrol a:visited, {
color: #cccccc;
background-color: #666666;
}
#navcontrol a:hover {
color: #ffffff;
background-color: #999999;
font-weight: bold;
}
</style>
</head>
<body onload="toggleNavbar()">
<table cellspacing="0" cellpadding="0" border="0" id="navbar">
<tr>
<td align="center" valign="center" id="navcontrol">
<a href="#" onclick="toggleNavbar()">NAV</a></td>
<td align="center" valign="center" id="navmenu">
Some links or text goes here...
</td>
</tr>
</table>
</body>
</html>
Reply With Quote
Bookmarks