AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
R

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

Revenge
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-02-06 (월) 22:36:25 · 2962 · 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,818
12-04-06 조회 5,262
12-04-06 조회 3,029
12-04-04 조회 4,118
12-04-02 조회 3,466
12-03-30 조회 3,397
12-03-29 조회 5,881
12-03-28 조회 3,298
12-03-28 조회 4,199
12-03-27 조회 4,424
12-03-23 조회 3,694
12-03-21 조회 3,415
12-03-20 조회 3,215
12-03-18 조회 3,042
12-03-15 조회 3,212
12-03-12 조회 3,258
12-03-12 조회 3,234
12-03-08 조회 3,521
12-03-03 조회 3,572
12-03-03 조회 3,195
12-02-29 조회 3,398
12-02-28 조회 3,488
12-02-28 조회 3,303
12-02-28 조회 3,412
12-02-27 조회 3,821
12-02-27 조회 3,205
12-02-24 조회 3,410
12-02-24 조회 3,229
12-02-23 조회 3,634
12-02-20 조회 3,516
12-02-20 조회 4,011
12-02-17 조회 3,977
12-02-16 조회 3,081
12-02-15 조회 3,350
12-02-15 조회 3,497
12-02-14 조회 3,398
12-02-08 조회 3,408
12-02-06 조회 3,380
12-02-06 조회 3,820
12-01-25 조회 4,074
12-01-21 조회 3,973
12-01-20 조회 6,093
12-01-15 조회 3,591
12-01-15 조회 3,551
12-01-14 조회 3,447
12-01-14 조회 3,588
12-01-14 조회 3,315
12-01-12 조회 3,920
12-01-12 조회 4,198
12-01-10 조회 3,526
12-01-10 조회 4,324
12-01-09 조회 3,685
12-01-08 조회 6,950
12-01-08 조회 3,159
12-01-07 조회 3,505
12-01-06 조회 3,521
12-01-04 조회 3,662
12-01-03 조회 3,523
12-01-02 조회 3,920
12-01-02 조회 3,114
12-01-01 조회 4,034
12-01-01 조회 3,382
11-12-31 조회 3,629
11-12-31 조회 3,741
11-12-31 조회 3,573
11-12-30 조회 3,801
11-12-30 조회 4,986
11-12-30 조회 4,100
11-12-30 조회 4,255
11-12-30 조회 3,730
11-12-30 조회 3,452
11-12-30 조회 3,414
11-12-29 조회 3,179
11-12-22 조회 3,374
11-12-21 조회 3,280
11-12-20 조회 3,593
11-12-15 조회 5,374
11-12-15 조회 4,386
11-12-14 조회 5,408
11-12-12 조회 3,597
11-12-03 조회 3,360
11-11-26 조회 3,389
11-11-19 조회 3,666
11-11-01 조회 2,965
11-10-23 조회 2,629
11-10-21 조회 2,607
11-10-15 조회 3,116
11-10-15 조회 2,849
11-10-15 조회 3,520
11-10-15 조회 2,745
11-10-14 조회 2,784
11-10-13 조회 2,559
11-10-11 조회 2,805
11-10-10 조회 2,624
11-09-30 조회 3,487
11-09-30 조회 2,910
11-09-29 조회 4,711
11-09-29 조회 2,604
11-09-23 조회 2,626
11-09-16 조회 2,962
글쓰기