fix : 쇼핑몰 모바일 - 햄버거메뉴 탭바 개선 및 이전 (Include.jsp → TabBar.jsp)
This commit is contained in:
이대환
@@ -870,223 +870,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 햄버거 메뉴 모달 -->
|
|
||||||
<div class="microModal microFullMenu" id="hamburger-menu" aria-hidden="true">
|
|
||||||
<div class="microModal__overlay" tabindex="-1">
|
|
||||||
<div class="microModal__container" role="dialog" aria-modal="true">
|
|
||||||
<div class="microModal__body" id = "hambergerModal">
|
|
||||||
<div class="microModal__top">
|
|
||||||
<h2 class="microModal__title">
|
|
||||||
전체메뉴
|
|
||||||
</h2>
|
|
||||||
<button type="button" class="microModal__close" onclick="closeModal('hamburger-menu');"></button>
|
|
||||||
</div>
|
|
||||||
<div class="microModal__content">
|
|
||||||
<div class="fullMenu">
|
|
||||||
<c:if test="${not isAuthenticated}">
|
|
||||||
<div class="sub-box">
|
|
||||||
<div class="fullMenu__top">
|
|
||||||
<button type="button" class="btn md outline" onclick="fn_move_login();">로그인</button>
|
|
||||||
<button type="button" class="btn md theme" onclick="location.href='/sopmal/mbr/selectJoinGuidance'; setTopMenuCode(); ">회원가입</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
<div class="sub-box">
|
|
||||||
<div class="fullMenu__top">
|
|
||||||
<div class="member-rank-summary">
|
|
||||||
<div class="textBtns">
|
|
||||||
<a href="/index" class="textBtns__btn">홈으로</a>
|
|
||||||
<a href="/sopmal/ordr/selectSpbk" class="textBtns__btn">장바구니</a>
|
|
||||||
<c:choose>
|
|
||||||
<c:when test="${isAuthenticated}"><%--회원일시--%>
|
|
||||||
<a href="/sopmal/mpage/mbr/selectMpageMainInqire" class="textBtns__btn">마이페이지</a>
|
|
||||||
<a href="/sopmal/logout" class="textBtns__btn">로그아웃</a>
|
|
||||||
</c:when>
|
|
||||||
<c:otherwise><%--비회원일시--%>
|
|
||||||
<a href="/sopmal/mpage/ordr/selectMbrOrdrListInqire" class="textBtns__btn">주문조회</a>
|
|
||||||
</c:otherwise>
|
|
||||||
</c:choose>
|
|
||||||
</div>
|
|
||||||
<c:if test = "${isAuthenticated}">
|
|
||||||
<div class="member-rank-summary__top">
|
|
||||||
<div class="member-rank-summary__icon" id = "hambergerGradImg"></div>
|
|
||||||
<a href="/sopmal/mpage/mbr/selectMpageMainInqire" class="member-rank-summary__user">
|
|
||||||
<span class="member-rank-summary__rank" id = "hambergerGradNm"></span>
|
|
||||||
<span class="member-rank-summary__name" id = "hambergermbrNm"></span>
|
|
||||||
</a>
|
|
||||||
<a class="member-rank-summary__benefit-link" href="/sopmal/mpage/bnef/selectMbrGradInqire">등급별 혜택</a>
|
|
||||||
</div>
|
|
||||||
<div class="member-rank-summary__bottom">
|
|
||||||
<div class="member-rank-summary__summary">
|
|
||||||
<a href="/sopmal/mpage/bnef/selectMlgDtlsInqireForm" class="member-rank-summary__summary-item">
|
|
||||||
<img src="/mobile/images/icon_member-rank-mileage.png"
|
|
||||||
alt="">
|
|
||||||
<div class="member-rank-summary__summary-description">
|
|
||||||
<span class="member-rank-summary__summary-name">마일리지</span>
|
|
||||||
<p class="member-rank-summary__summary-numberContainer">
|
|
||||||
<span
|
|
||||||
class="member-rank-summary__summary-number comma"
|
|
||||||
id = "hambergerMbrMlgAmt"></span>
|
|
||||||
<span
|
|
||||||
class="member-rank-summary__summary-numberUnit">원</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="/sopmal/mpage/bnef/selectCouponDtlsForm" class="member-rank-summary__summary-item">
|
|
||||||
<img src="/mobile/images/icon_member-rank-coupon.png" alt="">
|
|
||||||
<div class="member-rank-summary__summary-description">
|
|
||||||
<span class="member-rank-summary__summary-name">쿠폰</span>
|
|
||||||
<p class="member-rank-summary__summary-numberContainer">
|
|
||||||
<span class="member-rank-summary__summary-number comma" id = "hambergerCoupnCnt"></span>
|
|
||||||
<span
|
|
||||||
class="member-rank-summary__summary-numberUnit">장</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="/sopmal/mpage/ordr/selectWslistInqireForm" class="member-rank-summary__summary-item">
|
|
||||||
<img src="/mobile/images/icon_member-rank-wishlist.png" alt="">
|
|
||||||
<div class="member-rank-summary__summary-description">
|
|
||||||
<span class="member-rank-summary__summary-name">위시리스트</span>
|
|
||||||
<p class="member-rank-summary__summary-numberContainer">
|
|
||||||
<span class="member-rank-summary__summary-number comma"
|
|
||||||
id = "hambergerWslistCnt"></span>
|
|
||||||
<span
|
|
||||||
class="member-rank-summary__summary-numberUnit">개</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sub-box">
|
|
||||||
<div class="menu_navigation_wrap">
|
|
||||||
<!-- 카테고리 -->
|
|
||||||
<ul class="side_menu accordion">
|
|
||||||
<c:if test="${!empty sopmallInfo}">
|
|
||||||
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
|
|
||||||
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.menuExpsrAt eq 'Y'}">
|
|
||||||
<c:if test="${topMenuList.rnum eq '2'}">
|
|
||||||
<c:set var="mDpth3Chk" value="N"/>
|
|
||||||
<li class="isSub list">
|
|
||||||
<div class="isSubDv">
|
|
||||||
<a href="<c:out value="${topMenuList.url}"/>" class="depth"><c:out value ="${topMenuList.ctgryNm}"/><em class="visually-hidden">상세내용닫기</em></a>
|
|
||||||
<a href="<c:out value="${topMenuList.url}"/>" class="moer"></a>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${'3' eq topMenuList.rnum}">
|
|
||||||
<!-- 메뉴 하위가 메뉴인 경우-->
|
|
||||||
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
|
|
||||||
<c:set var="mDpth3Chk" value="Y"/>
|
|
||||||
<ul class="view">
|
|
||||||
</c:if>
|
|
||||||
<li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${topMenuList.rnum < 4}">
|
|
||||||
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
|
|
||||||
</c:if>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
|
|
||||||
|
|
||||||
<c:if test="${'3' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
|
|
||||||
<c:if test="${'Y' eq mDpth3Chk}">
|
|
||||||
</ul>
|
|
||||||
</c:if>
|
|
||||||
</li>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${'2' eq topMenuList.rnum && '0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
|
|
||||||
</li>
|
|
||||||
</c:if>
|
|
||||||
</c:if>
|
|
||||||
</c:forEach>
|
|
||||||
</c:if>
|
|
||||||
</ul>
|
|
||||||
<!-- 최근 본 상품(SIDE) -->
|
|
||||||
<div class="recently_side" id = "recentlySite">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="sub-box">
|
|
||||||
<div class="fullMenu__miscLinks">
|
|
||||||
<h5 class="fullMenu__miscLinks__title">서비스</h5>
|
|
||||||
<ul class="fullMenu__miscLinks__list">
|
|
||||||
<li>
|
|
||||||
<a href="/sopmal/csc/selectCscMainForm" class="fullMenu__miscLinks__link">고객센터</a>
|
|
||||||
</li>
|
|
||||||
<c:if test="${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
|
|
||||||
<li><a href="/sopmal/main/selectStrListForm" class="fullMenu__miscLinks__link">매장안내</a></li>
|
|
||||||
</c:if>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<c:if test = "${sopmallInfo.shopInfo.cscTelnbOrdrPosblAt eq 'Y'}">
|
|
||||||
<div class="sub-box">
|
|
||||||
<div class="mainNotice__customerContact mainNotice__customerContact--moreInfo">
|
|
||||||
<i class="icon icon_notice03"></i>
|
|
||||||
<div class="mainNotice__customerContact__right">
|
|
||||||
<h4 class="notice__title customer-service">고객센터</h4>
|
|
||||||
<span class="notice__number"><c:out value="${sopmallInfo.shopInfo.cscTelnb}"/></span>
|
|
||||||
<p class="notice__paragraph">
|
|
||||||
<span class="notice__text01"><c:out value="${sopmallInfo.shopInfo.cscWkdayWorkTme}"/></span>
|
|
||||||
<span class="notice__text02">(<c:out value="${sopmallInfo.shopInfo.cscLunchTme}"/>)</span>
|
|
||||||
<br>
|
|
||||||
<span class="notice__text03"><c:out value="${sopmallInfo.shopInfo.cscRstde}"/></span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</c:if>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
////햄버거 메뉴 관련 스크립트
|
|
||||||
// 좌측 메뉴 클릭시 해당 메뉴 보여주기
|
|
||||||
$('.fullMenu__menu__btn').on('click', function () {
|
|
||||||
$(this).addClass('current');
|
|
||||||
$(this).closest('li').siblings().find('.fullMenu__menu__btn').removeClass('current');
|
|
||||||
var index = $(this).closest('li').index() - 1; // 전체 메뉴 버튼을 뺀 나머지 버튼의 인덱스
|
|
||||||
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').eq(index).siblings().hide();
|
|
||||||
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').eq(index).show();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 전체 메뉴 클릭시 전체 메뉴 보여주기
|
|
||||||
$('.fullMenuAll').on('click', function () {
|
|
||||||
$(this).addClass('current');
|
|
||||||
$(this).closest('li').siblings().find('.fullMenu__menu__btn').removeClass('current');
|
|
||||||
$(this).closest('.fullMenu__content').find('.fullMenu__itemSection').show();
|
|
||||||
});
|
|
||||||
|
|
||||||
//
|
|
||||||
$('.hamburgerTabBtn').on('click', function () {
|
|
||||||
$('.hamburgerTabBtn').removeClass('active');
|
|
||||||
$(this).addClass('active');
|
|
||||||
var index = $(this).closest('li').index();
|
|
||||||
$('.fullMenu__content').removeClass('active');
|
|
||||||
$('.fullMenu__content').eq(index).addClass('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
MicroModal.init({
|
|
||||||
disableScroll: true,
|
|
||||||
awaitCloseAnimation: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".menu_navigation_wrap .depth").on('click', function () {
|
|
||||||
/*하위레벨 없을 시 페이지 이동*/
|
|
||||||
if ($(this).closest(".isSub").find(".view").length === 0) {
|
|
||||||
const href = $(this).attr("href");
|
|
||||||
location.href = href;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<%--광고스크립트 정보--%>
|
<%--광고스크립트 정보--%>
|
||||||
<input type="hidden" id="adScriptDeviceTy" value="${deviceType}"/>
|
<input type="hidden" id="adScriptDeviceTy" value="${deviceType}"/>
|
||||||
<% String adscriptMbrId = "";
|
<% String adscriptMbrId = "";
|
||||||
|
|||||||
@@ -58,6 +58,7 @@
|
|||||||
<div class="fullMenu__top">
|
<div class="fullMenu__top">
|
||||||
<div class="member-rank-summary">
|
<div class="member-rank-summary">
|
||||||
<div class="textBtns">
|
<div class="textBtns">
|
||||||
|
<a href="/index" class="textBtns__btn">홈으로</a>
|
||||||
<a href="/sopmal/ordr/selectSpbk" class="textBtns__btn">장바구니</a>
|
<a href="/sopmal/ordr/selectSpbk" class="textBtns__btn">장바구니</a>
|
||||||
<c:choose>
|
<c:choose>
|
||||||
<c:when test="${isAuthenticated}"><%--회원일시--%>
|
<c:when test="${isAuthenticated}"><%--회원일시--%>
|
||||||
@@ -129,70 +130,80 @@
|
|||||||
<ul class="side_menu accordion">
|
<ul class="side_menu accordion">
|
||||||
<c:if test="${!empty sopmallInfo}">
|
<c:if test="${!empty sopmallInfo}">
|
||||||
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
|
<c:forEach var="topMenuList" items="${sopmallInfo.menuList}" varStatus="status">
|
||||||
<c:if test="${topMenuList.ctgryDvCd eq '01' && topMenuList.gnbExpsrAt eq 'Y'}">
|
<c:if test="${topMenuList.ctgryDvCd eq '01'}">
|
||||||
|
<c:if test="${topMenuList.gnbExpsrAt eq 'Y'}">
|
||||||
<c:if test="${topMenuList.rnum eq '2'}">
|
<c:if test="${topMenuList.rnum eq '2'}">
|
||||||
|
<c:set var="mDpth3Chk" value="N"/>
|
||||||
<li class="isSub list">
|
<li class="isSub list">
|
||||||
<div class="isSubDv">
|
<div class="isSubDv">
|
||||||
<a href="<c:out value="${topMenuList.url}"/>" class="depth"><c:out value ="${topMenuList.ctgryNm}"/><em class="visually-hidden">상세내용닫기</em></a>
|
<a href="<c:out value="${topMenuList.url}"/>" class="depth"><c:out value ="${topMenuList.ctgryNm}"/><em class="visually-hidden">상세내용닫기</em></a>
|
||||||
<a href="<c:out value="${topMenuList.url}"/>" class="moer"></a>
|
<a href="<c:out value="${topMenuList.url}"/>" class="moer"></a>
|
||||||
</div>
|
</div>
|
||||||
</c:if>
|
</c:if>
|
||||||
<c:if test="${'3' eq topMenuList.rnum}">
|
<c:if test="${topMenuList.rnum eq '3'}">
|
||||||
<!-- 메뉴 하위가 메뉴인 경우-->
|
<!-- 메뉴 하위가 메뉴인 경우-->
|
||||||
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
|
<c:if test="${chkUpperMenuCd ne topMenuList.upperCtgryId}">
|
||||||
|
<c:set var="mDpth3Chk" value="Y"/>
|
||||||
<ul class="view">
|
<ul class="view">
|
||||||
</c:if>
|
</c:if>
|
||||||
<li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
|
<li><a href='<c:out value="${topMenuList.url}"/>'><c:out value ="${topMenuList.ctgryNm}"/></a></li>
|
||||||
<c:if test="${'0' eq topMenuList.nextDepth3 && '0' eq topMenuList.nextDepth2}">
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</c:if>
|
|
||||||
</c:if>
|
</c:if>
|
||||||
<c:if test="${topMenuList.rnum < 4}">
|
<c:if test="${topMenuList.rnum < 4}">
|
||||||
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
|
<c:set var="chkUpperMenuCd" value="${topMenuList.upperCtgryId}"/>
|
||||||
</c:if>
|
</c:if>
|
||||||
</c:if>
|
</c:if>
|
||||||
|
|
||||||
|
<c:if test="${topMenuList.nextDepth3 eq '0' && topMenuList.nextDepth2 eq '0'}">
|
||||||
|
<c:if test="${topMenuList.rnum eq '2'}">
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
<c:if test="${topMenuList.rnum eq '3'}">
|
||||||
|
<c:if test="${mDpth3Chk eq 'Y'}">
|
||||||
|
</ul>
|
||||||
|
</c:if>
|
||||||
|
</li>
|
||||||
|
</c:if>
|
||||||
|
</c:if>
|
||||||
|
</c:if>
|
||||||
</c:forEach>
|
</c:forEach>
|
||||||
</c:if>
|
</c:if>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- 최근 본 상품(SIDE) -->
|
<!-- 최근 본 상품(SIDE) -->
|
||||||
<div class="recently_side" id = "recentlySite">
|
<div class="recently_side" id = "recentlySite">
|
||||||
<!-- <div class="swiper recentlySide-swiper"> -->
|
<%--<div class="swiper recentlySide-swiper">
|
||||||
<!-- <div class="swiper-wrapper" id="recentlySite"> -->
|
<div class="swiper-wrapper" id="recentlySite">
|
||||||
|
|
||||||
<!-- <div class="swiper-slide recentlySide__image"> -->
|
<div class="swiper-slide recentlySide__image">
|
||||||
<!-- <a href=""> -->
|
<a href="">
|
||||||
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
<img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명">
|
||||||
<!-- </a> -->
|
</a>
|
||||||
<!-- </div> -->
|
</div>
|
||||||
<!-- <div class="swiper-slide recentlySide__image"> -->
|
<div class="swiper-slide recentlySide__image">
|
||||||
<!-- <a href=""> -->
|
<a href="">
|
||||||
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
<img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명">
|
||||||
<!-- </a> -->
|
</a>
|
||||||
<!-- </div> -->
|
</div>
|
||||||
<!-- <div class="swiper-slide recentlySide__image"> -->
|
<div class="swiper-slide recentlySide__image">
|
||||||
<!-- <a href=""> -->
|
<a href="">
|
||||||
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
<img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명">
|
||||||
<!-- </a> -->
|
</a>
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
||||||
<!-- <a href=""> -->
|
|
||||||
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
||||||
<!-- </a> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- <div class="swiper-slide recentlySide__image"> -->
|
|
||||||
<!-- <a href=""> -->
|
|
||||||
<!-- <img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명"> -->
|
|
||||||
<!-- </a> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- <div class="swiper-pagination theme-pagination"></div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper-slide recentlySide__image">
|
||||||
|
<a href="">
|
||||||
|
<img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide recentlySide__image">
|
||||||
|
<a href="">
|
||||||
|
<img src="/mobile/images/상품이미지01.png" alt="해당 이미지에 대한 설명">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination theme-pagination"></div>
|
||||||
|
</div>--%>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sub-box">
|
<div class="sub-box">
|
||||||
@@ -202,6 +213,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<a href="/sopmal/csc/selectCscMainForm" class="fullMenu__miscLinks__link">고객센터</a>
|
<a href="/sopmal/csc/selectCscMainForm" class="fullMenu__miscLinks__link">고객센터</a>
|
||||||
</li>
|
</li>
|
||||||
|
<c:if test="${sopmallInfo.shopInfo.sopmalCd eq 'NC' && sopmallInfo.shopInfo.sopmalCd eq 'CH'}"><%--뉴트리코어,참다한만--%>
|
||||||
|
<li><a href="/sopmal/main/selectStrListForm" class="fullMenu__miscLinks__link">매장안내</a></li>
|
||||||
|
</c:if>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -268,6 +282,5 @@
|
|||||||
location.href = href;
|
location.href = href;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user