간단한 스크립트 결합좀 해주세요!!
개발자가 아니라 잘 모르겠네요 ㅠ_ㅠ
두개의 스크립트 기능을 합치고 싶습니다.
하나는 전체서브메뉴를 보여주는 스크립튼데, 출력은 되나,
마우스를 서브메뉴에 올릴시 닫쳐버리구요..
또 하나는 서브메뉴가 슬라이딩되어 내려오고 마우스 오버시 잘 작동은 되지만,
메뉴에 올리면 전체 서브메뉴가 내려오진 않습니다.
아래는 전체서브메뉴 출력만 되는 소스
-------------------------------------------------------------------
<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';
}
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();
}
}
}
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';
}
}
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>
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");
});
});
$('#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>
<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; }
* { 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 { 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; }
#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; }
#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>
.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>
<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번째 스크립트에 있는,
오버기능이 작동되었으면 좋겠습니다.
고수분들 도와주세요~ㅠ_ㅠ
댓글 1개
프로프리랜서
13년 전
죄송해요
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4230 |
 미스코리아 |
13년 전 | 1551 | |
| 4229 | 13년 전 | 1111 | ||
| 4228 | 13년 전 | 2103 | ||
| 4227 | 13년 전 | 793 | ||
| 4226 |
 Terrorboy |
13년 전 | 808 | |
| 4225 |
천국의눈믈
|
13년 전 | 622 | |
| 4224 |
visualp
|
13년 전 | 1430 | |
| 4223 |
visualp
|
13년 전 | 1041 | |
| 4222 |
visualp
|
13년 전 | 765 | |
| 4221 |
visualp
|
13년 전 | 5295 | |
| 4220 | 13년 전 | 1900 | ||
| 4219 | 13년 전 | 1141 | ||
| 4218 | 13년 전 | 638 | ||
| 4217 | 13년 전 | 9426 | ||
| 4216 | 13년 전 | 1544 | ||
| 4215 |
 CrazySnoopy |
13년 전 | 568 | |
| 4214 | 13년 전 | 558 | ||
| 4213 | 13년 전 | 1421 | ||
| 4212 |
visualp
|
13년 전 | 2004 | |
| 4211 | 13년 전 | 1549 | ||
| 4210 | 13년 전 | 806 | ||
| 4209 |
 미운오리스키 |
13년 전 | 2039 | |
| 4208 | 13년 전 | 2046 | ||
| 4207 | 13년 전 | 2997 | ||
| 4206 | 13년 전 | 1095 | ||
| 4205 |
SGFlash
|
13년 전 | 1284 | |
| 4204 | 13년 전 | 808 | ||
| 4203 | 13년 전 | 893 | ||
| 4202 | 13년 전 | 2110 | ||
| 4201 | 13년 전 | 903 | ||
| 4200 | 13년 전 | 2376 | ||
| 4199 | 13년 전 | 621 | ||
| 4198 |
visualp
|
13년 전 | 3496 | |
| 4197 |
visualp
|
13년 전 | 718 | |
| 4196 | 13년 전 | 2077 | ||
| 4195 |
미사카10777호
|
13년 전 | 3456 | |
| 4194 |
senseme
|
13년 전 | 763 | |
| 4193 | 13년 전 | 946 | ||
| 4192 | 13년 전 | 1302 | ||
| 4191 |
DreamT
|
13년 전 | 795 | |
| 4190 |
onlymilk74
|
13년 전 | 1309 | |
| 4189 | 13년 전 | 1244 | ||
| 4188 | 13년 전 | 1366 | ||
| 4187 | 13년 전 | 1100 | ||
| 4186 |
CrazySnoopy |
13년 전 | 722 | |
| 4185 | 13년 전 | 1191 | ||
| 4184 | 13년 전 | 1166 | ||
| 4183 |
visualp
|
13년 전 | 1043 | |
| 4182 |
visualp
|
13년 전 | 608 | |
| 4181 |
 Sunys |
13년 전 | 595 | |
| 4180 |
techer
|
13년 전 | 939 | |
| 4179 | 13년 전 | 516 | ||
| 4178 | 13년 전 | 3069 | ||
| 4177 | 13년 전 | 596 | ||
| 4176 | 13년 전 | 937 | ||
| 4175 | 13년 전 | 594 | ||
| 4174 |
 WEBUS |
13년 전 | 624 | |
| 4173 |
WEBUS |
13년 전 | 1849 | |
| 4172 |
WEBUS |
13년 전 | 906 | |
| 4171 | 13년 전 | 1391 | ||
| 4170 | 13년 전 | 660 | ||
| 4169 | 13년 전 | 1284 | ||
| 4168 | 13년 전 | 1769 | ||
| 4167 | 13년 전 | 807 | ||
| 4166 | 13년 전 | 1317 | ||
| 4165 |
visualp
|
13년 전 | 809 | |
| 4164 | 13년 전 | 1172 | ||
| 4163 | 13년 전 | 2600 | ||
| 4162 | 13년 전 | 652 | ||
| 4161 |
onlymilk74
|
13년 전 | 4782 | |
| 4160 | 13년 전 | 672 | ||
| 4159 | 13년 전 | 866 | ||
| 4158 | 13년 전 | 704 | ||
| 4157 | 13년 전 | 3389 | ||
| 4156 | 13년 전 | 501 | ||
| 4155 | 13년 전 | 835 | ||
| 4154 | 13년 전 | 1137 | ||
| 4153 | 14년 전 | 1140 | ||
| 4152 | 14년 전 | 630 | ||
| 4151 | 14년 전 | 1237 | ||
| 4150 | 14년 전 | 719 | ||
| 4149 | 14년 전 | 612 | ||
| 4148 |
쉽다zzz
|
14년 전 | 2252 | |
| 4147 | 14년 전 | 947 | ||
| 4146 | 14년 전 | 574 | ||
| 4145 | 14년 전 | 575 | ||
| 4144 | 14년 전 | 1609 | ||
| 4143 | 14년 전 | 764 | ||
| 4142 | 14년 전 | 1167 | ||
| 4141 | 14년 전 | 1156 | ||
| 4140 |
미운오리스키 |
14년 전 | 1765 | |
| 4139 |
visualp
|
14년 전 | 1843 | |
| 4138 |
visualp
|
14년 전 | 1113 | |
| 4137 | 14년 전 | 768 | ||
| 4136 | 14년 전 | 706 | ||
| 4135 | 14년 전 | 957 | ||
| 4134 | 14년 전 | 1113 | ||
| 4133 | 14년 전 | 2523 | ||
| 4132 | 14년 전 | 574 | ||
| 4131 | 14년 전 | 889 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기