프리카운터넷

프로그래밍&개발

기존 공부방

서브 메뉴가 가로로 나타나는 내비게이션 메뉴


	[소스] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Untitled Document</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr"> <STYLE type="text/css"> a { font-size:10pt; text-decoration: none } a:hover { text-decoration: underline } #box { position:absolute; visibility:hidden; layer-background-color:silver } #mnubar {font:10pt arial; font-weight:bold } </STYLE> <SCRIPT language="JavaScript"> ns=window.navigator.appName == "Netscape" ie=window.navigator.appName == "Microsoft Internet Explorer" function openIt(x) { // NS 의 경우 if(ns) { showbox= document.layers[x+1] showbox.visibility = "show"; showbox.top=44; var items = 5 ; // 메뉴의 갯수 for (i=1; i<=items; i++) { elopen=document.layers[i] if (i != (x + 1)) { elopen.visibility = "hide" } } } // IE 일 경우 if(ie) { curEl = event.toElement curEl.style.background = " " // 마우스 오버시 배경색 showBox = document.all.box[x]; showBox.style.visibility = "visible"; showBox.style.top = 46; // 서브메뉴의 위쪽여백 var items = 5 // 메뉴의 갯수 for (i=0; i<items; i++) { elOpen=document.all.box[i] barEl=document.all.mnubar[i] if (i != x){ elOpen.style.visibility = "hidden" barEl.style.background = " " // 비활성메뉴 배경색 } } } } function closeIt() { var items = 5 // 메뉴의 갯수 for (i=0; i<items; i++) { if(ie){ document.all.box[i].style.visibility = "hidden" barEl=document.all.mnubar[i] barEl.style.background = " " } if(ns){ document.layers[i+1].visibility = "hide"} } } </SCRIPT> </HEAD> <BODY> <TABLE width="800" height="18" border="0" cellpadding="0" bgcolor="#CCCCCC" > <TR> <TD align="center"><A href='#' onmouseover="closeIt()"n>Home</A></TD> <TD align="center"> <A href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</A><BR></TD> <TD align="center"> <A href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</A><BR></TD> <TD align="center"> <A href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</A><BR></TD> <TD align="center"> <A href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</A><BR></TD> <TD align="center"> <A href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</A><BR></TD> <TD align="center" width="30" valign="top"> </TD> </TR> </TABLE> <BR><BR> <!-- 서브메뉴 1 --> <DIV id=box style=left:120> <!--왼쪽에서 120픽셀--> <TABLE border="0" > <TR><TD><A href='#' >SUB-1-1</A></TD> <TD><A href='#'>SUB-1-2</A></TD></TR> </TABLE> </DIV> <!-- 서브메뉴 2 --> <DIV id=box style=left:200> <TABLE border="0" > <TR> <TD><A href='#'>SUB-2-1</A></TD> <TD><A href='#' >SUB-2-2</A></TD> <TD><A href='#' >SUB-2-3</A></TD></TR> </TABLE> </DIV> <!-- 서브메뉴 3 --> <DIV id=box style=left:240> <TABLE border="0" > <TR><TD><A href='#' >SUB-3-1</A></TD> <TD><A href='#' >SUB-3-2</A></TD> <TD><A href='#' >SUB-3-3</A></TD> <TD><A href='#' >SUB-3-4</A></TD> <TD><A href='#' >SUB-3-5</A></TD></TR> </TABLE> </DIV> <!-- 서브메뉴 4 --> <DIV id=box style=left:400> <TABLE border="0" > <TR><TD><A href='#' >SUB-4-1</A></TD> <TD><A href='#' >SUB-4-2</A></TD> <TD><A href='#' >SUB-4-3</A></TD> <TD><A href='#' >SUB-4-4</A></TD></TR> </TABLE> </DIV> <!-- 서브메뉴 5 --> <DIV id=box style=left:520> <TABLE border="0" > <TR><TD><A href='#' >SUB-5-1</A></TD> <TD><A href='#' >SUB-5-2</A></TD> <TD><A href='#' >SUB-5-3</A></TD></TR> </TABLE> </DIV> </BODY> </HTML>