메뉴 오버시 노출되는 스크립트 수정부탁합니다. 채택완료
cafe24쇼핑몰이구요 일반페이지 추가로 대메뉴에 하위메뉴 노출을 할려고 합니다.
대메뉴(마을소개) 마우스오버 하면 노출되고 아웃하면 사라지게 하고싶은데 현재 실행하면 바로 노출된 상태에서 작동을 안합니다.
</strong></p>
<p><script>
/**
* 카테고리 마우스 오버 이미지
* 카테고리 서브 메뉴 출력
*/</p>
<p>$(document).ready(function(){</p>
<p> var methods = {
aCategory : [],
aSubCategory : {},</p>
<p> get: function()
{
$.ajax({
url : '/exec/front/Product/SubCategory',
dataType: 'json',
success: function(aData) {</p>
<p> if (aData == null || aData == 'undefined') return;
for (var i=0; i<aData.length; i++)
{
var sParentCateNo = aData[i].parent_cate_no;</p>
<p> if (!methods.aSubCategory[sParentCateNo]) {
methods.aSubCategory[sParentCateNo] = [];
}</p>
<p> methods.aSubCategory[sParentCateNo].push( aData[i] );
}
}
});
},</p>
<p> getParam: function(sUrl, sKey) {</p>
<p> var aUrl = sUrl.split('?');
var sQueryString = aUrl[1];
var aParam = {};</p>
<p> 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;
},</p>
<p>
show: function(overNode, iCateNo) {</p>
<p> if (methods.aSubCategory[iCateNo].length == 0) {
return;
}</p>
<p> 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>');</p>
<p>
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');
});
},</p>
<p> close: function() {
$('.sub-category').remove();
}
};</p>
<p> methods.get();</p>
<p>
$('.xans-layout-category li').mouseenter(function(e) {
var $this = $(this).addClass('on'),
iCateNo = Number(methods.getParam($this.find('a').attr('href'), 'cate_no'));</p>
<p> if (!iCateNo) {
return;
}</p>
<p> methods.show($this, iCateNo);
}).mouseleave(function(e) {
$(this).removeClass('on');</p>
<p> methods.close();
});
});
</script>
</head></p>
<p><body>
<style>
li{padding: 0; margin: 0; list-style: none;}</p>
<p>.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;}</p>
<p> .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; }</p>
<p>@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');
}</p>
<p></style></p>
<p>
<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></p>
<p> </ul>
</div>
</div>
<!-- //navi -->
<!-- 전체보기메뉴 -->
<!-- //전체보기메뉴 -->
</div></p>
<p><strong>
답변 1개
</p>
<p><style></p>
<p>...</p>
<p> .sub-category a:hover,
.sub-category li.selected a { color:#008bcc; }</p>
<p> </p>
<p> .sub-category { display: none; }
.position > ul > li:hover .sub-category {
display: block;
}</p>
<p> </p>
<p>@font-face {</p>
<p>...</p>
<p></style></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인