테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

개발자 jquery
락창
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 13년 전 · 2808

링크

http://공간과사람.kr (140)
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는 수정하지 않았으며 주석처리만 해놓았습니다.
목록
이전글 다음글

댓글 작성

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

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

한글만 되게 하는 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간단한 팝업창 중앙에 띄우기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

2단계 드롭다운 레이어 메뉴 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

동적 막대그래프 [1]

#개발자 #javascript
슈슈와이
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간단한 위로가기 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

따라다니는 link 퀵메뉴 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

글씨의 색을 자동으로 변환시켜주는 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

인스타그램 사진가져오기

#개발자 #javascript
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

checkedbox 컨트롤

#개발자 #jquery
웹제작자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

radio 컨트롤

#개발자 #jquery
웹제작자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

select box 컨트롤

#개발자 #jquery
웹제작자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

강력한 Select Box 디자인 플러그인 Select Or DIE

#개발자 #jquery
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Node.js - 실시간 위치 추적 (2)

#개발자 #node.js
웹제작자
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

opener에 있는 각종 element의 정보가져오기

#개발자 #jquery
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

특정 이메일 입력 금지및 이메일 유효성 검사하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

마우스 오버시 그림 변하게 하는 자바스크립트 입니다

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

시작과 멈춤이 가능한 스크롤 텍스트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

이미지 없이 라운딩 박스 + 보더 표현하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Trim 함수 자바스크립트로 사용하기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

실제 이미지 크기 알아내기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

present 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

이미지 미리 로딩시켜놓기 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

다각형 이미지슬라이드쇼 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

가운데 정렬된 홈페이지에서 따라다니는 레이어 자바스크립트 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

클릭시 펼쳐지는 메뉴 입니다.

#개발자 #javascript
혀니천사
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전