<html>
<head>
<title>클릭형 디스플레이 메뉴</title>
<script language="JavaScript">
<!--예제
function SubDispaly(sno) {
sm = eval("document.all.s" + sno);
if (sm.style.display == 'none')
sm.style.display = ''; //해당 서브 메뉴 id의 서브 메뉴 디스플레이
else
sm.style.display = 'none'; //해당 서브 메뉴 id의 서브 메뉴 디스플레이 하지 않음
}
//스크립트 끝-->
</script>
<!--스타일은 앞에 예제와 같고 클래스mm에서 cursor: hand 만 추가-->
<style type="text/css">
<!--
A, DIV.mm {
text-decoration: none; font-family: verdana, helvetica, sans-serif; font-size: 12px
}
A {
width: 100%; color: maroon
}
A:hover {
background-color: white; color: red
}
.mm {
width: 200px; height: 20px; border: 1px solid black; background-color: #039;
font-weight: bold; color: #FC0; text-align: center; cursor: hand
}
.submenu {
width: 200px; padding: 5px; border: 1px solid black; background-color: #EEE
}
-->
</style>
</head>
<body>
<!--메인 메뉴 부분에 이벤트 헨들러 추가 서브 메뉴에 id와 display: none 추가-->
<div class="mm" onClick="SubDispaly(1)">MENU 1</div>
<div class="submenu" id="s1" style="display: none">
<a href="#">submenu 1-1</a><br>
<a href="#">submenu 1-2</a>
</div>
<div class="mm" onClick="SubDispaly(2)">MENU 2</div>
<div class="submenu" id="s2" style="display: none">
<a href="#">submenu 2-1</a><br>
<a href="#">submenu 2-2</a><br>
<a href="#">submenu 2-3</a>
</div>
<div class="mm" onClick="SubDispaly(3)">MENU 3</div>
<div class="submenu" id="s3" style="display: none">
<a href="#">submenu 3-1</a><br>
<a href="#">submenu 3-2</a><br>
<a href="#">submenu 3-3</a><br>
<a href="#">submenu 3-4</a>
</div>
<div class="mm" onClick="SubDispaly(4)">MENU 4</div>
<div class="submenu" id="s4" style="display: none">
<a href="#">submenu 4-1</a><br>
<a href="#">submenu 4-2</a><br>
<a href="#">submenu 4-3</a><br>
<a href="#">submenu 4-4</a><br>
<a href="#">submenu 4-5</a>
</div>
</body>
</html>
'Web Tech' 카테고리의 다른 글
| 무료 게시판 정리 (0) | 2007.03.21 |
|---|---|
| 플래시 자동 활성화 시키기 (1) | 2006.11.30 |
| 클릭하면 나타나는 하위메뉴 만들기 (0) | 2006.11.27 |