TOP





   홈페이지 제작에 도움이 될만한 각종 테그 정보 입니다.

[자바스크립트] 가로형 메뉴 만들기 소스

세상이야기.      조회 수 1896 추천 수 0 2011.05.10 10:09:21


출처: www.webmadang.net

<HTML>
<HEAD>
    <TITLE>자바스크립트</TITLE>
<style type="text/css">
/* 대메뉴 */
.diz_menu { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; cursor:hand; font-weight:normal;}
a.diz_menu:link { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
a.diz_menu:visited { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
a.diz_menu:hover { font-size:7pt; color:#1375CA; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:bold; }
a.diz_menu:active { font-size:7pt; color:#555555; font-family:Tahoma; line-height:110%; padding-top:6px; text-decoration:none; font-weight:normal; }
.diz_menu_over { font-size:7pt; color:#1375CA; font-family:Tahoma; line-height:110%; padding-top:6px; cursor:hand; font-weight:bold}

/* 부메뉴 */
.diz_popmenu { font-family:돋움; font-size:9pt; color:#333333; background-color:FFFFFF; cursor:hand; padding-left:5px;}
.diz_popmenu_over { font-family:돋움; font-size:9pt; color:#FFFFFF; background-color:08246B; cursor:hand; padding-left:5px;}
</style>

<script LANGUAGE="JavaScript">
<!--
function set_submenu(obj) {
    var nLeft,nTop
    ph = 30 // 서브메뉴 상단위치 조절
    nLeft = event.x - event.offsetX + document.body.scrollLeft;
    nTop = event.y - event.offsetY + document.body.scrollTop;

    eval(obj+".style").posLeft = nLeft
    eval(obj+".style").posTop = nTop + ph;
    eval(obj+".style").display='block';
}

function show_submenu(obj) {
    eval(obj+".style").display='block';
}

function hide_submenu(obj) {
    eval(obj+".style").display='none';
}
//-->
</script>
</HEAD>
<body>

<!-- 대메뉴 -->
<table border="0" cellpadding="0" cellspacing="0" height="35">
<tr align="center">
<td width="100" id="menu1" onClick="location.href='링크주소" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu1');" onMouseOut="this.className='diz_menu';hide_submenu('submenu1')">HOME</td>
<td width="5">|</td>
<td width="100" id="menu2" onClick="location.href='링크주소" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu2');" onMouseOut="this.className='diz_menu';hide_submenu('submenu2')">BOARD</td>
<td width="5">|</td>
<td width="100" id="menu3" onClick="location.href='링크주소" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu3');" onMouseOut="this.className='diz_menu';hide_submenu('submenu3')">VIEW</td>
<td width="5">|</td>
<td width="100" id="menu4" onClick="location.href='링크주소" class="diz_menu" onMouseOver="this.className='diz_menu_over';set_submenu('submenu4');" onMouseOut="this.className='diz_menu';hide_submenu('submenu4')">STUDY</td>
<td width="5">|</td>
</tr>
</table>

 

<!-- 부메뉴 1번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu1" style="position:absolute; background:#00AEEF; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu1');" onMouseOut="hide_submenu('submenu1');">
<tr><td bgcolor="#FFFFFF">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">홈으로</td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">공지사항</td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">운영자 즐겨찾기</a></td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">게시판 전체보기</a></td>
</tr>
</table>
</td></tr></table>

<!-- 부메뉴 2번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu2" style="position:absolute; background:#39B54A; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu2');" onMouseOut="hide_submenu('submenu2');">
<tr><td bgcolor="#FFFFFF">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">회원공간</td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">메모장</td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">끝말잇기</a></td>
</tr>
</table>
</td></tr></table>

<!-- 부메뉴 3번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu3" style="position:absolute; background:#DDC100; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu3');" onMouseOut="hide_submenu('submenu3');">
<tr><td bgcolor="#FFFFFF">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">디카 갤러리</a></td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">스틱파스 갤러리</a></td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">카드/축전</a></td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">배너 자랑하기</a></td>
</tr>
</table>
</td></tr></table>

<!-- 부메뉴 4번 -->
<table width="140" cellpadding="5" cellspacing="1" border="0" id="submenu4" style="position:absolute; background:#F889BA; z-index:1; display:none; left:100px; top:50px" onMouseOver="show_submenu('submenu4');" onMouseOut="hide_submenu('submenu4');">
<tr><td bgcolor="#FFFFFF">
<table border="0" cellpadding="1" cellspacing="0" bgcolor="white" width="100%">
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">HTML / CSS</a></td>
</tr>
<tr>
<td height='20' onClick="self.location='링크주소'" class="diz_popmenu" onMouseOver="this.className='diz_popmenu_over'" onMouseOut="this.className='diz_popmenu'">JavaScript</a></td>
</tr>
</table>
</td></tr></table>


List of Articles
번호 제목 글쓴이 날짜 조회 수
32 페이지 상단 이동 버턴 만들기 세상이야기 2018-12-23 12
31 CSS 배경 이미지 속성 세상이야기 2017-12-24 66
30 HTML5 비디오 / 오디오 삽입 테그 세상이야기 2017-12-19 88
29 [자바스크립트] 클릭시 숨은 부분이 표시되는 메뉴 file 세상이야기. 2011-05-10 1612
28 [자바스크립트] 세로형 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 3280
27 [자바스크립트] 세로 슬라이딩 메뉴 소스 file 세상이야기. 2011-05-10 2958
» [자바스크립트] 가로형 메뉴 만들기 소스 세상이야기. 2011-05-10 1896
25 [자바스크립트] 움직이는 팝업 레이어 세상이야기. 2011-05-10 1773
24 [자바스크립트] 화면 우측하단에 고정버턴 만들기 세상이야기. 2011-05-10 1671
23 제로보드 게시글 열람글 아래 목록 안나오게 하는 방법 세상이야기 2011-01-20 2446
XE Login