<html>
<head>
<script language="JavaScript" type="text/javascript">
var supported = (document.all || (document.getElementById && !window.opera));
function hide(){
var subNav = document.getElementById('menu');
for (var i=0;i<subNav.getElementsByTagName('ul').length;i++){
if(subNav.getElementsByTagName('ul')[i].id != '')
subNav.getElementsByTagName('ul')[i].style.display='none';
}
}
function block(i){
if(!supported)return;
var x = document.getElementById(i);
with(x.style)
{
display == 'none' ? display = 'block' : display = 'none';
}
getIt();
}
function getIt()
{
var status = new Object;
var menu = document.getElementById('menu');
var uls = menu.getElementsByTagName('ul');
for(i=0;i<uls.length;i++){
var allids = uls[i].id;
if(allids){
status[allids] = uls[i].style.display;
document.cookie = allids+'='+status[allids];
}
}
}
function setProp(id,value)
{
var styleObj = document.getElementById(id);
if(styleObj != null)
{
styleObj.style.display = value;
}
}
function assignCookie()
{
if(!document.cookie || document.cookie == ' ')
{
var menu = document.getElementById('menu');
var ul = menu.getElementsByTagName('ul');
for(i=0;i<ul.length;i++)
{
var ids = ul[i].id;
if(ids)
{
var styles = ul[i].style.display;
setProp(ids,styles);
}
}
}else if(document.cookie && document.cookie != ' ')
{
var allCookies = document.cookie;
var cookies = allCookies.split('; ');
for(var j=0;j<cookies.length;j++)
{
var values = cookies[j].split('=');
var idc = values[0];
var stl = values[1];
setProp(idc,stl);
}
}
}
window.onload = function(){hide();assignCookie();}
</script>
<style type="text/css">
.toplink{
border-bottom: 1px #111111 solid;
}
#menu{
position: absolute;
top: 25%;
left: 5%;
width: 150px;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li{
border-bottom: 1px solid black;
list-style: none;
margin-left: 5px;
padding-left: 1em;
text-indent: -1em;
}
#menu ul li.sub{
margin-left: 1em;
padding-left: 1em;
text-indent: -1em;
border: none;
}
#menu li a.navw:link{
font-size: 8pt;
color: #111111;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navw:visited{
font-size: 8pt;
color: #111111;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navw:active{
font-size: 8pt;
color: #111111;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navw:hover{
font-size: 8pt;
color: #999999;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navh:link{
font-size: 8pt;
color: #111111;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navh:visited{
font-size: 8pt;
color: #111111;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navh:active{
font-size: 8pt;
color: #111111;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
#menu li a.navh:hover{
font-size: 8pt;
color: #999999;
font-weight:bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-decoration:none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="javascript:;" class="navh">→ Home</a> </li>
</ul>
<ul>
<li><a href="javascript:;" class="navh" onclick="block('one');return false">→ Javascript</a></li>
</ul>
<ul id="one" style="display: block; ">
<li class="sub"><a href="javascript:;" class="navw"> HTML and JavaScript</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Variables and strings</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Functions</a></li>
</ul>
<ul>
<li><a href="javascript:;" class="navh" onclick="block('two');return false">→ CSS</a></li>
</ul>
<ul id="two" style="display: block; ">
<li class="sub"><a href="javascript:;" class="navw"> Properties</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Utilities</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Selectors</a></li>
</ul>
<ul>
<li><a href="javascript:;" class="navh" onclick="block('three');return false">→ DOM</a></li>
</ul>
<ul id="three" style="display: none; ">
<li class="sub"><a href="javascript:;" class="navw"> References</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Utilities</a></li>
</ul>
<ul>
<li><a href="javascript:;" class="navh" onclick="block('four');return false">→ Web Design</a></li>
</ul>
<ul id="four" style="display: block; ">
<li class="sub"><a href="javascript:;" class="navw"> Graphics</a></li>
<li class="sub"><a href="javascript:;" class="navw"> Colors</a></li>
</ul>
</div>
</body>
</html> |