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

락창

· 13년 전 · 조회 2812 2812

링크

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는 수정하지 않았으며 주석처리만 해놓았습니다.

댓글 작성

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

로그인하기

게시글 목록

번호	제목	글쓴이	조회	날짜
32341	jquery-ui / datepicker 나라별	신리	26	9년 전
32339	영어 독해 쉬운 방법	박쥐12	30	9년 전
32326	php에 오라클이 가능한가요? 2	커네드커네드	69	9년 전
32325	씨멘틱 마크업 - 이거 머냐 씹어먹는거냐? 2	자루스	82	9년 전
32322	PHP 관련 클래스들이 많은 사이트 2	신리	120	9년 전
32319	텍스트를 읽어주는 코딩	신리	110	9년 전
32318	jQuery 예제가 많은 사이트	덕서리	103	9년 전
32316	/js 아래 자바스크립트 화일들이 어디에서 사용될까요?	신리	57	9년 전
32315	신입 개발 ->디자인 ->퍼블로 왔습니다! 4	웹표준3년차	138	9년 전
32313	부트스트랩으로 만든 메뉴를 CSS로 변경본겁니다.	쥬노	46	9년 전
32312	제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...	쥬노	45	9년 전
32311	제가 부트스트랩으로 공부하던 중 처음으로 회사 홈페이지를 만들고 있는데요...	쥬노	51	9년 전
32310	HTTP Cache 튜토리얼 - 속도개선	인덱스웹	82	9년 전
32304	보더문의 3	star3840	60	9년 전
32303	부트스트랩 질문 드립니다. 1	토시아	111	9년 전
32300	PHP로 개발 시 지양해야 할 코드 2	제은일행	61	9년 전
32293	업로드 구현시 최강자 Plupload 1	절권도	181	9년 전
32292	유튜브 동영상 관련 질문드립니다~~ 1	기만잉	123	9년 전
32291	인쇄 여러장 어떻게 해야하죠..?	밍밍멍	29	9년 전
32285	오픈마켓 이익금 계산기	감기약	199	9년 전
32284	구글 웹사이트 번역기 사이트에 달기	신리	188	9년 전
32275	오픈마켓 이익금 계산기 급하게 만들어 봤습니다. 3	감기약	290	9년 전
32271	카페24 호스팅에서 mail()함수 / smtp인증을 통한 gmail 서버로 발송 가능한가요? 2	글러빙	159	9년 전
32268	jquery print 입니다. 5	Rido	180	9년 전
32265	개발 선배님들께 질문 남기고자 합니다.. 4	웹의미래는딥러닝	132	9년 전
32261	n개월 뒤 말일 구하기 함수	잠돌	127	9년 전
32258	HHVM Just In Time Interpreter 설정	글러빙	88	9년 전
32257	SEO 전용 제어 판넬 - 멀티사이트 관리 1	신리	175	9년 전
32255	vagrant 란? 1	글러빙	107	9년 전
32254	개발자를 위한 자바스크립트로 화면 UI 라이브러리	글러빙	144	9년 전
32253	팝업띄우려면, colorbox ~	글러빙	105	9년 전
32251	jQuery Sidebar 패널입니다. 2	글러빙	155	9년 전
32250	url관련 처리는 URI.js	글러빙	133	9년 전
32249	메트로 스타일 css	글러빙	111	9년 전
32247	게임을 통해 코딩을 배워갑니다.	신리	491	9년 전
32246	ContentTools - 웹페이지를 WYSIWYG editors를 이용하여 편집	신리	110	9년 전
32245	embed.js 참으로 유용한 플러그인입니다 2	신리	246	9년 전
32244	제니퍼소프트의 UI프레임워크 JUI	절권도	114	9년 전
32243	날씨 정보 API	절권도	136	9년 전
32242	PHP : The right way 1	절권도	93	9년 전
32241	모질라가 제공하는 자바스크립트 레퍼런스	절권도	91	9년 전
32240	PHP7로 가는 법	절권도	148	9년 전
32239	정규식 테스터	절권도	79	9년 전
32238	PHP 문법 체크	절권도	98	9년 전
32237	IP 검색 사이트	절권도	108	9년 전
32236	요즘 수요가 가장 많은 사이트 유형이 뭘까요? 2	절권도	268	9년 전
32232	7 Best PHP Frameworks	신리	68	9년 전
32229	웹사이트의 CSS정보를 바로 확인해 주는 크롬 확장프로그램 소개 2	신리	294	9년 전
32228	HTML에 CSS필터를 효과적으로 줄 수 있는 JS plugin을 소개합니다.	신리	119	9년 전
32227	CSS Library - Picnic CSS	신리	89	9년 전
32217	고급 강좌가 무료입니다 3	신리	660	9년 전
32215	안녕하세요 웹 개발자를 꿈꾸는 학생입니다. 7	컴쿨	451	9년 전
32214	다양한 코딩 툴들 2	신리	252	9년 전
32213	jQuery Tree 를 만들었습니다.~~ 2	kiplayer	260	9년 전
32211	모던PHP에 대한 고견을 들었으면 합니다. 3	승희아빠	306	9년 전
32207	jquery ExayUI 소개 1	신리	183	9년 전
32196	날짜 입력과 관련한 자바스크립트 4	신리	184	9년 전
32193	협업을 위한 그룹 채팅 솔루션... 2	신리	303	9년 전
32192	위도, 경도 값을 받아서 타임존을 확인하는 프로그램	신리	144	9년 전
32190	padding 값 클래스 화, 어떤 게 직관적으로 느껴지시나요? 1	이온디	139	9년 전
32188	웹사이트에서 고객채팅 프로그램 4	이대리S	251	9년 전
32186	익스 6이나 7도 맞쳐줘야하나요? 2	커네드커네드	220	9년 전
32184	파노라마 기능 및 WebVR 3	신리	273	9년 전
32173	php에서 Excel 화일 읽고 쓰고... 4	신리	283	9년 전
32172	개발자를 위한 SVG LOGO	신리	194	9년 전
32171	Spectacle - A React.js Presentation Library	신리	133	9년 전
32167	제주관광공사 OPEN API	신리	259	9년 전
32165	스펙터 CSS 프레임워크 3	엔피씨	245	9년 전
32163	css3로 구현하는 애니메이션 한 눈에 보기 1	신리	252	9년 전
32162	HTML 에니메이션 툴	신리	242	9년 전
32158	홈페이지 기능 체크 좀 부탁드려요! 3	성격파탄자	445	9년 전
32157	파싱 페이지 넘김 어떻게 해요 3	공부가	350	9년 전
32155	html, css, javascript를 온라인에서 실습해 볼때	신리	171	9년 전
32151	이미지 위에 글자 쓰기 2	신리	318	9년 전
32149	부트스트랩 공부중인데요... 1	쥬노	227	9년 전
32135	내컴퓨터 웹서버 구축	덕서리	208	9년 전
32132	개발 잘해지는 팁 좀,... 12	00년생용띠	550	9년 전
32127	가상서버에서 계정별 트래픽 제한하기 3	신리	186	9년 전
32125	스크립트 후킹	닉네임없음	356	9년 전
32122	필드명 고민 4	엔피씨	364	9년 전
32120	혹시.. 모바일웹 iframe 고정 관련해서 질문해도되나요 1	라푼	450	9년 전
32119	그누보드 아이콘 gif말고 다른 이미지 포멧도 추가하기 1	Jangfolk	292	9년 전
32117	가상서버 운영시 서버시간 맞추기	신리	123	9년 전
32116	내 홈페이지에 원하는 glyphicon을 한곳에서 검색	신리	335	9년 전
32115	css3를 아주 간단하게 만들어줌	신리	394	9년 전
32114	표준 폰트를 기준으로 em 계산시 필요 (px -> em) 2	신리	312	9년 전
32112	table td에 세로 스크롤 적용하기	신리	280	9년 전
32111	SSH2를 지원하는 한글 putty 링크 주소입니다.	신리	135	9년 전
32109	간단한 모달(modal)창 구현소스입니다. 1	Rido	382	9년 전
32107	날씨정보 제공을 위한 weather forecast API	신리	337	9년 전
32104	누구나 쉽게 이해할 수 있는 Git 3	신리	879	9년 전
32103	PHP/MySQL 코드 소스 사이트	신리	200	9년 전
32102	이미지 편집하여 서버에 올리기	전갈자리남자	350	9년 전
32101	php 문자열변수값에서 숫자만 뽑아내기	신리	325	9년 전
32094	다국어 홈페이지 관련 문의 2	사슴뿔	687	9년 전
32089	퍼블리셔 수습기간인데 질문드립니다. 12	DavidCorleone	727	9년 전
20404	서버시간 알아내기	PlayPixel	446	9년 전
31036	기타 swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현	돼지코구뇽	393	9년 전
8279	악성 게시판 스팸글 어떻게 차단하나요 2	북금곰	407	9년 전
8268	연봉질문있습니다. 11	저스팅	758	9년 전

1 2 3

전체 목록