묻고답하기
jQuery 드롭다운 메뉴 구현 질문드립니다.
2011.04.15 19:53
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>exam Jquery</title>
<style type="text/css">
@import url(exam.css);
</style>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#mainMenuText > #subNav > #subMenuText").hide();
$("#mainMenuText").hover(function(){
$("#mainMenuText > #subNav > #subMenuText").slideToggle('show');
})
})
//-->
</script>
</head>
<body>
<div id="mainMenuBox">
<ul id="mainNav">
<li id="mainMenuText" class="mainMenu1">Company
<ul id="subNav">
<li id="subMenuText" class="subMenu1">농알쌩</li>
<li id="subMenuText" class="subMenu2">아농추</li>
<li id="subMenuText" class="subMenu3">미련한것</li>
<li id="subMenuText" class="subMenu4">앵이요</li>
</ul>
</li>
<li id="mainMenuText" class="mainMenu2">Product
<ul id="subNav">
<li id="subMenuText" class="subMenu1">김치만두</li>
<li id="subMenuText" class="subMenu2">꼬마사랑이</li>
</ul>
</li>
<li id="mainMenuText" class="mainMenu3">OnlineStore</li>
<li id="mainMenuText" class="mainMenu4">Community</li>
</ul>
</div>
<div id="both">
</div>
</body>
</html>
이렇게 하면 마우스를 올렸을경우 하위 서브메뉴 <ul>태그가 동시에 다 나와버리거든요
각각 개별적으로 작동하게 하려면 어떻게 해야 하죠?
함수를 호출해서 인자갑으로 넘겨 주던지 뭘 좀 해야 할것 같은데 잘 안되서요
애니메이션 동작은 원하는 형태로 나오는데 메인 메뉴에 마우스 오버시에 하위 메뉴가 전부 다 뜨는것 이걸 좀 잡아야 하는데
휴 안되네요.
이 코드는 또 IE7에서는 가장 위쪽 #mainMenuText만 선택이 되고 이하 #mainMenuText는 선택이 안되네요..
jQuery가 맨 위 부분에만 적용되네요 ㅜㅜ
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>exam Jquery</title>
<style type="text/css">
@import url(exam.css);
</style>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#mainMenuText > #subNav > #subMenuText").hide();
$("#mainMenuText").hover(function(){
$("#mainMenuText > #subNav > #subMenuText").slideToggle('show');
})
})
//-->
</script>
</head>
<body>
<div id="mainMenuBox">
<ul id="mainNav">
<li id="mainMenuText" class="mainMenu1">Company
<ul id="subNav">
<li id="subMenuText" class="subMenu1">농알쌩</li>
<li id="subMenuText" class="subMenu2">아농추</li>
<li id="subMenuText" class="subMenu3">미련한것</li>
<li id="subMenuText" class="subMenu4">앵이요</li>
</ul>
</li>
<li id="mainMenuText" class="mainMenu2">Product
<ul id="subNav">
<li id="subMenuText" class="subMenu1">김치만두</li>
<li id="subMenuText" class="subMenu2">꼬마사랑이</li>
</ul>
</li>
<li id="mainMenuText" class="mainMenu3">OnlineStore</li>
<li id="mainMenuText" class="mainMenu4">Community</li>
</ul>
</div>
<div id="both">
</div>
</body>
</html>
이렇게 하면 마우스를 올렸을경우 하위 서브메뉴 <ul>태그가 동시에 다 나와버리거든요
각각 개별적으로 작동하게 하려면 어떻게 해야 하죠?
함수를 호출해서 인자갑으로 넘겨 주던지 뭘 좀 해야 할것 같은데 잘 안되서요
애니메이션 동작은 원하는 형태로 나오는데 메인 메뉴에 마우스 오버시에 하위 메뉴가 전부 다 뜨는것 이걸 좀 잡아야 하는데
휴 안되네요.
이 코드는 또 IE7에서는 가장 위쪽 #mainMenuText만 선택이 되고 이하 #mainMenuText는 선택이 안되네요..
jQuery가 맨 위 부분에만 적용되네요 ㅜㅜ
댓글 2
-
this를 활용하시기 바랍니다...
-
ForHanbi
2011.04.16 11:43
일단 수 많은 id를 지우시고요.(id의 중복 사용은 안됩니다)
그리고 진짜 부탁드리는 말인데...
http://naradesign.net/ouif/uio/navigation/horizontal/bar/xhtml.html
이 소스부터 해석하고 이해 하시기 당부 드립니다.
그럼 메뉴가 쉬워집니다.
