클릭시 서브메뉴

클릭시 서브메뉴
<html>
<head>
<title>Study</title>
<style type="text/css">
A:link {color:black;text-decoration:none}
A:active {color:999999;text-decoration:none}
A:visited {color:black;text-decoration:none}
A:hover {color:999999;text-decoration:underline}

body,td {font-size:9pt;color:black;font-family:굴림}
.tah8 {font-size:8pt;font-family:tahoma,굴림;line-height:150%}
</style>
<script language="JavaScript">
<!--

ns = (document.layers)? true:false
ie = (document.all)? true:false

function show(id) {
        if (ns) document.layers[id].visibility = "visible"
        else if (ie) document.all[id].style.visibility = "visible"
}

function hide(id) {
        if (ns) document.layers[id].visibility = "hidden"
        else if (ie) document.all[id].style.visibility = "hidden"
}

//-->
</script>

<style type="text/css">
#sub1, #sub2, #sub3, #sub4
{visibility:hidden; background-color:#e1e1e1; width:120; border:1px solid #cccccc; padding:7; font-family:tahoma; font-size:7pt; font-weight:bold; line-height:150%; filter: Alpha(Opacity=70)}
</style>

</head>

<body onclick="hide('sub1');hide('sub2');hide('sub3');hide('sub4')">
<br>

<!--메인 메뉴 출력부분-->
<table border=0 cellspacing=0 cellpadding=2 background="images/java_9_ex.gif" align="center">
<tr height=35>
<td width=24></td>
<td width=74>
<a href="javascript:show('sub1');hide('sub2');hide('sub3');hide('sub4')"><b><font class="tah8">Menu 1</font></a>   <font color="#999999">|</font></b>
</td>

<td width=74>
<a href="javascript:show('sub2');hide('sub1');hide('sub3');hide('sub4')"><b><font class="tah8">Menu 2</font></a>   <font color="#999999">|</font></b>
</td>

<td width=74>
<a href="javascript:show('sub3');hide('sub2');hide('sub1');hide('sub4')"><b><font class="tah8">Menu 3</font></a>   <font color="#999999">|</font></b>
</td>

<td width=68>
<a href="javascript:show('sub4');hide('sub2');hide('sub3');hide('sub1')"><b><font class="tah8">Menu 4</font></a></b>
</td>

</tr></table>
<!--메인 메뉴 출력부분 끝-->

<!--서브 메뉴 출력부분-->
<table cellspacing="0" cellpadding="0" border="0" width="330" align="center">
<tr>
    <td>
    
<div style="position:relative;top:0;left:0">

<div id="sub1" style="position:absolute;top:-12;left:20">
<a href="#">sub menu 1</a><br>
<a href="#">sub menu 2</a><br>
<a href="#">sub menu 3</a><br>
<a href="#">sub menu 4</a><br>
<a href="#">sub menu 5</a><br>
<a href="#">sub menu 6</a><br>
</div>

<div id="sub2" style="position:absolute;top:-12;left:97">
<a href="#">sub menu 1</a><br>
<a href="#">sub menu 2</a><br>
<a href="#">sub menu 3</a><br>
</div>

<div id="sub3" style="position:absolute;top:-12;left:176">
<a href="#">sub menu 1</a><br>
<a href="#">sub menu 2</a><br>
<a href="#">sub menu 3</a><br>
<a href="#">sub menu 4</a><br>
<a href="#">sub menu 5</a><br>
<a href="#">sub menu 6</a><br>
</div>

<div id="sub4" style="position:absolute;top:-12;left:254">
<a href="#">sub menu 1</a><br>
<a href="#">sub menu 2</a><br>
<a href="#">sub menu 3</a><br>
<a href="#">sub menu 4</a><br>
</div>

</div>

    </td>
</tr>
</table>
<!--서브 메뉴 출력부분 끝-->

<br><br><br><br><br><br>
<div align="center">메뉴를 클릭해보세요</div>
</body>
</html>

클릭시 서브메뉴 ②
<html>

<head>
<title> 홈페이지에 사용될 고급소스가 있는곳www.sourcenara.com</title>
<META NAME="Generator" CONTENT="Microsoft FrontPage 4.0">

<style type='text/css'>
<!--
p,br,body,td,select,input,form,textarea,option {font-size:9pt;font-family:돋움;}
.cont{line-height:140%}
-->
</style>
</head>

<body bgcolor="#555555">

<applet code=popMenu.class width=100 height=25>
<param name="Copyright"
value="Just Java Design (JJD) jjd@technologist.com">
<param name="numItems" value="4">//메뉴 갯수
<!--메뉴 타이틀 설정-->
<param name="label0" value="java applet">
<param name="label1" value="java script">
<param name="label2" value="dhtml & css">
<param name="label3" value="sourcenara.com">
<!--위의 메뉴와 대응한 링크 설정-->
<param name="link0" value="http://www.sourcenara.com">
<param name="link1" value="http://www.sourcenara.com">
<param name="link2" value="http://www.sourcenara.com">
<param name="link3" value="http://www.sourcenara.com">
<param name="baseURL" value="">
<param name="text" value="sourcenara">//버튼 타이틀
<param name=target value=newWin>//링크 프레임 타겟
<param name="textSize" value="11">//글자 크기
<param name="textBold" value="yes">
<param name="bgColor" value="85,85,85">//배경색
<param name="textColor" value="0,200,255">//글자색
<param name="textHiColor" value="118,236,0">//마우스 오버시 글자색
<param name="shapeColor" value="255,20,0">//세모 색깔
</applet>


</body>
</html>