AWS AWS 디딤 클라우드

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

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

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

이전
목록
다음
R

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

Revenge
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2012-02-06 (월) 22:36:25 · 2972 · 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-26 조회 4,780
12-04-26 조회 2,622
12-04-26 조회 2,853
12-04-26 조회 2,681
12-04-26 조회 2,986
12-04-25 조회 2,433
12-04-25 조회 2,635
12-04-25 조회 2,610
12-04-25 조회 2,664
12-04-25 조회 2,530
12-04-25 조회 2,864
12-04-24 조회 4,002
12-04-24 조회 2,525
12-04-24 조회 2,441
12-04-24 조회 2,651
12-04-24 조회 2,614
12-04-24 조회 2,503
12-04-24 조회 2,796
12-04-24 조회 2,771
12-04-24 조회 2,529
12-04-24 조회 2,561
12-04-24 조회 3,140
12-04-24 조회 2,473
12-04-24 조회 2,636
12-04-24 조회 2,510
12-04-23 조회 2,494
12-04-23 조회 2,515
12-04-23 조회 2,816
12-04-23 조회 2,518
12-04-23 조회 3,429
12-04-23 조회 2,378
12-04-23 조회 2,466
12-04-23 조회 2,595
12-04-23 조회 2,472
12-04-23 조회 2,620
12-04-23 조회 2,651
12-04-23 조회 2,471
12-04-23 조회 3,362
12-04-22 조회 2,511
12-04-22 조회 2,467
12-04-22 조회 2,556
12-04-22 조회 2,773
12-04-22 조회 2,564
12-04-22 조회 3,222
12-04-21 조회 4,017
12-04-21 조회 7,661
12-04-21 조회 2,545
12-04-21 조회 3,022
12-04-21 조회 2,511
12-04-21 조회 2,752
12-04-20 조회 2,705
12-04-20 조회 2,806
12-04-20 조회 2,591
12-04-20 조회 2,719
12-04-20 조회 3,839
12-04-20 조회 2,886
12-04-16 조회 2,637
12-04-07 조회 2,610
12-04-03 조회 3,067
12-04-02 조회 3,170
12-03-28 조회 2,601
12-03-26 조회 6,002
12-03-25 조회 2,668
12-03-25 조회 2,783
12-03-24 조회 2,901
12-03-23 조회 2,758
12-03-22 조회 5,663
12-03-13 조회 2,644
12-03-11 조회 3,063
12-03-11 조회 3,993
12-03-11 조회 4,812
12-03-11 조회 3,701
12-03-11 조회 3,664
12-03-11 조회 5,320
12-03-06 조회 2,780
12-03-06 조회 2,870
12-03-05 조회 2,937
12-03-02 조회 2,854
12-03-01 조회 6,382
12-03-01 조회 3,198
12-02-29 조회 5,334
12-02-17 조회 2,951
12-02-16 조회 2,756
12-02-14 조회 3,730
12-02-14 조회 2,917
12-02-08 조회 2,894
12-02-07 조회 2,524
12-02-06 조회 1.2만
12-02-04 조회 2,788
12-02-02 조회 2,868
12-01-29 조회 4,552
12-01-27 조회 2,715
12-01-25 조회 3,861
12-01-24 조회 4,230
12-01-21 조회 3,282
12-01-21 조회 3,026
12-01-16 조회 3,464
12-01-16 조회 3,931
12-01-14 조회 2,796
12-01-13 조회 4,341
글쓰기