2023/11/02 퀵메뉴 수정

This commit is contained in:
subsub 2023-11-02 15:54:27 +09:00
parent 6cf6671d51
commit 1d8458a0b8
4 changed files with 51 additions and 7 deletions

View File

@ -16,3 +16,26 @@
</script>
<div class="quick_menu_wrap">
<div class="quick_title">
<p>퀵메뉴</p>
</div>
<ul class="quick_ul">
<li class="quick_li">
<a href="#none" data-tooltip="glossary_popup"><i class="icon_quickmenu_glossary"></i>용어해설</a>
</li>
<li class="quick_li">
<a href="#none"><i class="icon_quickmenu_adj_case"></i>조정사례</a>
</li>
<li class="quick_li">
<a href="#none"><i class="icon_quickmenu_apl_form"></i>조정신청</a>
</li>
<li class="quick_li">
<a href="#none"><i class="icon_quickmenu_progress_case"></i>진행상황</a>
</li>
<!-- <li class="quick_li">
<a href="#none"><i class="icon_quickmenu_fee"></i>수수료 조회</a>
</li> -->
</ul>
</div>

View File

@ -107,9 +107,9 @@ footer address p:first-child{margin-bottom: 8px;}
.error_page .error_btn button {background-color:#1b6fcd; color: #fff; padding: 8px 25px; font-size: 16px;}
/* quick menu */
.quick_menu_wrap{position:fixed;top:50%;right:8%;transform:translateY(-50%);z-index:20;}
.quick_menu_wrap{position:fixed;top:50%;right:5%;transform:translateY(-50%);z-index:20;}
.quick_menu_wrap .quick_title{width:85px;height:35px;border-radius:5px 5px 0 0;background-color:#ea5404;color:#fff;font-size:18px;font-weight:500;text-align:center;line-height:33px;margin:0 auto;}
.quick_menu_wrap .quick_ul{width:110px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.2);padding:10px 10px 20px 10px;box-sizing:border-box;}
.quick_menu_wrap .quick_ul{width:110px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.2);padding:10px 10px 20px 10px;box-sizing:border-box;background:#fff;}
.quick_menu_wrap .quick_li{font-size:16px;font-weight:400;text-align:center;letter-spacing:-0.45px;margin:0 0 10px 0;transition:all 0.15s ease-in-out;}
.quick_menu_wrap .quick_li:last-child{margin:0 0 0 0;}
.quick_menu_wrap .quick_li i{display:block;width:100%;height:50px;text-align:center;background-repeat:no-repeat;background-position:center;margin:0 0 5px 0;transition:all 0.15s ease-in-out;}
@ -125,6 +125,15 @@ footer address p:first-child{margin-bottom: 8px;}
.quick_menu_wrap .quick_li:hover .icon_quickmenu_progress_case{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_progress_case_hover.png);}
.quick_menu_wrap .quick_li:hover .icon_quickmenu_fee{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_fee_hover.png);}
@media all and (max-width: 1640px){
.quick_menu_wrap{right:2%;}
}
@media all and (max-width: 1540px){
.quick_menu_wrap{right:calc(0% - 110px);transition:all 0.15s ease-in-out;}
.quick_menu_wrap.on{right:-4px;transition:all 0.15s ease-in-out;}
.quick_menu_wrap .quick_title{position:absolute;width:30px;height:auto;top:50%;left:-30px;transform:translateY(-50%);line-height:1;padding:20px 0;border-radius:10px 0 0 10px;}
}
@media all and (max-width: 1280px){
/* header */

View File

@ -81,6 +81,17 @@ $(document).ready(function () {
/* ie는 readonly를 지원하지 않아서 css 적용 */
$("input[readonly='']").addClass("read-only");
/* //ie는 readonly를 지원하지 않아서 css 적용 */
//퀵메뉴
$(".quick_title").on("click",function(){
if($("html").width()<1541){
if($(".quick_menu_wrap").is(".on")==true){
$(".quick_menu_wrap").removeClass("on");
}else{
$(".quick_menu_wrap").addClass("on");
}
}
})
});
/* 화면 리사이즈 시 */
@ -93,6 +104,7 @@ $(window).resize(function () {
$(".btn_menu").attr("title", "모바일메뉴 열기"); // 1024 이하 시 title 변경
$(".full_menu").removeClass("on");
}
$(".quick_menu_wrap").removeClass("on");
});
/* //화면 리사이즈 시 */

View File

@ -90,7 +90,7 @@
<a href="#sub" class="contGo" title="본문 바로가기">본문 바로가기</a>
</div>
<div class="quick_menu_wrap">
<div class="quick_menu_wrap on">
<div class="quick_title">
<p>퀵메뉴</p>
</div>
@ -102,14 +102,14 @@
<a href="#none"><i class="icon_quickmenu_adj_case"></i>조정사례</a>
</li>
<li class="quick_li">
<a href="#none"><i class="icon_quickmenu_apl_form"></i>신청서 작성</a>
<a href="#none"><i class="icon_quickmenu_apl_form"></i>조정신청</a>
</li>
<li class="quick_li">
<a href="#none"><i class="icon_quickmenu_progress_case"></i>사건진행</a>
<a href="#none"><i class="icon_quickmenu_progress_case"></i>진행상황</a>
</li>
<li class="quick_li">
<!-- <li class="quick_li">
<a href="#none"><i class="icon_quickmenu_fee"></i>수수료 조회</a>
</li>
</li> -->
</ul>
</div>