가로형 네비게이션 메뉴바
본문
<HTML>
<HEAD>
<TITLE> 가로형 네비게이션 메뉴바 </TITLE>
<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->
<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color: red; text-decoration: underline }
a.plain:hover { font-size:10pt; color: yellow; text-decoration: underline }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
#mnubar {font:10pt arial; font-weight:bold }
</style>
<script language="JavaScript">
<!---Edited by JASKO-->
<!---Web Site : http://www.javascript.co.kr-->
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 = "yellow" // 마우스 오버시 배경색
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 = "red" // 비활성메뉴 배경색
}
}
}
}
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 = "red"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
</script>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<table border="0" cellpadding="0" width="800" bgcolor="red" height="18" id=mainmenu>
<tr>
<td align="center" nowrap valign="middle" colspan="7" bgcolor="#000000" >
<p align="left"><b><font size="3" face="굴림" color="white">아래 메뉴 네비게이션바에 마우스를 대어 보세요</font></b></td>
</tr>
<tr>
<td align="center" ><a href='http://www.jasko.co.kr' onmouseover="closeIt()" class=plain>Home</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>
<!-- 서브메뉴 1 -->
<div id=box style=left:120> <!--왼쪽에서 120픽셀-->
<table border="0" id=bluebox >
<tr><td><a href='#' >SUB-1-1</a></td>
<td><a href='http://www.jasko.co.kr'>SUB-1-2</a></td></tr>
</table>
</div>
<!-- 서브메뉴 2 -->
<div id=box style=left:200>
<table border="0" id=limebox> <tr>
<td><a href='http://www.jasko.co.kr'>SUB-2-1</a></td>
<td><a href='somepage.htm' >SUB-2-2</a></td>
<td><a href='somepage.htm' >SUB-2-3</a></td></tr>
</table>
</div>
<!-- 서브메뉴 3 -->
<div id=box style=left:240>
<table border="0" id=bluebox>
<tr><td><a href='somepage.htm' >SUB-3-1</a></td>
<td><a href='somepage.htm' >SUB-3-2</a></td>
<td><a href='somepage.htm' >SUB-3-3</a></td>
<td><a href='somepage.htm' >SUB-3-4</a></td>
<td><a href='somepage.htm' >SUB-3-5</a></td></tr>
</table>
</div>
<!-- 서브메뉴 4 -->
<div id=box style=left:400>
<table border="0" id=limebox>
<tr><td><a href='somepage.htm' >SUB-4-1</a></td>
<td><a href='somepage.htm' >SUB-4-2</a></td>
<td><a href='somepage.htm' >SUB-4-3</a></td>
<td><a href='somepage.htm' >SUB-4-4</a></td></tr>
</table>
</div>
<!-- 서브메뉴 5 -->
<div id=box style=left:520>
<table border="0" id=bluebox>
<tr><td><a href='somepage.htm' >SUB-5-1</a></td>
<td><a href='somepage.htm' >SUB-5-2</a></td>
<td><a href='somepage.htm' >SUB-5-3</a></td></tr>
</table>
</div>
</BODY>
</HTML>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=113
<HEAD>
<TITLE> 가로형 네비게이션 메뉴바 </TITLE>
<!--1. 아래의 스크립트를 <HEAD></HEAD>사이에 복사해 넣으세요-->
<style type="text/css">
a { font-size:10pt; color: navy; text-decoration: none }
a:hover { color: red; text-decoration: underline }
a.plain:hover { font-size:10pt; color: yellow; text-decoration: underline }
#box {
position:absolute;
visibility:hidden;
layer-background-color:silver }
#limebox {background-color:lime }
#bluebox {background-color:lightsteelblue }
#mnubar {font:10pt arial; font-weight:bold }
</style>
<script language="JavaScript">
<!---Edited by JASKO-->
<!---Web Site : http://www.javascript.co.kr-->
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 = "yellow" // 마우스 오버시 배경색
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 = "red" // 비활성메뉴 배경색
}
}
}
}
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 = "red"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}
</script>
</HEAD>
<!--2. <BODY> 태그내에 onload="" 혹은 onunload 부분이 있으면 복사해 넣으세요-->
<BODY BGCOLOR="#FFFFFF" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<!--3. <BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<table border="0" cellpadding="0" width="800" bgcolor="red" height="18" id=mainmenu>
<tr>
<td align="center" nowrap valign="middle" colspan="7" bgcolor="#000000" >
<p align="left"><b><font size="3" face="굴림" color="white">아래 메뉴 네비게이션바에 마우스를 대어 보세요</font></b></td>
</tr>
<tr>
<td align="center" ><a href='http://www.jasko.co.kr' onmouseover="closeIt()" class=plain>Home</a></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(0)" id=mnubar>Menu 1</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(1)" id=mnubar>Menu 2</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(2)" id=mnubar>Menu 3</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(3)" id=mnubar>Menu 4</a><br></td>
<td align="center" nowrap >
<a href="#" onmouseover="openIt(4)" id=mnubar>Menu 5</a><br></td>
<td align="center" width="30" nowrap valign="top"> </td>
</tr>
</table>
<br><br>
<!-- 서브메뉴 1 -->
<div id=box style=left:120> <!--왼쪽에서 120픽셀-->
<table border="0" id=bluebox >
<tr><td><a href='#' >SUB-1-1</a></td>
<td><a href='http://www.jasko.co.kr'>SUB-1-2</a></td></tr>
</table>
</div>
<!-- 서브메뉴 2 -->
<div id=box style=left:200>
<table border="0" id=limebox> <tr>
<td><a href='http://www.jasko.co.kr'>SUB-2-1</a></td>
<td><a href='somepage.htm' >SUB-2-2</a></td>
<td><a href='somepage.htm' >SUB-2-3</a></td></tr>
</table>
</div>
<!-- 서브메뉴 3 -->
<div id=box style=left:240>
<table border="0" id=bluebox>
<tr><td><a href='somepage.htm' >SUB-3-1</a></td>
<td><a href='somepage.htm' >SUB-3-2</a></td>
<td><a href='somepage.htm' >SUB-3-3</a></td>
<td><a href='somepage.htm' >SUB-3-4</a></td>
<td><a href='somepage.htm' >SUB-3-5</a></td></tr>
</table>
</div>
<!-- 서브메뉴 4 -->
<div id=box style=left:400>
<table border="0" id=limebox>
<tr><td><a href='somepage.htm' >SUB-4-1</a></td>
<td><a href='somepage.htm' >SUB-4-2</a></td>
<td><a href='somepage.htm' >SUB-4-3</a></td>
<td><a href='somepage.htm' >SUB-4-4</a></td></tr>
</table>
</div>
<!-- 서브메뉴 5 -->
<div id=box style=left:520>
<table border="0" id=bluebox>
<tr><td><a href='somepage.htm' >SUB-5-1</a></td>
<td><a href='somepage.htm' >SUB-5-2</a></td>
<td><a href='somepage.htm' >SUB-5-3</a></td></tr>
</table>
</div>
</BODY>
</HTML>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=113
관련링크
댓글목록
등록된 댓글이 없습니다.