웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
js 펼침 메뉴 만들기 본문
javascript
js 펼침 메뉴 만들기
jokack01
2011. 11. 9. 16:21
<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>
http://azit4u.phps.kr/menu/menu.html
