반응형
자바 스크립트 메뉴 만들기
<html>
<head>
<title>menu1</title>
<meta charset="utf-8">
<style type="text/css">
ul {list-style:none;}
#menus a {
text-decoration:none;
color:#444;
font-size:14pt;
}
.submenu {font-size:12pt}
#menus a:hover {color:red;}
</style>
<script type="text/javascript">
function showMenu(idx){
//submenu1~submenu3까지 display=none 으로 변경
for(i=1;i<4;i++){
document.getElementById("submenu"+i).style.display="none";
}
//선택한 idx의 submenu 만 화면출력
document.getElementById("submenu"+idx).style.display="block";
}
</script>
</head>
<body>
<div id="wrap">
<ul id="menus">
<li><a href="#" onclick="showMenu(1); return false;">메뉴1</a></li>
<ul id="submenu1" class="submenu" style="display:none">
<li>메뉴1-1</li>
</ul>
<li><a href="#" onclick="showMenu(2); return false;">메뉴2</a></li>
<ul id="submenu2" class="submenu" style="display:none">
<li>메뉴2-1</li>
<li>메뉴2-2</li>
</ul>
<li><a href="#" onclick="showMenu(3); return false;">메뉴3</a></li>
<ul id="submenu3" class="submenu" style="display:none">
<li>메뉴3-1</li>
<li>메뉴3-2</li>
<li>메뉴3-3</li>
</ul>
</ul>
</div>
</body>
</html>
반응형
'자바스크립트' 카테고리의 다른 글
| 자바스크립트로 각자리 숫자 합계 구하기 (0) | 2014.01.24 |
|---|---|
| 글자수 체크 하기 (0) | 2011.10.05 |
| javascript 롤링 (0) | 2011.07.27 |