만두야닷컴


자바 스크립트 메뉴 만들기
<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

'자바스크립트' 카테고리의 다른 글

자바스크립트로 각자리 숫자 합계 구하기  (0) 2014.01.24
글자수 체크 하기  (0) 2011.10.05
javascript 메뉴  (0) 2011.10.05
javascript 롤링  (0) 2011.07.27

Comment +0