자바스크립트 펼침메뉴 소스봐주세요.

soul. · Post by **soul.** » 2006 12 13 16:20 29

질문 1.
상위메뉴끼리(m01, m02)로 마우스 옮겨갈때 이미 펼쳐진 서브메뉴가 없어지지 않습니다. 상위메뉴에 onmouseout을 추가를 한다고 하면 마우스 커서 위치를 어디에 위치시켜야 될까요????
질문 2.
서브메뉴가 늘어난 만큼 상위메뉴도 같이 늘어납니다.
각기 따로 제어되려면...
어떻게 코딩해야할까요...

* 테스트하느라 소스가 깨끗하지 못합니다^^;

Code: Select all

<DOCTYPE>
<html>
<head>
<title> 메뉴 마우스 오버시 서브메뉴 나타나고 사라지는 메뉴</title>
<style> 
* { margin: 0;padding; 0;color: #fff; }
ul, li { list-style: none; }
#nav { width: 600px;float: left;background-color: #000;height: 15px; }
#nav li.globalNav { float: left;padding: 0 10px;}
#menu01, #menu02, #menu03 {
	border: 2px solid brown; 
	background-color: orange; 
	position: relative;
	top: 0;
	z-index: 1;
} 
#menubg { clear:both;background-color: #595959;width: 600px;position: absolute;top: 15px;}
.localNav li { display:inline;}
.localNav { }
</style> 

<script>

function show_menu(id) { 
	var obj = document.getElementById(id);  
	obj.style.display = ""; 
} 

function hide_menu(id) { 
	var obj = document.getElementById(id); 
	obj.style.display = "none"; 
} 

</script> 
</head>

<body>
<div> 
	<ul id="nav">
		<li class="globalNav"><span>m01</span>
			<ul id="menu01" class="localNav"> 
				<li><a href="#">1. 메뉴1</a></li>
				<li><a href="#">2. 메뉴2</a></li>
				<li><a href="#">3. 메뉴3</a></li>
			</ul>
		</li>
		<li class="globalNav"><span>m02</span>
			<ul id="menu02" class="localNav"> 
				<li><a href="#">1. 메뉴1</a></li>
				<li><a href="#">2. 메뉴2</a></li>
				<li><a href="#">3. 메뉴3</a></li>
			</ul>
		</li>
		<li class="globalNav"><span>m03</span>
			<ul id="menu03" class="localNav"> 
				<li><a href="#">1. 메뉴1</a></li>
				<li><a href="#">2. 메뉴2</a></li>
				<li><a href="#">3. 메뉴3</a></li>
			</ul>
		</li>
	</ul>
	<div>&nbsp;</div>
</div> 


</body>
</html>

kl · Post by kl » 2006 12 14 02:13 16

원하시는게 이게 맞는지 모르겠네요..

아마도 더 좋은 방법이 있지 싶지만.. 올려봅니다. ^^;;

Code: Select all

<DOCTYPE>
<html> 
<head> 
<title> 메뉴 마우스 오버시 서브메뉴 나타나고 사라지는 메뉴</title> 
<style>
* {
	margin: 0;
	padding: 0;
	color: #fff;
}
ul, li {
	list-style: none;
}
#nav {
	margin: 0;
	padding: 0;
	width: 600px;
	height: 20px;
	background-color: #000;
}
#nav li.globalNav {
	margin: 0;
	padding: 0 10px;
	float: left;
	width: 180px;
}
* html #nav li.globalNav {
	width: 200px;
}

.localNav li {
	display: inline;
}
.localNav {
	display: none;
	position: absolute;
	top: 20px;
	border: 2px solid brown;
	background-color: orange;
	z-index: 1;
}
#menu01_sub {
	left: 10px;
	width: 190px;
}
#menu02_sub {
	left: 210px;
	width: 190px;
}
#menu03_sub {
	left: 410px;
	width: 190px;
}
</style>

<script>
	onload=function() {
		var submenu=new Array();

		var sub_tmps=document.getElementById("nav").getElementsByTagName("ul");

		for (var i=0, len=sub_tmps.length; i<len; i++) {
			if (sub_tmps[i].className=="localNav")
				submenu.push(sub_tmps[i]);
		}

		var menu_tmps=document.getElementById("nav").getElementsByTagName("a");

		for (var i=0, len=menu_tmps.length; i<len; i++) {
			if (menu_tmps[i].className=="globalNav") {
				menu_tmps[i].onmouseover=function() {
					for (var j=0, sublen=submenu.length; j<sublen; j++)
						submenu[j].style.display="none";

					document.getElementById(this.id+"_sub").style.display="block";
				}

				menu_tmps[i].onfocus=menu_tmps[i].onmouseover;
			}
		}
	}
</script>
</head> 

<body> 
<div> 
   <ul id="nav"> 
      <li class="globalNav"><a href="#" id="menu01" class="globalNav">m01</a>
         <ul id="menu01_sub" class="localNav"> 
            <li><a href="#">1. 메뉴1</a></li> 
            <li><a href="#">2. 메뉴2</a></li> 
            <li><a href="#">3. 메뉴3</a></li> 
         </ul> 
      </li> 
      <li class="globalNav"><a href="#" id="menu02" class="globalNav">m02</a>
         <ul id="menu02_sub" class="localNav"> 
            <li><a href="#">1. 메뉴1</a></li> 
            <li><a href="#">2. 메뉴2</a></li> 
            <li><a href="#">3. 메뉴3</a></li> 
         </ul> 
      </li> 
      <li class="globalNav"><a href="#" id="menu03" class="globalNav">m03</a>
         <ul id="menu03_sub" class="localNav"> 
            <li><a href="#">1. 메뉴1</a></li> 
            <li><a href="#">2. 메뉴2</a></li> 
            <li><a href="#">3. 메뉴3</a></li> 
         </ul> 
      </li> 
   </ul> 
   <div>&nbsp;</div> 
</div> 


</body> 
</html>

Mozilla 한국 커뮤니티

자바스크립트 펼침메뉴 소스봐주세요.

자바스크립트 펼침메뉴 소스봐주세요.

이게 맞나 모르겠네요..

Who is online