jquery 드롭다운메뉴 질문입니다.

락창

· 13년 전 · 조회 2815 2815

링크

index 파일입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title></title>
<link type="text/css" rel="stylesheet" href="type/common.css" />
<script type="text/javascript" src="type/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="header">
  <h1><a href="/"><img src="image/logo.jpg" /></a></h1>
  <div class="navigation">
   <ul class="topnav">
    <li><a href="#">회사소개</a>
     <ul class="subnav">
      <li><a href="#">Sub Nav Link</a></li>
      <li><a href="#">Sub Nav Link</a></li>
     </ul>
    </li>
    <li><a href="#">사업개요</a>
     <ul class="subnav">
      <li><a href="#">Sub Nav Link</a></li>
      <li><a href="#">Sub Nav Link</a></li>
     </ul>
    </li>
   </ul>
  </div>

<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
    $("ul.topnav li").mouseover(function() {
        $(this).parent().find("ul.subnav").slideDown('fast').show();
        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow');
        });
        }).hover(function() {
            $(this).addClass("subhover");
        }, function(){
            $(this).removeClass("subhover");
  });
});
</script>

</body>
</html>

css파일입니다.

/*navigation*/
ul.topnav {padding:0 20px; margin:0; width:920px; background:#222; font-size:1.2em; background:url() repeat-x;}

ul.topnav li {margin:0; padding:0 15px 0 0; position:relative;}
ul.topnav li a {padding:10px 5px; color:#29f483; display:block; text-decoration:none; float:left;}
ul.topnav li a:hover {background:url() no-repeat center top;}

/*ul.topnav li span {width:17px; height:35px; float:left; background:url(1.jpg) no-repeat center top;}*/

/*ul.topnav li span.subhover {background-position:center bottombottom; cursor:pointer;}*/
ul.topnav li ul.subnav {position:absolute; left:0; top:35px; background:#333; margin:0; padding:0; display:none; float:left; width:170px; border:1px solid #111;}
ul.topnav li ul.subnav li{margin:0; padding:0; border-top:1px solid #252525; border-bottom:1px solid #444; clear:both; width:170px;}
html ul.topnav li ul.subnav li a {float:left; width:145px; background:#333 url() no-repeat 10px center; padding-left:20px;} html ul.topnav li ul.subnav li a:hover {background:#222 url() no-repeat 10px center;}

원래 소스는 메뉴 옆 빈공간을 만들어 클릭시에 메뉴가 드롭다운 되게 하는 구조입니다.

제가 수정한 부분은 bold처리 된 부분이며, 위 소스대로 수정 후 실행시 아시다시피 모든 메뉴가 한번에 드롭다운 됩니다.

메뉴에 마우스 오버를 했을 시 마우스오버 된 메뉴의 서브메뉴만 노출되게 하고 싶습니다.

조언부탁드립니다.

html의 script 수정부분은 ul.topnav li span 부분을 ul.topnav li 로 수정하였으며, css는 수정하지 않았으며 주석처리만 해놓았습니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
28403	반응형 웹 스타디 초안 4	전진	1,053	13년 전
28402	zurb의 foundation (반응형 프레임워크)과 off-canvas 방식 가변형 레이아웃	전진	2,697	13년 전
28401	반응형 레이아웃 와이어프레임	전진	1,272	13년 전
28398	가변형 레이아웃/네비게이션 패턴 2	전진	1,647	13년 전
28397	반응형 이미지 기법들	전진	1,278	13년 전
28394	반응형 웹 디자인 (Responsive Web Design) 2	전진	1,941	13년 전
4504	개발자 아이모듈 관리자페이지를 새로 만들고 있습니다. 11	알쯔	1,348	13년 전
26593	퍼블리셔 이경우 어떻게 해야할까요?? 6	인후지덕	928	13년 전
4502	개발자 포인트 어떻게 올리나여 1	kpw3	411	13년 전
18132	정규표현식 정규식 테스트 가능한 사이트 추천해드립니다~~ 9	축복	13,302	13년 전
28388	구글 애드센스 배경색 설정 (로딩시 노란색으로 깜빡이는 문제 해결) 5	지운아빠	1,184	13년 전
4496	개발자 모바일 기기 해상도와 웹브라우저 해상도 5	진서기	3,326	13년 전
4491	개발자 국내/국외 접속국가에 따라서 국문/영문 홈페이지 보여짐은 어떻게?? 4	하나시스	958	13년 전
4486	개발자 도대체...포인트는요... 4	선희사랑	417	13년 전
4483	개발자 옷.. 에스알소프트로 출범.. 2	알렉스당	589	13년 전
4482	개발자 우와 멋져요~	Preware	405	13년 전
4479	개발자 cakephp 고수님들께 여쭙니다. 2	쒜낏쒜낏	531	13년 전
18122	PHP 유튜브 API를 활용한 영상 업로드 및 활용 9	AMDbest	4,316	13년 전
18120	JavaScript 흔한 트위터,페이스북 퍼가기 자바스크립트 1	AMDbest	6,140	13년 전
26590	퍼블리셔 우왕..퍼블리셔도 생겼네요~ 2	누구얏	858	13년 전
18113	Linux 리눅스 FFMPEG 자동실행소스(자작임) 6	AMDbest	4,649	13년 전
24419	기획자 리뉴얼 축하드립니다 1	조이큐브	949	13년 전
4474	개발자 리자님 익스7로좀 봐주세용 4	TopSchooL	469	13년 전
4465	개발자 사이트 리뉴얼의 전말 8	군포돼지	637	13년 전
4461	개발자 토크게시판과 자유게시판의 차이? 3	군포돼지	457	13년 전
4460	개발자 상큼해졌요~	임진규	350	13년 전
4451	개발자 새로 바뀐 검색 어떠세요? 8	관리자	594	13년 전
26589	퍼블리셔 이뻐요^^	갑수엔터테인먼트	755	13년 전
4450	개발자 새로 바뀐 홈피 넘 멋져요.^^	써맨	409	13년 전
4448	개발자 아니 홈피가 바꼈네요. 1	알찬돌삐	483	13년 전
24418	기획자 너무예쁘게 바뀌었네요.^^	조재환	911	13년 전
31037	표준화 그누보드4 웹 표준화 강좌를 시작하며 37	지운아빠	7,462	13년 전
26390	인터넷 쇼핑몰, 생존 노하우는? 6	PHPㅡASP프로그래머	2,693	13년 전
4446	개발자 오늘 가입했습니다. 1	수호양	402	13년 전
26585	퍼블리셔 저는 디자이너 이지만요.. 3	hoinV	989	13년 전
26581	퍼블리셔 퍼블리셔 게시판 생겼단 말 듣고 달려왔습니다! 3	현님	910	13년 전
26578	퍼블리셔 퍼블리셔라고 말하기는 참 미안하지만..... 2	시원	1,048	13년 전
18098	PHP 웹 소스 긁어오기 14	축복	4,912	13년 전
4443	트래픽 필드 오류로 1	TopSchooL	353	13년 전
18097	PHP 쇼핑몰과 프로그램 연동작업해주실분 구해요. 메뉴얼있음	김비즈	870	13년 전
26388	구글 크롬, 젤리빈 기본브라우저로…의미는? 1	PHPㅡASP프로그래머	2,301	13년 전
18094	Mobile 스마트폰에서 영상소스는? 2	행복의길	1,936	13년 전
30596	HTML 레이아웃이 비뚤합니다. 3	바다로가자	1,613	13년 전
26387	오비고, 스마트TV용 HTML5기반 웹앱 공개	PHPㅡASP프로그래머	1,816	13년 전
18091	정규표현식 정규식으로 html 태그 지우기 2	축복	2,728	13년 전
4445	기타 염치불구하고 추천좀 부탁드리겠습니다.	현철파워	375	13년 전
18088	jQuery 이미지 슬라이더 만들어보았습니다. 2	현철파워	1,848	13년 전
18086	jQuery 순차애니메이션 질문좀 드리겠습니다. 1	현철파워	1,261	13년 전
18085	기타 드림위버 cs6 코딩 글깨집니다.	바다로가자	3,050	13년 전
18082	Linux CentOS release 6.3 Starting httpd: Warning: DocumentRoot [/home/myhome/public_html/] does not exist [ OK ] 뜰 때 2	카카오툴즈	3,092	13년 전
18081	PHP 접속시마다 랜덤한 페이지를 뿌려주려면	노리다	891	13년 전
18078	Linux 리눅스용 웹에디터 Kompozer 입니다. 2	하하369	3,938	13년 전
18076	PHP 에디터 홈페이지에 삽입하는 방법 1	백제	1,001	13년 전
18074	node.js node.js 0.8.2 번역 문서 1	명랑폐인	1,196	13년 전
18072	jQuery CSS3처럼 이미지 라운딩 기능의 제이쿼리 1	port	1,626	13년 전
18070	jQuery 이 플래시메뉴처럼 바꿔 만들려면... 1	가위바위보	1,578	13년 전
18069	기타 플래시 버전 좀 내려서 저장해주시겠나요-_-??	danielle	673	13년 전
18066	Mobile 가로 폭 문제 2	palangsae	843	13년 전
18064	MySQL MySQL 테이블명 대소문자 구분안하기 1	예희아빠	2,753	13년 전
18057	PHP 고수님들 도와주세요. 메일발송문제입니다. 6	미자엄마	805	13년 전
18056	Flash 플래시 네비 관련	여치당	1,368	13년 전
30588	HTML DIV의 justify 정렬 문제 7	byfun	2,097	13년 전
18055	JavaScript ie 에서는 되는데 크롬에서는 왜 안될까요?	그거슨	1,933	13년 전
18054	PHP 질답코너에 문의를 올려도 반응이 없어 도움을 요청합니다.	미자엄마	654	13년 전
30585	HTML CGF 사용 방법 (지운아빠님 보시면 참조되실 것 같아서. ㅎㅎ) 2	cshop	1,287	13년 전
18051	기타 테이블깨짐 원인좀 알려주세요~~ 2	영고기	3,650	13년 전
18050	jQuery 이미지 슬라이드 질문 드립니다.	구름™	910	13년 전
18048	Mobile 모바일 페이지 확대 축소 도움부탁려요 1	막걸링	1,360	13년 전
18047	PHP HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ	진풍백	858	13년 전
18044	JavaScript HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ 2	진풍백	1,034	13년 전
26386	“웹개발자도 쉽게“…새 양방향 3D표준 눈길	PHPㅡASP프로그래머	1,518	13년 전
18042	기타 플래쉬에 관련된 질문입니다. 1	항상감사	614	13년 전
30580	HTML 메뉴하나 따라 만들어보고 있는데.. Css질문 4	there007	1,518	13년 전
4425	커뮤니티 사이트의 미래와 그누보드 확장성 17	전진	1,163	13년 전
18039	JavaScript 자바에서... 2	후라보노보노	727	13년 전
18037	Linux 리눅스 특정확장자 하위디렉토리까지 일괄삭제하기 1	오육칠팔	9,121	13년 전
18031	JavaScript list.skin.php에서 자바스크립트 출력 문제 입니다. 5	관스틴	811	13년 전
18028	기타 홈페이지 하나 만드려고 하는데요. 호스팅? 2	가을이군요	710	13년 전
18027	Mobile 모바일 사이트는 웹표준 코딩 할려면 어떻게 하나요	스마트파인드	786	13년 전
18022	JavaScript JScript.Encode 복호화 방법 4	밥솥쿠쿠	1,507	13년 전
18018	MySQL db 값이 가끔 안넘어가는경우가..... 3	후라보노보노	905	13년 전
18016	MySQL 게시판생성시 테이블을 별도로 생성할때의 장점은? 1	junny	1,003	13년 전
18009	기타 뻔뻔하게 대놓고 추천 부탁드립니다 꾸뻑~~ 6	잡초	672	13년 전
4423	여기에도 장비 필요하신분들이 있나요 1	잡초	519	13년 전
18003	jQuery 메인 탭 롤링 배너 입니다. 5	복스리	4,601	13년 전
18000	JavaScript jQuery 쉽게 참고 할만한 사이트 없나요? 2	복스리	890	13년 전
17999	node.js NodeJS 추천사이트	명랑폐인	1,002	13년 전
17996	JavaScript 팝업창 관련 질문드려요! 2	김우너석	741	13년 전
17993	JavaScript 고수님들 도와주세요. "웹 페이지 오류 세부 정보"에러가 뜨는데 2	미자엄마	6,624	13년 전
17989	기타 구인 구직 사이트를 개발하고 싶은데 3	정승환	804	13년 전
17987	jQuery www.hyundaiusa.com 메뉴를 좀 여쭤봅니다. 1	탐크루지	1,132	13년 전
17986	Mobile 모바일 동영상게시판 그누보드스킨 중 무엇을 쓰면 좋을까요?	막걸링	1,105	13년 전
17985	jQuery jquery 드롭다운메뉴 질문입니다. 현재글	락창	2,816	13년 전
17984	jQuery JQuery 소스 해결 좀 부탁드립니다.	흑루	793	13년 전
4411	모바일 브라우져에서 웹소켓(Websocket) 11	명랑폐인	2,681	13년 전
17979	PHP UNION ALL 문의 드립니다람쥐~ ★★★★☆ 4	직화오리팡야	1,156	13년 전
30576	HTML ssl 웹페이지 적용 질문 드립니다. 3	으다다	1,748	13년 전
26383	방문자 늘리기VS개발능력 간 교환이 가능한가요? 2	꿈꾸는인생	1,315	13년 전
17975	PHP 공지사항이나 기타 메인페이지에 한줄씩 노출 3	백제	1,463	13년 전
30569	HTML ssl 웹페이지 적용 질문드립니다. 6	으다다	1,679	13년 전

이전 다음

25 26 27 28 29

전체 목록