이전
목록
다음
R

간단한 스크립트 결합좀 해주세요!!

Revenge
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-02-06 (월) 22:36:25 · 3105 · 1
개발자가 아니라 잘 모르겠네요 ㅠ_ㅠ
 
두개의 스크립트 기능을 합치고 싶습니다.
하나는 전체서브메뉴를 보여주는 스크립튼데, 출력은 되나,
마우스를 서브메뉴에 올릴시 닫쳐버리구요..
 
또 하나는 서브메뉴가 슬라이딩되어 내려오고 마우스 오버시 잘 작동은 되지만,
메뉴에 올리면 전체 서브메뉴가 내려오진 않습니다.
 
 
아래는 전체서브메뉴 출력만 되는 소스
-------------------------------------------------------------------
<script type="text/javascript">
function init() {
 var gnb = document.getElementById('nav');
 var heading = gnb.getElementsByTagName('li');
 var subMenu = gnb.getElementsByTagName('ul');
 
 // subMenu 위치 초기화
 for (var m=0; m<subMenu.length; m++){
  subMenu[m].style.left = m + 'px';
 }
 for (var i=0; i<heading.length; i++){
  heading[i].onmouseover = heading[i].onmouseout = function() {
   subMenuHandler();
  }
 }
}
function subMenuHandler() {
 var gnb = document.getElementById('nav');
 var subMenu = gnb.getElementsByTagName('ul');
 
 for (var j=0; j<subMenu.length; j++){
  (subMenu[j].style.display == 'block') ? subMenu[j].style.display = 'none' : subMenu[j].style.display = 'block';
 }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
addLoadEvent(init);
</script>
-------------------------------------------------------------
 
 
아래는 서브메뉴는 내려오고 마우스 오버시 잘 작동하지만,
전체 메뉴가 내려오는것은 아닌, 해당 서브만 내려옵니다..
--------------------------------------------------------------
$(document).ready(function() { 
 $('#nav li').hover(function() {
  $('ul', this).slideDown(200);
  $(this).children('a:first').addClass("hov");
 }, function() {
  $('ul', this).slideUp(10);
  $(this).children('a:first').removeClass("hov");  
 });
});
------------------------------------------------------------
 
 
아래는 html 소스전문----------------------------------------
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; color: #232323; }
.wrap { width: 800px;}
/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float:left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px;}
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none;  color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
/* @group subnav */
#nav ul {position: absolute; left:-500px; display: none; margin: 0; padding: 0; list-style: none; border:1px #d5dce8 solid;} 
#nav ul li { width:100px; position: relative; left:0px; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left:0px solid transparent; border-right: 0px solid transparent;background:#eee }
   
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform:  uppercase; color: #797979; font-weight: normal; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: transparent; color: #4e4e4e; }
* html #nav ul { margin: 0 0 0 -2px; }
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
</style>
</head>
<body>
<div class="wrap">
 <ul id="nav">
  <li><a href="#">Homepage</a></li>
  <li><a href="#">About the Mag</a>
   <ul>
    <li><a href="#">Company</a></li>
    <li><a href="#">Authors</a></li>
    <li><a href="#">Write for Us?</a></li>
    <li><a href="#">Advertising</a></li>
    <li><a href="#">Get in Touch</a></li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
   <ul>
    <li><a href="#">PSD</a></li>
    <li><a href="#">AI Vectors</a></li>
    <li><a href="#">Patterns</a></li>
    <li><a href="#">Icons</a></li>
   </ul>   
  </li>
  <li><a href="#">Tutorials</a>
   <ul>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">jQuery</a></li>
    <li><a href="#">PHP MySQL</a></li>
    <li><a href="#">Ruby on Rails</a></li>
   </ul>
  </li>
  <li><a href="#">Web Tools</a>
   <ul>
    <li><a href="#">Performance</a></li>
    <li><a href="#">Browser Testing</a></li>
    <li><a href="#">CMS Plugins</a></li>
    <li><a href="#">Cheat Sheets</a></li>
   </ul>
  </li>
  <li><a href="#">Originals</a>
   <ul>
    <li><a href="#">Website Design</a></li>
    <li><a href="#">Mobile</a></li>
    <li><a href="#">User Interface</a></li>
    <li><a href="#">Freelancing</a></li>
    <li><a href="#">Inspiration</a></li>
   </ul>
  </li>
 </ul>
