From f774bee38c3c551b6eb3dac18489e18f53e8f2a5 Mon Sep 17 00:00:00 2001 From: subsub Date: Wed, 17 Jan 2024 11:45:55 +0900 Subject: [PATCH] =?UTF-8?q?2024/01/17=20header=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WEB-INF/jsp/web/com/webCommonHeader.jsp | 50 +++++++------- .../visitEdu/usr/publish/css/common.css | 16 +++-- .../visitEdu/usr/publish/script/common.js | 67 ++++++------------- 3 files changed, 58 insertions(+), 75 deletions(-) diff --git a/src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp b/src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp index bb488ac4..1b95eaa0 100644 --- a/src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp +++ b/src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp @@ -399,30 +399,32 @@ function usrJoin(){
- +
+ +
diff --git a/src/main/webapp/visitEdu/usr/publish/css/common.css b/src/main/webapp/visitEdu/usr/publish/css/common.css index acd0c656..03615562 100644 --- a/src/main/webapp/visitEdu/usr/publish/css/common.css +++ b/src/main/webapp/visitEdu/usr/publish/css/common.css @@ -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;} diff --git a/src/main/webapp/visitEdu/usr/publish/script/common.js b/src/main/webapp/visitEdu/usr/publish/script/common.js index ef7e95eb..d63e5098 100644 --- a/src/main/webapp/visitEdu/usr/publish/script/common.js +++ b/src/main/webapp/visitEdu/usr/publish/script/common.js @@ -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"); });