본문 바로가기

IT/HTML

[HTML] 스크롤 따라 다니는 메뉴


<HTML>
<HEAD>
<script language="JavaScript1.2">

function move(x) {
if (document.all) {
object1.style.pixelLeft += x;
object1.style.visibility = "visible"}
else if (document.layers) {
document.object1.left += x;
document.object1.visibility = "show"}};

function makeStatic() {
if (document.all) {object1.style.pixelTop=document.body.scrollTop+20}
else {eval(document.object1.top=eval(window.pageYOffset+20));}
setTimeout("makeStatic()",0);}
</script>

<style>
<!--

.hl {
  Background-Color : yellow;  
 }
.n {
  Cursor:n-resize;
 }
-->
</style>
<body>
<LAYER visibility="hide" top="20" name="object1" bgcolor="black" left="0" onmouseover="move(132)" onmouseout="move(-132)">

<script language="JavaScript1.2">

function positionmenu(){
move(-132)
}

if (document.all) {document.write('<DIV ID="object1" style="visibility:hidden;cursor:hand; Position : Absolute ;Left : 0px ;Top : 20px ;Z-Index : 20" onmouseover="move(132)" onmouseout="move(-132)">')}
</script>

<table border="0" cellpadding="0" cellspacing="1" width="150" bgcolor="#000000">
<tr><td bgcolor="white"> <font size="4" face="Arial"><b>Menu</b></font></td>

<script language="JavaScript1.2">
document.write('<td align="center" rowspan="100" width="16" bgcolor=white><span style="font-size:13px"><p align="center"><font face="Papyrus">S<br><br>I<br><br>D<br><br>E<br><br><br><br>M<br><br>E<br><br>N<br><br>U</font></p></span></TD>')
</script>

</tr>

<script language="JavaScript1.2"><!--
if (document.all||document.layers) {
makeStatic();}

var text=new Array();
var thelink=new Array();

//원하는 링크로 수정!

text[0]="Latest";
text[1]="ASP";
text[2]="JSP";
text[3]="PHP";
text[4]="Ubuntu";
text[5]="JavaScript";
text[6]="HTML";
text[7]="CSS";
text[8]="MS-SQL";
text[9]="MY-SQL";
text[10]="Oracle";
text[11]="Theory";
text[12]="Job";
text[13]="Photo";
text[14]="Gitar & Magic";
text[15]="Travel";
text[16]="Fashion";
text[17]="C.F";
text[18]="Guest Book";

thelink[0]="/";
thelink[1]="/category/IT/ASP";
thelink[2]="/category/IT/JSP";
thelink[3]="/category/IT/PHP";
thelink[4]="/category/IT/Ubuntu";
thelink[5]="/category/IT/JavaScript";
thelink[6]="/category/IT/HTML";
thelink[7]="/category/IT/CSS";
thelink[8]="/category/IT/MS-SQL";
thelink[9]="/category/IT/My-SQL";
thelink[10]="/category/IT/Oracle";
thelink[11]="/category/IT/Theory";
thelink[12]="/category/IT/BARTER";
thelink[13]="/category/Photo";
thelink[14]="/category/Gitar%20%26%20Magic";
thelink[15]="/category/Travel";
thelink[16]="/category/Fashion";
thelink[17]="/category/C.F";
thelink[18]="https://delirussum.tistory.com/guestbook";

//위 링크에 대한 타겟 설정
//유효한 값: '', 'new', 또는 'framename' (여기서 'framename'은 타겟으로 지정할 프레임의 이름이다)
var linktarget=''

///아래 내용은 수정하지 말 것////////////////

function navigateie(which){
if (linktarget=='')
window.location=thelink[which]
else if (linktarget=='new')
window.open(thelink[which])
else{
temp_var=eval("window.parent."+linktarget)
temp_var.location=thelink[which]
}
}

for (i=0;i<=text.length-1;i++)
if (document.all) {document.write('<TR><TD height=20 bgcolor=white onclick="navigateie('+i+')" onmouseover="className=\'hl\'" onmouseout="className=\'n\'"><FONT SIZE=2 FACE=ARIAL>&nbsp;'+text[i]+'</FONT></TD></TR>')}
else {document.write('<TR><TD bgcolor="white"><ILAYER><LAYER HEIGHT="18" onmouseover="this.bgColor=\'yellow\'" onmouseout="this.bgColor=\'white\'" width=131><FONT SIZE=2 FACE=ARIAL>&nbsp;<A HREF="'+thelink[i]+'" target="'+linktarget+'" id="nounderline">'+text[i]+'</A></FONT></LAYER></ILAYER></TD></TR>')}

//-->
</script>
<tr>
<td bgcolor="#0099FF"><font size="1" face="Arial"> </font></td>
</TR>
</table>
<script language="JavaScript1.2">
if (document.all) {document.write('</DIV>')}
window.onload=positionmenu
</script>
</LAYER>
<center>
<pre>스크롤 다운 시켜보세요!!
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-


놀랍지 않나요?</pre>

</BODY>
</HTML>

출처 : http://blog.paran.com/webdress