마우스오버시 4단 전체메뉴 질문입니다..ㅠㅠㅠㅠ
본문
예전에 그누보드5 스킨방에 빨간소금쟁이님께서 올려주신 [2단 전체 메인 메뉴]소스를 수정해서 그누보드 4에 넣어보았더니 IE 10, 11에서는 나오는데 9이하 버전에서는 작동이 되지 않습니다. ㅠ ㅠ
IE 9이하에서도 작동되게 하는 방법이 있을까요 ㅠ ㅠ?
빨간소금쟁이님의 원본글은 링크로 걸어놓겠습니다..
*** menu.php ****
<?
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<link rel="stylesheet" href="<?=$g4['path']?>/skin/nav/redsalt/style_redsalt.css" type="text/css">
<script type="text/javascript">
//네비게이션 레이아웃 적용
$(document).ready(function(){
$("nav.nav a").mouseenter(function() {
if($("div#subBox").css("display") != "block"){
$("div#subBox").slideDown();
$("ul.depth2").slideDown();
$("ul.depth3").slideDown();
}
});
$("div.navBox").mouseleave(function() {
$("div#subBox").hide();
$("ul.depth2").hide();
$("ul.depth3").hide();
});
})
// 네비게이션 서브메뉴 배경 세로사이즈 적용
$(document).ready(function(){
var heights = $("ul.depth2").map(function ()
{
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$("div.subBox").css('height', maxHeight + 30);
});
</script>
<div class="navi">
<div class="navBox">
<div id="subBox" class="subBox"></div>
<div class="navi">
<nav class="nav">
<ul class="depth1">
<li class="gnb1">
<a href="/" target="_self" class="logo"><img src="<?=$g4['path']?>/images/menu/logo.png" alt="로고" /></a>
<a href="/introduction/01.php" target="_self" class="nav_1da">교육원소개</a>
<a href="/tour/01.php" target="_self" class="nav_1da">주변관광안내</a>
<a href="/minwon/01.php" target="_self" class="nav_1da">전자민원창구</a>
<a href="/facil_info/01.php" target="_self" class="nav_1da">교육원시설안내</a>
<a href="/facil_use/01.php" target="_self" class="nav_1da">교육원시설 이용/예약</a>
<a href="/community/01.php" target="_self" class="nav_1da">열린마당</a>
<ul class="depth2">
<li class="nav_2da"><a href="/community/01.php" target="_self" class="nav_2da">열린마당</a>
<ul class="depth3">
<li class="nav_3da"><a href="/community/01.php" target="_self" class="nav_3da">공지사항</a></li>
<li class="nav_3da"><a href="/community/02.php" target="_self" class="nav_3da">교육원 활동</a></li>
<li class="nav_3da"><a href="/community/03.php" target="_self" class="nav_3da">교육재정정보</a></li>
<li class="nav_3da"><a href="/community/04.php" target="_self" class="nav_3da">묻고답하기</a></li>
<li class="nav_3da"><a href="/community/05.php" target="_self" class="nav_3da">교육원 식단표</a></li>
<li class="nav_3da"><a href="/community/06.php" target="_self" class="nav_3da">설문조사</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/facil_use/01.php" target="_self" class="nav_2da">교육원시설 이용/예약</a>
<ul class="depth3">
<li class="nav_3da"><a href="/facil_use/01.php" target="_self" class="nav_3da">이용안내</a></li>
<li class="nav_3da"><a href="/facil_use/02.php" target="_self" class="nav_3da">객실예약</a></li>
<li class="nav_3da"><a href="/facil_use/03.php" target="_self" class="nav_3da">에약조회 및 취소</a></li>
<li class="nav_3da"><a href="/facil_use/04.php" target="_self" class="nav_3da">예약문의</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/facil_info/01.php" target="_self" class="nav_2da">교육원시설안내</a>
<ul class="depth3">
<li class="nav_3da"><a href="/facil_info/01.php" target="_self" class="nav_3da">교육원 시설현황</a></li>
<li class="nav_3da"><a href="/facil_info/02.php" target="_self" class="nav_3da">시설배치도</a></li>
<li class="nav_3da"><a href="/facil_info/03.php" target="_self" class="nav_3da">VR가상체험</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/minwon/01.php" target="_self" class="nav_2da">전자민원창구</a>
<ul class="depth3">
<li class="nav_3da"><a href="/minwon/01.php" target="_self" class="nav_3da">민원사무처리안내</a></li>
<li class="nav_3da"><a href="/minwon/02.php" target="_self" class="nav_3da">FAX민원발급</a></li>
<li class="nav_3da"><a href="/minwon/0301.php" target="_self" class="nav_3da">전자민원창구</a></li>
<ul class="depth4">
<li class="nav_4da"><a href="/minwon/0301.php" target="_self" class="nav_4da">- 인터넷민원(Home-edu)</a></li>
<li class="nav_4da"><a href="/minwon/0302.php" target="_self" class="nav_4da">- 무인민원발급서비스</a></li>
<li class="nav_4da"><a href="/minwon/0303.php" target="_self" class="nav_4da">- 민원24</a></li>
</ul>
<li class="nav_3da"><a href="/minwon/04.php" target="_self" class="nav_3da">민원서식자료실</a></li>
<li class="nav_3da"><a href="/minwon/05.php" target="_self" class="nav_3da">교육행정서비스헌장</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/minwon/01.php" target="_self" class="nav_2da">전자민원창구</a>
<ul class="depth3">
<li class="nav_3da"><a href="/minwon/0601.php" target="_self" class="nav_3da">행정정보공개</a></li>
<ul class="depth4">
<li class="nav_4da"><a href="/minwon/0601.php" target="_self" class="nav_4da">- 정보공개안내</a></li>
<li class="nav_4da"><a href="/minwon/0601.php" target="_self" class="nav_4da">- 관련법령/청구서식</a></li>
<li class="nav_4da"><a href="/minwon/0601.php" target="_self" class="nav_4da">- 정보공개청구</a></li>
<li class="nav_4da"><a href="/minwon/0601.php" target="_self" class="nav_4da">- 주요문서목록</a></li>
</ul>
<li class="nav_3da"><a href="/minwon/0701.php" target="_self" class="nav_3da">클린신고센터</a></li>
<ul class="depth4">
<li class="nav_4da"><a href="/minwon/0701.php" target="_self" class="nav_4da">- 포상제도안내</a></li>
<li class="nav_4da"><a href="/minwon/0702.php" target="_self" class="nav_4da">- 부정부패신고센터</a></li>
<li class="nav_4da"><a href="/minwon/0703.php" target="_self" class="nav_4da">- 교육예산정보(낭비신고)</a></li>
</ul>
<li class="nav_3da"><a href="/minwon/08.php" target="_self" class="nav_3da">110수화(화상)/채팅상담</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/tour/01.php" target="_self" class="nav_2da">주변관광안내</a>
<ul class="depth3">
<li class="nav_3da"><a href="/tour/01.php" target="_self" class="nav_3da">제주관광안내</a></li>
</ul>
</li>
<li class="nav_2da"><a href="/introduction/01.php" target="_self" class="nav_2da">교육원소개</a>
<ul class="depth3">
<li class="nav_3da"><a href="/introduction/01.php" target="_self" class="nav_3da">교육원 안내</a></li>
<li class="nav_3da"><a href="/introduction/02.php" target="_self" class="nav_3da">인사말</a></li>
<li class="nav_3da"><a href="/introduction/03.php" target="_self" class="nav_3da">연혁</a></li>
<li class="nav_3da"><a href="/introduction/04.php" target="_self" class="nav_3da">조직/업무안내</a></li>
<li class="nav_3da"><a href="/introduction/05.php" target="_self" class="nav_3da">오시는길</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
*** style_redsalt.css ****
/* 상단메뉴 적용 */
#hd { z-index:5 !important; }
.navi { position:relative; z-index:15; margin:0; height:60px;background:#0c74bc;}
.navBox { position:absolute; z-index:15; width:100%;}
.navBox:after {display:block;visibility:hidden;clear:both;}
.nav { position:absolute; z-index:15; top:0px; left:50%; margin-left:-50%; width:1000px; height:60px;}
.nav ul.depth1 {z-index:10;}
.nav ul.depth1:after {display:block; visibility:hidden; clear:both; content:""; }
.nav ul.depth1 li.gnb1 { position:relative; text-align:left; display:inline; width:1000px; margin:0 auto;}
.logo {display:block; float:left; margin-left:-30px;}
.nav_1da {display:block; float:right; font-weight:bold; height:38px; padding:0 20px 0 0; line-height:2.95em; font-size:14px; color:#FFF !important; text-decoration:none; }
.nav_1da:focus, .nav_1da:hover {text-decoration:none; font-size:14px; color:#ff8b0f !important; }
.subBox { position:absolute; z-index:15; width:1000px; height:307px; top:60px; background-color:#fff; border:2px solid #0c74bc; display:none; }
.subBox:after {display:block;visibility:hidden;clear:both;content:""}
.nav ul.depth1 ul.depth2 { position:absolute; width:950px; display:none; top:65px; padding:inherit !important ; margin-left:-6px; list-style:none; }
.nav ul.depth1 ul.depth2 li {display:block !important; width:158px;}
.nav_2da {display:block !important; float:left !important; text-align:left !important; line-height:40px; font-size:14px; color:#2383d2 !important; font-weight:bold;}
.nav_2da:focus, .nav_2da:hover {text-decoration:none;}
.nav ul.depth1 ul.depth2 ul.depth3 { position:relative; width:158px; display:block !important; padding:inherit !important;}
.nav ul.depth1 ul.depth2 ul.depth3 li {display:block !important;}
.nav_3da {display:block !important; float:left; width:188px; height:20px; text-align:left; line-height:22px; font-size:12px; text-decoration:none; color:#666 !important; font-weight:bold; clear:both;}
.nav_3da:focus, .nav_3da:hover {text-decoration:none; color:2383d2 !important;}
.nav ul.depth1 ul.depth2 ul.depth3 ul.depth4 { position:relative; width:158px; display:block !important; padding:inherit !important; }
.nav ul.depth1 ul.depth2 ul.depth3 ul.depth4 li { display:block !important; clear:both;}
.nav_4da {display:block !important; float:left; width:158px; text-align:left; line-height:18px !important; font-size:11px; text-decoration:none; font-weight:normal; color:#666 !important; clear:both; padding-left:3px;}
.nav_4da:focus, .nav_4da:hover {text-decoration:none; color:2383d2 !important;}
*** jquery.iframe-auto-height ***
/*jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
/*global window, console, jQuery, setTimeout */
/*
Plugin: iframe autoheight jQuery Plugin
Version: 1.9.3
Author and Contributors
========================================
NATHAN SMITH (http://sonspring.com/)
Jesse House (https://github.com/house9)
aaron manela (https://github.com/aaronmanela)
Hideki Abe (https://github.com/hideki-a)
Patrick Clark (https://github.com/hellopat)
ChristineP2 (https://github.com/ChristineP2)
Mmjavellana (https://github.com/Mmjavellana)
yiqing-95 (https://github.com/yiqing-95)
jcaspian (https://github.com/jcaspian)
adamjgray (https://github.com/adamjgray)
Jens Bissinger (https://github.com/dpree)
File: jquery.iframe-auto-height.plugin.js
Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing
Description: when the page loads set the height of an iframe based on the height of its contents
see README: http://github.com/house9/jquery-iframe-auto-height
*/
(function ($) {
$.fn.iframeAutoHeight = function (spec) {
var undef;
if ($.browser === undef) {
var message = [];
message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");
alert(message.join("\n"));
return $;
}
// set default option values
var options = $.extend({
heightOffset: 0,
minHeight: 0,
callback: function (newHeight) {},
animate: false,
debug: false,
diagnostics: false, // used for development only
resetToMinHeight: false,
triggerFunctions: [],
heightCalculationOverrides: []
}, spec);
// logging
function debug(message) {
if (options.debug && options.debug === true && window.console) {
console.log(message);
}
}
// not used by production code
function showDiagnostics(iframe, calledFrom) {
debug("Diagnostics from '" + calledFrom + "'");
try {
debug(" " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");
debug(" " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
debug(" " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");
} catch (ex) {
// ie fails when called during for each, ok later on
// probably not an issue if called in a document ready block
debug(" unable to check in this state");
}
debug("End diagnostics -> results vary by browser and when diagnostics are requested");
}
// show all option values
debug(options);
// ******************************************************
// iterate over the matched elements passed to the plugin ; return will make it chainable
return this.each(function () {
// ******************************************************
// http://api.jquery.com/jQuery.browser/
var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];
var strategies = [];
strategies['default'] = function (iframe, $iframeBody, options, browser) {
// NOTE: this is how the plugin determines the iframe height, override if you need custom
return $iframeBody[0].scrollHeight + options.heightOffset;
};
jQuery.each(strategyKeys, function (index, value) {
// use the default strategy for all browsers, can be overridden if desired
strategies[value] = strategies['default'];
});
// override strategies if registered in options
jQuery.each(options.heightCalculationOverrides, function (index, value) {
strategies[value.browser] = value.calculation;
});
function findStrategy(browser) {
var strategy = null;
jQuery.each(strategyKeys, function (index, value) {
if (browser[value]) {
strategy = strategies[value];
return false;
}
});
if (strategy === null) {
strategy = strategies['default'];
}
return strategy;
}
// ******************************************************
// for use by webkit only
var loadCounter = 0;
// resizeHeight
function resizeHeight(iframe) {
if (options.diagnostics) {
showDiagnostics(iframe, "resizeHeight");
}
// set the iframe size to minHeight so it'll get smaller on resizes in FF and IE
if (options.resetToMinHeight && options.resetToMinHeight === true) {
iframe.style.height = options.minHeight + 'px';
}
// get the iframe body height and set inline style to that plus a little
var $body = $(iframe, window.top.document).contents().find('body');
var strategy = findStrategy($.browser);
var newHeight = strategy(iframe, $body, options, $.browser);
debug(newHeight);
if (newHeight < options.minHeight) {
debug("new height is less than minHeight");
newHeight = options.minHeight + options.heightOffset;
}
debug("New Height: " + newHeight);
if (options.animate) {
$(iframe).animate({height: newHeight + 'px'}, {duration: 500});
} else {
iframe.style.height = newHeight + 'px';
}
options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
} // END resizeHeight
// debug me
debug(this);
if (options.diagnostics) {
showDiagnostics(this, "each iframe");
}
// if trigger functions are registered, invoke them
if (options.triggerFunctions.length > 0) {
debug(options.triggerFunctions.length + " trigger Functions");
for (var i = 0; i < options.triggerFunctions.length; i++) {
options.triggerFunctions[i](resizeHeight, this);
}
}
// Check if browser is Webkit (Safari/Chrome) or Opera
if ($.browser.webkit || $.browser.opera) {
debug("browser is webkit or opera");
// Start timer when loaded.
$(this).load(function () {
var delay = 0;
var iframe = this;
var delayedResize = function () {
resizeHeight(iframe);
};
if (loadCounter === 0) {
// delay the first one
delay = 500;
} else {
// Reset iframe height to 0 to force new frame size to fit window properly
// this is only an issue when going from large to small iframe, not executed on page load
iframe.style.height = options.minHeight + 'px';
}
debug("load delay: " + delay);
setTimeout(delayedResize, delay);
loadCounter++;
});
// Safari and Opera need a kick-start.
var source = $(this).attr('src');
$(this).attr('src', '');
$(this).attr('src', source);
} else {
// For other browsers.
$(this).load(function () {
resizeHeight(this);
});
} // if browser
}); // $(this).each(function () {
}; // $.fn.iframeAutoHeight = function (options) {
}(jQuery)); // (function ($) {
