묻고답하기
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
이 소스부터 해석하고 이해 하시기 당부 드립니다.
그럼 메뉴가 쉬워집니다.
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| nugul | 버튼이 안보여요ㅠㅠ | |
| 숙지황 |
1.7 리버전 에서 레이아웃 께짐 질문 드립니다.
[4]
 | 2013.03.12 by 스마트XE |
| Apollos2304 | 뭐지이건 이건뭐지??? [1] | 2013.03.12 by 송동우 |
| XE만세 | 최근 댓글 위젯에서 마우스를 댓글에 올려둘시.. [1] | 2013.03.12 by 송동우 |
| nugul | 포인트 질문입니다 [1] | 2013.03.12 by 송동우 |
| je313 | 게시판 질문이요. | |
| 천제아 | 매우 심각합니다. 관리자 아이디에 로그인이 안됩니다. [1] | 2013.03.12 by 송동우 |
| 고냉이2 | 관리자 도메인이 cafe24도메인으로 연결되네요 [1] | 2013.03.12 by 푸시아 |
| okok |
admin에서 쉬운설치가 서버로 접속이 되지않습니다
[3]
| 2013.03.12 by okok |
| 흐르는가람 | 제로보드에서 XE로 마이그레이션 시 데이터 누락 해결 방법 없나요? [1] | 2013.03.12 by 흐르는가람 |
| 오락실주인 |
XE 1.7.2.0 파비콘 오류 ㅠ
[1]
| 2013.03.12 |
| 우영아빠 |
1.7.2 사이트 제작 편집 문제. / "메뉴편집과 레이아웃편집이 불가"
| |
| 귀여운유니 |
닉네임 클릭시 뜨는 메뉴 추가
[1]
| 2013.03.12 by 송동우 |
| KTK | 추천시 본인도 추천받기 문제 [3] | 2013.03.12 by 송동우 |
| 영구만세 |
1.7.2 메뉴추가에서 게시판 추가
[2]
| 2013.03.12 by Sulli |
| 키스미베이베 | (급)홈페이지 IE에서만 갑자기 꺠지기시작합니다. 도와주세요 | |
| 아로나민v | 혹시 홈페이지 전체를 잠글수도 있나요? [1] | 2013.03.12 by 송동우 |
| 하늘편지2 | 최근게시물 출력을... [1] | 2013.03.12 by 송동우 |
| 꾸링 | 태그 소스를 숨기고 싶어요 | |
| je313 | 질문이요 제로보드xe게시판올리기 |