From 2e2fde0d4bc21c1dd25df50ac2641eb2146d565c Mon Sep 17 00:00:00 2001 From: subsub Date: Tue, 17 Oct 2023 18:18:32 +0900 Subject: [PATCH] =?UTF-8?q?2023/10/17=20header=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visitEdu/usr/publish/css/common.css | 15 +++--- .../visitEdu/usr/publish/script/common.js | 50 ++++++++++++------- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/main/webapp/visitEdu/usr/publish/css/common.css b/src/main/webapp/visitEdu/usr/publish/css/common.css index 331f2dca..64482865 100644 --- a/src/main/webapp/visitEdu/usr/publish/css/common.css +++ b/src/main/webapp/visitEdu/usr/publish/css/common.css @@ -10,8 +10,8 @@ body {color: #222;} .logo img {width: 200px;} /* header */ -header{width: 100%; height: 130px; 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 #e2e4e6;max-height: 350px;} -header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1); max-height: 350px;} +header{width: 100%; height: 130px; 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 #e2e4e6;/* max-height: 350px; */} +header.on{background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);/* max-height: 350px; */} header::before{position: absolute; content: " "; display: block; top: 130px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .4s ease-in-out;} header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 130px; left: 0; opacity: 0; transition: opacity .4s ease-in-out;} header.on::after{top: 130px; opacity: 1;} @@ -52,8 +52,8 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);} .header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: 100%; margin: 0 50px;} .header_inner #menu{width: 100%; margin: 0 auto; height: 100%;} .header_inner .depth01 {display: flex; height: 100%;} -.header_inner .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;} -.header_inner .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;} +/* .header_inner .dep_li_01,.header_inner .dep_li_02,.header_inner .dep_li_03 {justify-content:flex-start;} +.header_inner .dep_li_04,.header_inner .dep_li_05,.header_inner .dep_li_06,.header_inner .dep_li_07 {justify-content:space-between;} */ .header_inner .depth01_li{position: relative; height:100%; padding: 0; box-sizing: border-box;} .header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);} .header_inner .dep_li_01 .depth01_li{width: 100%;} @@ -69,7 +69,7 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);} .header_inner .menu_link .menu_link_br {color: #E95504;font-family: 'nanumsquare', 'Noto Sans KR', sans-serif; } .header_inner .on .menu_link{color: #E95504;} .on .nav_wrap .on .menu_link::before{width: 100%;} -.header_inner .depth02{position: absolute; text-align: center; padding: 15px 0; width: 100%; left: 50%; transform: translateX(-50%);border-right: 1px solid #d5d5d5; max-height: 350px;} +.header_inner .depth02{position: absolute; text-align: center; padding: 15px 0; width: 100%; left: 50%; transform: translateX(-50%);border-right: 1px solid #d5d5d5;/* max-height: 350px; */} .header_inner .depth01_li:first-child .depth02{border-left: 1px solid #d5d5d5;} .header_inner .depth01_li:hover .depth02::after{position:absolute;content:"";width:calc(100% + 4px);height:100%;background-color:#fff8f4;left:-2px;top:0;} .header_inner .depth01_li:hover .depth02 li{position:relative;z-index:1;} @@ -100,10 +100,11 @@ header.scroll{box-shadow: 0 5px 8px rgba(0,0,0,0.15);} .full_menu .depth01_li{display: flex; border-bottom: 1px solid #d5d5d5; padding: 20px 0;} .full_menu .depth01_li:first-child{padding: 0 0 20px 0;} .full_menu .depth01_li:last-child{border-bottom: 0;} -.full_menu .depth01_li .menu_link{width:350px;font-size: 22px; font-weight: 500; color: #222;} +.full_menu .depth01_li .menu_link{width:350px;font-size: 20px; font-weight: 500; color: #222;} .full_menu .depth01_li:hover .menu_link,.full_menu .depth01_li .depth02 li:hover{color: #e95504;} .full_menu .depth01_li .depth02 li:hover{font-weight: 500;} -.full_menu .depth01_li .depth02{display: flex; width: calc(100% - 350px); font-size: 18px; font-weight: 300; color: #666; justify-content: space-between;} +.full_menu .depth01_li .depth02{display: flex; width: calc(100% - 138px); font-size: 18px; font-weight: 300; color: #666; justify-content:flex-start; flex-wrap: wrap;} +.full_menu .depth01_li .depth02 li{width:calc(100% / 4); height:40px;} /* .full_menu .depth01 .menu_link{font-size: 20px; font-weight: 500; color: #ea5404; position: relative; padding-bottom: 25px; letter-spacing: -1px; text-align: center; height: 40px;} .full_menu .depth01 .menu_link>span {display: block; padding-top: 5px;} diff --git a/src/main/webapp/visitEdu/usr/publish/script/common.js b/src/main/webapp/visitEdu/usr/publish/script/common.js index 80d0a3ce..c5f50dea 100644 --- a/src/main/webapp/visitEdu/usr/publish/script/common.js +++ b/src/main/webapp/visitEdu/usr/publish/script/common.js @@ -6,6 +6,13 @@ $(document).ready(function () { gnbOpen(); }, 100); + if($(".full_menu .depth01_li a:contains('ZOOM 신청 게시판(청소년)')").length == "1"){ + $(".full_menu .depth01_li>a").css("width","24%"); + $(".full_menu .depth01_li .depth02").css("width","calc(100% - 50px)"); + $(".full_menu .depth01_li a:contains('ZOOM 신청 게시판(청소년)')").html("ZOOM 신청 게시판"+"
"+"(청소년)") + }else{} + + //ie 버그로 인하여 강제로 탭키 가도록 설정 if (ie_check()) { $("#main").prop("tabindex", "0"); @@ -155,29 +162,19 @@ function header() { var gnb = $("#menu"); var header = $("header") - + var height_array = gnb.find('.depth02').map(function(){ + return $(this).outerHeight(); + }); + h=Math.max.apply(Math, height_array)+130; function open_gnb(item) { var depth01 = item; var depth01_li = depth01.closest(".depth01_li"); - var depth02 = depth01_li.find(".depth02"); - var height_array = gnb.find('.depth02').map(function(){ - return $(this).outerHeight(); - }); - - var h = Math.max.apply(Math, height_array)+150; - //console.log(height_array,Math.max.apply(Math, height_array)+150); - if(h+1>=Math.max.apply(Math, height_array)){ - h; - header.addClass("on").css('height',h + 'px'); - $("header .depth02").css('height',h+'px'); - //console.log("1"); - }else{ - header.addClass("on").css('height',h + 'px'); - $("header .depth02").css('height',h+'px'); - //console.log("2"); - } + header.addClass("on").css('height',h + 'px'); depth01_li.addClass("on"); + $('header .depth02').css('height',h + 'px'); } + + gnb.find(".menu_link").on("mouseover", function () { open_gnb($(this)); @@ -187,6 +184,12 @@ function header() { 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)); @@ -203,9 +206,20 @@ function header() { header.on("mouseleave", function () { header.removeClass("on").attr('style',''); + $('header .depth02').attr('style',''); + $(".depth01_li").removeClass("on"); + $("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); }); + $(".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','');