innerHTML을 이용한 sub-menu 나타내기


Home > Document > Web design > Menu > DHTML > innerHTML menu

innerHTML 을 이용한 Menu

이 페이지에서 다룰 menu는 요즘 많이 볼 수 있는 형태의 menu로서, 상단의 main menu 항목에 mouse를 올리면 아래에 sub-menu 들이 수평으로 펼쳐지는 menu가 되겠습니다. 그런 메뉴들은 대 부분 flash를 이용하여 만드는 추세지만, 역시 수정 및 관리에 편하도록 JavaScript 로 scripting 하도록 하겠습니다. 전체적인 plot은 아래의 table과 같이 3개의 영역으로 구분하여

Sub-menu가 없어지는 영역
Main menu 항목들이 있는 영역
Sub-menu가 나타나는 영역
  1. onMouseOver 시에 가운데 main menu 항목 중 하나에 onMouseOver가 되면 하단에 sub-menu가 나타나고
  2. mouse가 sub-menu가 있는 하단으로 가면 sub-menu가 그대로 있고
  3. mouse가 상단으로 가면 하단의 sub-menu가 사라지는

모양의 menu를 만들어 보겠습니다. 우선 결과물을 보면 아래와 같이 되겠군요.






입력
<html>
<head>
<title>MouseOver 시 나타나는 sub-menu</title>
<script type="text/javascript">
<!--

// ***변수에 들어가는 문자열은 Enter로 줄을 바꾸지 않고 입력합니다.
var item01 = '<a href="#">Sub-item 1-1</a> | <a href="#">Sub-item 1-2</a> | <a href="#">Sub-item 1-3</a> | <a href="#">Sub-item 1-4</a> | <a href="#">Sub-item 1-5</a>'

var item02 = '<a href="#">Sub-item 2-1</a> | <a href="#">Sub-item 2-2</a> | <a href="#">Sub-item 2-3</a> | <a href="#">Sub-item 2-4</a> | <a href="#">Sub-item 2-5</a>'

var item03 = '<a href="#">Sub-item 3-1</a> | <a href="#">Sub-item 3-2</a> | <a href="#">Sub-item 3-3</a> | <a href="#">Sub-item 3-4</a> | <a href="#">Sub-item 3-5</a>'

var item04 = '<a href="#">Sub-item 4-1</a> | <a href="#">Sub-item 4-2</a> | <a href="#">Sub-item 4-3</a> | <a href="#">Sub-item 4-4</a> | <a href="#">Sub-item 4-5</a>'

var item05 = '<a href="#">Sub-item 5-1</a> | <a href="#">Sub-item 5-2</a> | <a href="#">Sub-item 5-3</a> | <a href="#">Sub-item 5-4</a> | <a href="#">Sub-item 5-5</a>'

function button_over(obj, subMenu){
obj.innerHTML = subMenu
}

function button_out(obj){
obj.innerHTML = "&nbsp;"
}

// -->
</script>
<style type="text/css">
<!--
.menu_item{text-align:center;cursor:pointer;}
.spacer{width:12px;}
tr.bgr{height:25px;text-align:center;}
-->
</style>
</head>
<body>
<table border="0" width="100%" bgcolor="#eeeecc">
<tr class="bgr" style="background-color:#eeeecc;">
<td style="border-bottom:1px solid royalblue;" colspan="9" onmouseover="button_out(sub_menu);">&nbsp;</td>
</tr>
<tr class="bgr" style="background-color:#eeeecc;border-bottom:1px solid royalblue">
<td class="menu_item" onmouseover="button_over(sub_menu, item01);">Menu item 1</td>
<td class="spacer"> | </td>
<td class="menu_item" onmouseover="button_over(sub_menu, item02);">Menu item 2</td>
<td class="spacer">|</td>
<td class="menu_item" onmouseover="button_over(sub_menu, item03);">Menu item 3</td>
<td class="spacer">|</td>
<td class="menu_item" onmouseover="button_over(sub_menu, item04);">Menu item 4</td>
<td class="spacer">|</td>
<td class="menu_item" onmouseover="button_over(sub_menu, item05);">Menu item 5</td>
</tr>
<tr class="bgr" style="background-color:#eeeecc;">
<td id="sub_menu" colspan="9" style="background-color:gold;border:1px solid royalblue;">&nbsp;</td>
</tr>
</table>
</body>
</html>


코드 실행 하기





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색