메뉴 오버시 노출되는 스크립트 수정부탁합니다.
관련링크
https://hanammall.co.kr/
166회 연결
본문
cafe24쇼핑몰이구요 일반페이지 추가로 대메뉴에 하위메뉴 노출을 할려고 합니다.
대메뉴(마을소개) 마우스오버 하면 노출되고 아웃하면 사라지게 하고싶은데 현재 실행하면 바로 노출된 상태에서 작동을 안합니다.
<script>
/**
* 카테고리 마우스 오버 이미지
* 카테고리 서브 메뉴 출력
*/
$(document).ready(function(){
var methods = {
aCategory : [],
aSubCategory : {},
get: function()
{
$.ajax({
url : '/exec/front/Product/SubCategory',
dataType: 'json',
success: function(aData) {
if (aData == null || aData == 'undefined') return;
for (var i=0; i<aData.length; i++)
{
var sParentCateNo = aData[i].parent_cate_no;
if (!methods.aSubCategory[sParentCateNo]) {
methods.aSubCategory[sParentCateNo] = [];
}
methods.aSubCategory[sParentCateNo].push( aData[i] );
}
}
});
},
getParam: function(sUrl, sKey) {
var aUrl = sUrl.split('?');
var sQueryString = aUrl[1];
var aParam = {};
if (sQueryString) {
var aFields = sQueryString.split("&");
var aField = [];
for (var i=0; i<aFields.length; i++) {
aField = aFields[i].split('=');
aParam[aField[0]] = aField[1];
}
}
return sKey ? aParam[sKey] : aParam;
},
show: function(overNode, iCateNo) {
if (methods.aSubCategory[iCateNo].length == 0) {
return;
}
var aHtml = [];
aHtml.push('<ul>');
$(methods.aSubCategory[iCateNo]).each(function() {
aHtml.push('<li><a href="/'+this.design_page_url+this.param+'">'+this.name+'</a></li>');
});
aHtml.push('</ul>');
var offset = $(overNode).offset();
$('<div class="sub-category"></div>')
.appendTo(overNode)
.html(aHtml.join(''))
.find('li').mouseover(function(e) {
$(this).addClass('over');
}).mouseout(function(e) {
$(this).removeClass('over');
});
},
close: function() {
$('.sub-category').remove();
}
};
methods.get();
$('.xans-layout-category li').mouseenter(function(e) {
var $this = $(this).addClass('on'),
iCateNo = Number(methods.getParam($this.find('a').attr('href'), 'cate_no'));
if (!iCateNo) {
return;
}
methods.show($this, iCateNo);
}).mouseleave(function(e) {
$(this).removeClass('on');
methods.close();
});
});
</script>
</head>
<body>
<style>
li{padding: 0; margin: 0; list-style: none;}
.gnbArea {
position: relative;
width: 100%;
height: 60px;
background: #ffb900;
z-index: 100;
}
#category{margin: 0 auto;
padding: 0;
width: 1218px;
height: 60px;}
.position {}
.position > ul {}
.position > ul > li {float:left; position:relative; z-index:10; width:170px; text-align:center;}
.position > ul > li > a {display:block; border-right:1px solid #fff; line-height:60px; text-align:center; font-size:18px; font-weight:bold; text-decoration:none; color:#000; -ms-filter: "progid:DXImageTransform.Microsoft.glow(color='#fff',strength=2)"; /* 대메뉴 */
filter: progid:DXImageTransform.Microsoft.glow(color='#fff',strength=2); text-shadow: 0 1px 1px #fff; font-family: 'Noto Sans KR', sans-serif; }
.position > ul > li > a:hover,
.position > ul > li.selected > a,
.position > ul > li.on > a { font-size:18px; font-weight:bold; color:#F60;}
.position > ul > .btn {float:left; width:;/*170px;*/ line-height:60px; z-index:30; position:relative; list-style:none; background:#a88382; padding:0 20px;}
.position > ul > .btn li {/*float:left;*/ font-size:18px; font-family: 'Noto Sans KR', sans-serif; color:#fff; padding-left:50px; color:#FFF; background: url('/img/ico2.png') no-repeat 0 center;}
.sub-category { position:absolute; top:60px; left:0; width:168px; border-left:2px solid #ffb900; border-right:2px solid #ffb900; /*border-top:1px solid #aeaeae;*/ border-bottom:2px solid #ffb900; background:#fff; }
.sub-category ul {}
.sub-category li { padding:0 10px;}
.sub-category li:first-child { border-left:0; }
.sub-category li:first-child a { border-top-color:#fff; }
.sub-category a { display:block; padding:12px 0; border-top:1px solid #d8d8d8; font-size:12px; color:#2e2e2e; text-decoration:none; }
.sub-category a:hover,
.sub-category li.selected a { color:#008bcc; }
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}
</style>
<div class="gnbArea">
<!-- navi -->
<div id="category" module="Layout_category">
<!--@css(/css/module/layout/category.css)-->
<!--@js(/js/module/layout/category.js)-->
<div class="position">
<ul>
<li><a href="/shopinfo/company.html">마을소개</a>
<div class="sub-category">
<ul>
<li><a href="#">법인소개</a></li>
<li><a href="#">시설안내</a></li>
<ul>
</div>
</li>
<li><a href="/shopinfo/facInfo.html">시설안내</a></li>
<li><a href="/product/list.html{$param}">메뉴</a></li>
<li><a href="/product/list.html{$param}">메뉴</a></li>
<li><a href="/product/list.html{$param}">메뉴</a></li>
</ul>
</div>
</div>
<!-- //navi -->
<!-- 전체보기메뉴 -->
<!-- //전체보기메뉴 -->
</div>
답변 1
<style>
...
.sub-category a:hover,
.sub-category li.selected a { color:#008bcc; }
.sub-category { display: none; }
.position > ul > li:hover .sub-category {
display: block;
}
@font-face {
...
</style>
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.