|
home > real world > web resource > web source codes >
Try the menu out for yourself! Move your mouse over the yellow border to the left.
STEP 1/2: Put this code into the <HEAD> of your document:
<HEAD>
<STYLE>
#menuOut, #menuIn
{
position:absolute;
left:-155px;
width:160px;
top:100px;
border:2px solid yellow;
background-color:#446655;
layer-background-color:#446655;
font:bold 12px Verdana;
line-height:20px;
}
</STYLE>
</HEAD>
STEP 2/2:Copy this code into the <BODY> of your HTML document:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (document.all)
document.write('<div id="menuIn" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
// End -->
</script>
<layer id="menuOut" onMouseover="pull()" onMouseout="draw()">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write('<p align=right>');
var siteName = new Array();
var siteLink = new Array();
siteName[0] = "Source Codes";
siteName[1] = "Item 2";
siteName[2] = "Item 3";
siteName[3] = "Item 4";
siteName[4] = "Item 5";
siteName[5] = "Item 6";
siteLink[0] = "source.html";
siteLink[1] = "link2";
siteLink[2] = "link3";
siteLink[3] = "link4";
siteLink[4] = "link5";
siteLink[5] = "link6";
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 = -150;
}
else {
slideMenu = document.layers.menuOut;
boundryR = 150;
boundryL = 10;
}
function pull() {
if (window.drawMenu)
clearInterval(drawMenu);
pullMenu = setInterval("pullEngine()", 20);
}
function draw() {
clearInterval(pullMenu);
drawMenu = setInterval("drawEngine()", 20);
}
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>
|
