전체메뉴펼침 펼쳤을때 고정시키는 방법없을까요?? 소스첨부했어요!!
본문
익스플로에서는 전체메뉴펼침이 잘되는되요.. 메뉴에 마우스를 대면 고정하는 방법이 없을까요?
자구 왓다리 갔다리해서요.. 크롬에서도 열리면서 서브메뉴에 갔다대면은 펼침이 닫혀져버리는데..
어떻게해야되나요??
<!DOCTYPE html>
</html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<style>
body{font-family:돋움,dottum;}
a:link, a:visited, a:active {color:#5A5A5A;text-decoration:none;}
a:hover { color:#054a85; text-decoration:underline; }
img {border:0px;}
</style>
<script>
var zoomx = 100;
$(document).ready(function() {
$(".gnb").hover(
function() {
$(".snb").stop().slideDown(400);
},
function() {
$(".snb").stop().slideUp(800);
}
);
$(".snb").hover(
function() {
$(".snb").stop().slideDown(400);
},
function() {
$(".snb").stop().slideUp(800);
}
);
$(".tabBtn").hover(
function() {
$(this).children(".icon_normal").css("display","none");
$(this).children(".icon_over").css("display","block");
},
function() {
$(this).children(".icon_over").css("display","none");
$(this).children(".basic").css("display","block");
}
);
$(".tabBtn").click(
function() {
$("."+$(this).attr("tarx")).children(".icon_normal").addClass("basic");
$("."+$(this).attr("tarx")).children(".icon_over").removeClass("basic");
$(this).children(".icon_over").addClass("basic");
$(this).children(".icon_normal").removeClass("basic");
$("."+$(this).attr("tarx")).children(".icon_over").css("display","none");
$("."+$(this).attr("tarx")).children(".icon_normal").css("display","none");
$("."+$(this).attr("tarx")).children(".basic").css("display","block");
$("."+$(this).attr("tarc")).css("display","none");
$("#"+$(this).attr("tar")).css("display","block");
$("#"+$(this).attr("tarmc")).attr("href", $(this).attr("tarm"));
}
);
//class="tabBtn tabBtngroupA" tar="lastA_1" tarc="lastA_1" tarx="tabBtngroupA"
});
function body_zoomin() {
zoomx = zoomx + 10;
$("body").css("zoom",zoomx + "%");
}
function body_zoomout() {
zoomx = zoomx - 10;
$("body").css("zoom",zoomx + "%");
}
function body_zoomdef() {
zoomx = 100;
$("body").css("zoom",zoomx + "%");
}
function newWin(url,w,h) {
window.open
(url,'new_win','width='+w+',height='+h+',toolbars=no,menubars=no,scrollbars=auto');
}
</script>
<body style="margin:0; padding:0; font-size:12px; color:#656565; position:relative;zoom:1; ">
<!--top-->
<div style="float:left; width:100%; height:95px;"> <!-- 마우스 오버시 메뉴옆에 그림이 뜸 -->
<div class="gnb" style="width:1100px; height:96px; margin:0 auto;">
<h1 style="float:left; margin:0px 0 0; ">
<a href="../index.php"><img src="../images/logo.jpg" alt="로고" /></a>
</h1>
<ul style="float:right; margin:0px;margin-right:-150px; padding:0; list-style:none;">
<li style="float:left;margin-right:90px; font-size:16pt; font-weight:none;"><img src="../images/menu_top.jpg" usemap="#ImageMap4" border="0"></li>
</ul>
</div>
<!--서브메뉴-->
<div class="snb" style="z-index:1000; display:none;width:100%; height:240px; border-bottom:6px solid #1062b9; background:#f7f7f7;
position:relative;">
<div style="width:100%; height:178px; margin:0 auto;" >
<ul style="float:left; width:1100px; height:158px; margin:20px 0 0 268px; padding:0; list-style:none; color:#5a5a5a; letter-spacing:-0.07em; text-align:right;">
<li style="float:left; width:105px; height:178px; margin-left:570px; margih-right:2px;">
<ul style="width:105px; margin:0; padding:0; list-style:none; ">
<li style="margin:0 0 15px;"><a href="#"><img src="../images/menu_01.jpg" usemap="#ImageMap1" border="0"></li>
</ul>
</li>
<li style="float:left; width:105px; height:178px;margih-right:2px; margin-left:20px;">
<ul style="width:105px; margin:0; padding:0; list-style:none; ">
<li style="margin:0 0 15px;"><a href="#"><img src="../images/menu_02.jpg" usemap="#ImageMap2" border="0"></li>
</ul>
</li>
<li style="float:left; width:105px; height:178px;margih-right:2px; margin-left:20px;">
<ul style="width:105px; margin:0; padding:0; list-style:none; ">
<li style="margin:0 0 15px;"><a href="#"><img src="../images/menu_03.jpg" usemap="#ImageMap3" border="0"></li>
</ul>
</li>
</ul>
</div>
</div>
<!--서브메뉴-->
</div>
<map name="ImageMap1">
<area shape="rect" coords="33, 38, 111, 64" href="../bbs/board.php?bo_table=company&wr_id=1" target="_self">
<area shape="rect" coords="34, 66, 110, 87" href="../bbs/board.php?bo_table=history&wr_id=1" target="_self">
</map>
<map name="ImageMap2">
<area shape="rect" coords="26, 39, 114, 63" href="../bbs/board.php?bo_table=work&wr_id=1" target="_self">
<area shape="rect" coords="26, 63, 114, 89" href="../bbs/board.php?bo_table=transport&wr_id=1" target="_self">
<area shape="rect" coords="26, 89, 113, 116" href="../bbs/board.php?bo_table=install&wr_id=1" target="_self">
</map>
<map name="ImageMap3">
<area shape="rect" coords="22, 38, 177, 62" href="../bbs/board.php?bo_table=notice" target="_self">
<area shape="rect" coords="23, 66, 177, 89" href="../bbs/board.php?bo_table=contest" target="_self">
<area shape="rect" coords="23, 92, 176, 116" href="../bbs/board.php?bo_table=online" target="_self">
</map>
<map name="ImageMap4">
<area shape="rect" coords="7, 4, 110, 42" href="../bbs/board.php?bo_table=company&wr_id=1" target="_self">
<area shape="rect" coords="134, 3, 230, 43" href="../bbs/board.php?bo_table=work&wr_id=1" target="_self">
<area shape="rect" coords="257, 2, 352, 45" href="../bbs/board.php?bo_table=notice" target="_self">
<area shape="rect" coords="375, 4, 454, 45" href="../bbs/board.php?bo_table=gallery" target="_self">
</map>
</html>
답변 1
hover이 되었을 때 함수가 두개가 있죠?
아래 함수를 콤마부터 시작해 모두 삭제하세요.
예를 들어
$(".gnb").hover(
function() {
$(".snb").stop().slideDown(400);
}
);
감사합니다. 해결했습니다.~
답변을 작성하시기 전에 로그인 해주세요.