tolag3/koipa_edu_2025-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024/01/17 header 수정

Browse Source
This commit is contained in:
subsub 2024-01-17 11:45:55 +09:00
parent a4b1b5a615
commit f774bee38c
3 changed files with 58 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
View File

@ -399,30 +399,32 @@ function usrJoin(){
</div>
</div>
<div class="nav_wrap">
<nav id="menu">
<ul class="depth01">
<c:forEach var="resultListOne" items="${menuResultList}" varStatus="status">
<c:if test="${resultListOne.depths eq '1' }">
<li class="depth01_li">
<a href="#" class="menu_link menu_tit" id="${resultListOne.menuNo}">
<c:out value="${resultListOne.menuNm}" escapeXml="false" />
</a>
<ul class="depth02">
<c:forEach var="resultListTwo" items="${menuResultList}" varStatus="status">
<c:if test="${resultListTwo.depths eq '2' && resultListOne.menuNo eq resultListTwo.upperMenuId }">
<li>
<a href="${pageContext.request.contextPath}${empty resultListTwo.url ? '#' : resultListTwo.url }" ${resultListTwo.menuType eq 'O' ? 'target="_blank"' : ""} >
<c:out value="${resultListTwo.menuNm}" />
</a>
</li>
</c:if>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
</ul>
</nav>
<div class="inner">
<nav id="menu">
<ul class="depth01">
<c:forEach var="resultListOne" items="${menuResultList}" varStatus="status">
<c:if test="${resultListOne.depths eq '1' }">
<li class="depth01_li">
<a href="#" class="menu_link menu_tit" id="${resultListOne.menuNo}">
<c:out value="${resultListOne.menuNm}" escapeXml="false" />
</a>
<ul class="depth02">
<c:forEach var="resultListTwo" items="${menuResultList}" varStatus="status">
<c:if test="${resultListTwo.depths eq '2' && resultListOne.menuNo eq resultListTwo.upperMenuId }">
<li>
<a href="${pageContext.request.contextPath}${empty resultListTwo.url ? '#' : resultListTwo.url }" ${resultListTwo.menuType eq 'O' ? 'target="_blank"' : ""} >
<c:out value="${resultListTwo.menuNm}" />
</a>
</li>
</c:if>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
</ul>
</nav>
</div>
</div>
</div>
</header>

16
src/main/webapp/visitEdu/usr/publish/css/common.css
View File

@ -12,10 +12,10 @@ body {color: #222;}
/* header */
header{width: 100%; height: 195px; position: fixed; top: 0; left: 0; transition: height .4s ease-in-out, background-color .4s ease-in-out, margin .4s ease-in-out; overflow: hidden; box-sizing: border-box;z-index: 20; background-color: #fff; border-bottom: 1px solid #f3f3f3; }
header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}
header::before{position: absolute; content: " "; display: block; top: 195px; left: 0; height: 2px; background-color: #e95504; opacity: 0; transition: opacity .4s ease-in-out;}
/* header::before{position: absolute; content: " "; display: block; top: 195px; left: 0; height: 2px; background-color: #e95504; opacity: 0; transition: opacity .4s ease-in-out;}
header::after{position: absolute; content: " "; display: block; width: 100%; height: 2px; background-color: #e95504; top:195px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;}
header.on::after{top: 195px; opacity: 1;}
header.on::before{opacity: 1;}
header.on::after{top: 195px; opacity: 1; z-index: 0;}
header.on::before{opacity: 1;} */
header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
/* .gnb_wrap{width: 100%; background-color: #eef0f3; height: 40px; overflow: hidden; padding: 0 20px; border-bottom: 1px solid #e2e4e6; box-sizing: border-box;} */
@ -68,12 +68,16 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.header_inner .edumark img{margin:0 5px 0 0;}
.header_inner .area_right{display: flex;}
.header .nav_wrap{box-sizing: border-box; height: 100%; max-width:1400px; margin: 0 auto;}
.header .nav_wrap{box-sizing: border-box; height: 100%; margin: 0 auto;z-index: 1;}
header.on .nav_wrap{position:relative;bottom: 0;}
header .nav_wrap::after{position:absolute;content:"";width:100%;height:2px;background:#e95504;transition: all 0.4s ease-in-out;opacity: 0;}
header.on .nav_wrap::after{opacity: 1;}
.header .nav_wrap .inner{max-width:1400px;margin: 0 auto;}
.header #menu{width: 100%; margin: 0 auto; height: 100%; }
.header .depth01 {display: flex; height: 100%; /*padding: 15px 0;*/}
.header .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;}
.header .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;}
.header .depth01_li{position: relative; box-sizing: border-box; padding:15px 0;}
.header .depth01_li{position: relative; box-sizing: border-box; }
.header .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
.header .dep_li_01 .depth01_li{width: 100%;}
.header .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
@ -81,7 +85,7 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
.header .dep_li_05 .depth01_li{width: calc(100%/5);}
.header .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
.header .dep_li_07 .depth01_li{width: auto;}
.header .menu_link{font-size: 20px; font-weight: 300; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center;/* height: 100%; */position: relative;font-family: 'GmarketSansMedium'; line-height: 1.25;}
.header .menu_link{font-size: 20px; font-weight: 300; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center;/* height: 100%; */position: relative;font-family: 'GmarketSansMedium'; line-height: 1.25; padding:15px 0;}
.header .menu_link::before{position: absolute; content: " "; display: block; width: 0; /*height: 2px; background-color: #E95504; left: 50%; transform: translateX(-50%); transition: width .4s ease-in-out; top: 32px;*/ z-index: 1;}
.header .menu_link .menu_link_br {color: #d64309;font-family: 'GmarketSansMedium'; padding:0 0 0 5px;}
.header .on .menu_link{color: #d64309;}

67
src/main/webapp/visitEdu/usr/publish/script/common.js
View File

@ -161,65 +161,42 @@ function header() {
/* //메뉴에 개수에 따라 자동으로 width 값 변경 */
var gnb = $("#menu");
var header = $("header")
var height_array = gnb.find('.depth02').map(function(){
return $(this).outerHeight();
var header = $("header");
var navWrap = $(".nav_wrap");
var height_array = gnb.find('.depth02').map(function () {
return $(this).outerHeight();
});
h=Math.max.apply(Math, height_array)+210;
h = Math.max.apply(Math, height_array) + 200; // depth02 메뉴의 각각 height를 구해 최대 height 구함
function open_gnb(item) {
var depth01 = item;
var depth01_li = depth01.closest(".depth01_li");
header.addClass("on").css('height',h + 'px');
header.addClass("on").css('height', h + 'px');
depth01_li.addClass("on");
$('header .depth02').css('height',h + 'px');
$('header .depth02').css('height', h + 'px');
navWrap.css('height', h + 'px');
}
gnb.find(".menu_link").on("mouseover", function () {
gnb.find(".depth01_li").bind("mouseover focusin", function () {
open_gnb($(this));
});
gnb.find(".depth01_li").on("mouseover", function () {
var depth01 = $(this);
depth01.addClass("on").siblings().removeClass("on");
});
gnb.find(".depth02").on("mouseover", function () {
if(header.is(".on") !== true){
$('header .depth02').attr('style','');
}else{$('header .depth02').css('height',h + 'px');}
});
gnb.find(".menu_link").on("focusin", function () {
open_gnb($(this));
});
gnb.find("a").on("focusin", function () {
open_gnb($(this));
});
gnb.find(".depth01_li").on("focusin", function () {
var depth01 = $(this);
depth01.addClass("on").siblings().removeClass("on");
});
header.on("mouseleave", function () {
header.removeClass("on").attr('style','');
$('header .depth02').attr('style','');
navWrap.bind("mouseleave focusout", function () {
header.removeClass("on").removeAttr("style");
$('header .depth02').attr('style', '');
navWrap.removeAttr("style");
$(".depth01_li").removeClass("on");
$("header .depth02").animate({height:'auto'},0);
$("header .depth02").animate({height: 'auto'}, 0);
});
gnb.on("mouseleave", function () {
header.removeClass("on").attr('style','');
$('header .depth02').attr('style','');
$(".depth01_li").removeClass("on");
$("header .depth02").animate({height:'auto'},1000);
gnb.find(".depth01_li").bind("mouseleave focusout", function () {
$(this).removeClass("on");
});
/*$(".depth01_li").on('mouseleave',function(){
$('header .depth02').attr('style','');
});*/
$("#menu .depth01_li:last-child .depth02 li:last-child").on("focusout", function () {
header.removeClass("on").attr('style','');
header.removeClass("on").attr('style', '');
$("#menu .depth01_li").removeClass("on");
});