</div>
-----------------------------------------------------------
 
제가 바라는 기능은,
어떤 메뉴에 마우스를 올리던, 전체 서브메뉴가 내려오고,
그 서브메뉴에 마우스를 올릴시엔, 2번째 스크립트에 있는,
오버기능이 작동되었으면 좋겠습니다.
 
고수분들 도와주세요~ㅠ_ㅠ
#개발자팁 #개발자 #팁자료실 #javascript
|

댓글 1개

프로프리랜서
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-02-27 (월) 20:15:04
죄송해요
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-03-19 조회 3,582
12-03-16 조회 4,118
12-03-14 조회 4,002
12-03-13 조회 3,612
12-03-13 조회 4,465
12-03-12 조회 5,555
12-03-12 조회 1만
12-03-08 조회 6,110
12-03-06 조회 1.1만
12-03-06 조회 3,825
12-03-06 조회 6,328
12-03-02 조회 5,128
12-02-29 조회 3,669
12-02-27 조회 4,186
12-02-22 조회 3,720
12-02-20 조회 3,704
12-02-20 조회 6,779
12-02-01 조회 3,315
12-01-30 조회 8,849
12-01-29 조회 3,338
12-01-24 조회 3,665
12-01-21 조회 3,316
12-01-10 조회 3,780
11-12-26 조회 3,691
11-12-23 조회 5,108
11-12-23 조회 4,761
11-12-23 조회 4,364
11-12-23 조회 8,067
11-12-22 조회 3,804
11-12-17 조회 3,849
11-12-12 조회 3,263
11-12-08 조회 7,790
11-12-08 조회 3,613
11-12-07 조회 3,877
11-12-06 조회 5,642
11-12-02 조회 3,581
11-12-01 조회 3,205
11-11-30 조회 6,993
11-11-26 조회 3,951
11-11-24 조회 4,699
11-11-22 조회 3,089
11-11-22 조회 6,705
11-11-18 조회 5,138
11-11-16 조회 3,507
11-11-14 조회 3,535
11-11-12 조회 4,013
11-11-08 조회 3,333
11-11-06 조회 1만
11-11-06 조회 3,922
11-11-03 조회 5,609
11-11-02 조회 5,886
11-11-01 조회 9,404
11-10-19 조회 2,904
11-10-17 조회 2,686
11-10-10 조회 2,664
11-10-07 조회 3,418
11-10-06 조회 4,011
11-10-06 조회 2,568
11-10-02 조회 3,322
11-09-08 조회 4,337
11-09-08 조회 2,715
11-09-07 조회 2,686
11-09-02 조회 2,780
11-09-01 조회 3,729
11-08-28 조회 3,617
11-08-23 조회 3,439
11-08-22 조회 2,860
11-08-22 조회 2,447
11-08-13 조회 2,508
11-08-05 조회 2,950
11-08-03 조회 4,152
11-07-03 조회 2,631
11-06-15 조회 3,273
11-06-15 조회 3,110
11-05-15 조회 2,915
11-05-11 조회 5,645
11-04-12 조회 3,067
11-01-27 조회 3,890
11-01-26 조회 2,682
11-01-26 조회 4,520
11-01-18 조회 2,730
10-11-23 조회 2,961
10-10-24 조회 4,775
10-09-15 조회 4,469
10-09-07 조회 3,454
10-08-27 조회 4,131
10-08-20 조회 7,016
10-07-30 조회 5,698
10-06-30 조회 2,962
10-06-11 조회 4,717
10-06-11 조회 3,403
10-05-15 조회 4,247
10-05-10 조회 2,935
10-03-19 조회 5,479
10-03-05 조회 5,240
10-02-17 조회 5,679
09-11-21 조회 6,990
09-11-09 조회 4,054
09-11-04 조회 6,780
09-10-26 조회 3,909
글쓰기