이전
목록
다음
R

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

Revenge
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-02-06 (월) 22:36:25 · 2998 · 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-04-10 조회 3,869
12-04-06 조회 5,317
12-04-06 조회 3,083
12-04-04 조회 4,181
12-04-02 조회 3,499
12-03-30 조회 3,433
12-03-29 조회 5,984
12-03-28 조회 3,330
12-03-28 조회 4,253
12-03-27 조회 4,529
12-03-23 조회 3,731
12-03-21 조회 3,455
12-03-20 조회 3,256
12-03-18 조회 3,094
12-03-15 조회 3,275
12-03-12 조회 3,321
12-03-12 조회 3,268
12-03-08 조회 3,602
12-03-03 조회 3,674
12-03-03 조회 3,226
12-02-29 조회 3,513
12-02-28 조회 3,518
12-02-28 조회 3,344
12-02-28 조회 3,456
12-02-27 조회 3,871
12-02-27 조회 3,311
12-02-24 조회 3,459
12-02-24 조회 3,359
12-02-23 조회 3,662
12-02-20 조회 3,659
12-02-20 조회 4,052
12-02-17 조회 4,033
12-02-16 조회 3,201
12-02-15 조회 3,473
12-02-15 조회 3,535
12-02-14 조회 3,514
12-02-08 조회 3,466
12-02-06 조회 3,439
12-02-06 조회 3,865
12-01-25 조회 4,104
12-01-21 조회 4,008
12-01-20 조회 6,125
12-01-15 조회 3,625
12-01-15 조회 3,582
12-01-14 조회 3,474
12-01-14 조회 3,617
12-01-14 조회 3,350
12-01-12 조회 3,980
12-01-12 조회 4,238
12-01-10 조회 3,551
12-01-10 조회 4,360
12-01-09 조회 3,711
12-01-08 조회 6,977
12-01-08 조회 3,188
12-01-07 조회 3,540
12-01-06 조회 3,549
12-01-04 조회 3,697
12-01-03 조회 3,541
12-01-02 조회 3,947
12-01-02 조회 3,136
12-01-01 조회 4,069
12-01-01 조회 3,413
11-12-31 조회 3,661
11-12-31 조회 3,776
11-12-31 조회 3,603
11-12-30 조회 3,835
11-12-30 조회 5,018
11-12-30 조회 4,125
11-12-30 조회 4,281
11-12-30 조회 3,751
11-12-30 조회 3,472
11-12-30 조회 3,480
11-12-29 조회 3,205
11-12-22 조회 3,433
11-12-21 조회 3,391
11-12-20 조회 3,634
11-12-15 조회 5,419
11-12-15 조회 4,419
11-12-14 조회 5,447
11-12-12 조회 3,641
11-12-03 조회 3,405
11-11-26 조회 3,526
11-11-19 조회 3,707
11-11-01 조회 3,055
11-10-23 조회 2,701
11-10-21 조회 2,735
11-10-15 조회 3,140
11-10-15 조회 2,875
11-10-15 조회 3,544
11-10-15 조회 2,772
11-10-14 조회 2,804
11-10-13 조회 2,580
11-10-11 조회 2,832
11-10-10 조회 2,658
11-09-30 조회 3,526
11-09-30 조회 2,963
11-09-29 조회 4,806
11-09-29 조회 2,629
11-09-23 조회 2,662
11-09-16 조회 2,992
글쓰기