Sliding Menu
Make a simple slide out
menu, hover over the blue bar to the left for an example.
Paste The
Following Code into the Head Section of Your Web Page 
<style
type="text/css">
#menuOut, #menuIn
{
position:absolute;
left: -161px;
width:180px;
top:60px;
border:1.5px solid silver;
background-color: #E9F0F8;
layer-background-color: gray;
font: bold 12px Verdana;
color: #ffffff;
line-height: 20px;
padding: 10px;
padding-left: 15px;
line-height: 110%;
}
A:link {font: bold 12px arial; color: #004891; text-decoration: none;}
A:visited {font: bold 12px arial; color: #004891; text-decoration: none;}
A:hover {font: bold 12px arial; color: #004891; text-decoration: underline;}
</style>
Paste The
Following Code into the Body Section of Your Web Page
<div
style="width: 500px;">
<script language="JavaScript">
<!-- hiding
if (document.all)
document.write('<div id="menuIn" style="left:-161"
onMouseover="pull()" onMouseout="draw()">')
// End hiding-->
</script>
<layer id="menuOut" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript">
<!-- Begin
var siteName = new Array();
var siteLink = new Array();
siteName[0] = "· Home";
siteName[1] = "· Hosting and Domains";
siteName[2] = "· Web Tools and Services";
siteName[3] = "· Developer Resources";
siteName[4] = "· Help";
siteName[5] = "· Site Map";
siteLink[0] = "http://www.bravenet.com";
siteLink[1] = "http://www.bravenet.com/webhosting/index.php";
siteLink[2] = "http://www.bravenet.com/webtools/index.php";
siteLink[3] = "http://www.bravenet.com/resources/index.php";
siteLink[4] = "http://www.bravenet.com/help/index.php";
siteLink[5] = "http://www.bravenet.com/global/sitemap.php";
for (i = 0; i <= siteName.length - 1; i++)
document.write('<a href=' + siteLink[i] + '>' + siteName[i] +
'</a><br>');
// End -->
</script>
</layer>
<script language="JavaScript">
<!-- Begin
function regenerate() {
window.location.reload();
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400);
}
window.onload = regenerate2;
if (document.all) {
document.write('</div>');
slideMenu = document.all.menuIn.style;
boundryR = 0;
boundryL = -161;
}
else {
slideMenu = document.layers.menuOut;
boundryR = 161;
boundryL = 10;
}
function pull() {
if (window.drawMenu)
clearInterval(drawMenu);
pullMenu = setInterval("pullEngine()", 50);
}
function draw() {
clearInterval(pullMenu);
drawMenu = setInterval("drawEngine()", 50);
}
function pullEngine() {
if (document.all && slideMenu.pixelLeft < boundryR)
slideMenu.pixelLeft += 5;
else if(document.layers && slideMenu.left < boundryR)
slideMenu.left += 5;
else if (window.pullMenu)
clearInterval(pullMenu);
}
function drawEngine() {
if (document.all && slideMenu.pixelLeft > boundryL)
slideMenu.pixelLeft -= 5;
else if(document.layers && slideMenu.left > boundryL)
slideMenu.left -= 5;
else if (window.drawMenu)
clearInterval(drawMenu);
}
// End -->
</script>