묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
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 남기남 |
류호연624 | 스킨제작 메뉴얼에 나오는 예제.. | |
김영광609 | 게시판 제목클릭시 새창으로 열리게 하는방법좀.. 제발요 ㅠㅠ [1] | 2011.04.16 by 송동우 |
엘즈홈 | xe로 홈페이지 만들때 레이아웃이.. [1] | 2011.04.16 by NetCabin |
꿈이있다 | 페이지 출력이 안되네요ㅠ.ㅠ [2] | 2011.04.16 by 꿈이있다 |
unohana | XE로 홈페이지 만들려고 하는데... 몇가지 질문드립니다. [1] | 2011.04.16 by NetCabin |
초보영이 | 하단텍스트 어떻게 추가하나요!? [1] | 2011.04.16 by NetCabin |
gaia710 | 웹 주소 앞에 로고를 어떻게 넣나요? [2] | 2011.04.16 by unohana |
어쌔신 | 게시판 새글알림이 질문들입니다 | |
난자상학 | 외부페이지를 불러들였을때.. | |
오스카 | 달력모양에 간단한 메모 가능한 달력(스케쥴러)게시판은 없는지요? | |
알사탕1 | xpress engine 설치 중 에러 메세지가 떠요? | |
무비클립 | 게시판 확장변수 사용질문드려요 | |
SKCC | 메인페이지 상자위젯이 수정불가일때 | |
무비클립 | jQuery 드롭다운 메뉴 구현 질문드립니다. [2] | 2011.04.16 by ForHanbi |
홈페이지 142 | 심심해닷컴 [1] | 2011.04.16 by ToFinder |
byoojoo | 바보같은 질문 하나 드립니다 ㅠㅠ알려주세요 ㅠㅠ [1] | 2011.04.16 by 카르마 |
Elinoa | 마음에 드는 채팅소스가 있는데... | |
김문식242 | 게시판 글을 새창으로 뛰우는 소스 좀 알려주세요 [1] | 2011.04.15 by 김영광609 |
ksdwm72 | 신디케이션의 [동기화 상태]가 [deleted by error]인데.... | |
Stedman | 스킨 수정중 오류좀 도와주세요;; |