그누보드 QA - header nav 열면 메인 밀림현상과 배경사라짐 문의드립니다

header nav 열면 메인 밀림현상과 배경사라짐 문의드립니다

참신한삼치 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2024.06.13 13:43:43 조회 22005 (211.♡.♡.188)

본문

안녕하세요! header 마우스 오버시 오픈시 sub 배경이 나타나지 않으며 서브메뉴가 열리면 메인이 밀리는 현상이있습니다 ㅠ nav 에 position:absolute 를 줘도 밀리는데 잘못한걸까요? ㅠㅠ 코딩초보라 너무 아직 모르는게 너무 많아요! 제발도와주세여!


<header>
        <div id="header">
            <div class="container">
                <h1 class="logo">
                    <a href="<?php echo G5_URL ?>/index.php"><img src="<?php echo G5_THEME_URL ?>/img/logo.png" alt=""></a>
                </h1>
                <nav class="nav">
                    <ul class="gnb">
                        <li><a href="#">회사소개</a>
                            <ul class="sub sub01">
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/company/01.php">CEO 인사말</a></li>
                                <li><a href="<?php echo G5_URL;?>/">회사연혁</a></li>
                                <li><a href="<?php echo G5_URL;?>/">조직도</a></li>
                                <li><a href="<?php echo G5_URL;?>/">협력사</a></li>
                                <li><a href="<?php echo G5_URL;?>/">찾아오시는길</a></li>
                            </ul>
                        </li>
                        <li><a href="#">연구개발</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/rnd/01.php">시제품제작</a></li>
                                <li><a href="<?php echo G5_THEME_URL;?>/subpage/rnd/02.php">부품기술개발사업</a></li>
                                <li><a href="<?php echo G5_THEME_URL;?>/subpage/rnd/03.php">로봇 제조혁신</a></li>
                                <li><a href="<?php echo G5_THEME_URL;?>/subpage/rnd/04.php">공정기술개발</a></li>
                                <li><a href="<?php echo G5_THEME_URL;?>/subpage/rnd/05.php">스마트팩토리</a></li>
                                <li><a href="<?php echo G5_THEME_URL;?>/subpage/rnd/06.php">기획/특허/인증 지원</a></li>
                            </ul>
                        </li>
                        <li><a href="#">인증</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">기업부설연구소</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">벤처기업</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">이노비즈기업</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">메인비즈기업</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">소재부품장비전문기업</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">월드클래스 플러스</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">글로벌IP스타기업</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">뿌리전문기업확인서</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">기업부설연구소</a></li>
                                 <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">가정친화기업확인서</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/certificate/01.php">IOS 인증</a></li>

                            </ul>
                        </li>
                        <li><a href="#">특허</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/patent/01.php">특허/실용/디자인/상표 출원</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/patent/02.php">특허/실용/디자인/상표 등록</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/patent/03.php">특허침해</a></li>
                                <li><a href="<?php echo G5_THEME_URL?>/subpage/patent/04.php">특허분석</a></li>
                            </ul>
                        </li>
                        <li><a href="#">ESG</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_URL;?>/">ESG경영진단 및 전략수립</a></li>
                                <li><a href="<?php echo G5_URL;?>/">ESG보고서 작성</a></li>
                                <li><a href="<?php echo G5_URL;?>/">ESG보고서 검증</a></li>
                                <li><a href="<?php echo G5_URL;?>/">ESG 평가</a></li>
                            </ul>
                        </li>
                        <li><a href="#">교육</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=notice">공지사항</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=gallery">새소식</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=reference">자료실</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=qa">문의하기</a></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </li>
                        <li><a href="#">협력사모집</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=notice">공지사항</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=gallery">새소식</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=reference">자료실</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=qa">문의하기</a></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </li>
                        <li><a href="#">제이와이솔루션</a>
                            <ul class="sub">
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=notice">공지사항</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=gallery">새소식</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=reference">자료실</a></li>
                                <li><a href="<?php echo G5_URL;?>/bbs/board.php?bo_table=qa">문의하기</a></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="hd_bg"></div>
    </header>


header {display: flex; margin-top: -19px;} 
#header {background: #fff;margin: 0; } 
#header .logo{font-size: 25px;box-sizing: border-box;padding-top: 15px; position: fixed;  left: 45px;} 
#header .logo img {width: 130px;} 
#header .container{display: flex;justify-content: space-evenly;align-items: center;max-width:100% ;width:100%;margin: auto; position:fixed; z-index: 9;border-bottom:1px solid rgba(255,255,255,0.1); padding: 0 50px; } 
#header .container:hover {background-color: #f1f1f1} 
#header .gnb{text-align: right; height: 100px;} 
#header .nav {position: relative;}
#header .nav .logo{display:flex;width:200px;flex-wrap:wrap;justify-content: center;align-items: center;text-transform:uppercase;cursor:pointer;} 
#header .menu_btn{position:absolute;right:20px;top:20px;display:none;} 
#header .menu_btn div { width: 25px;height: 2px;background-color:#000;margin: 6px 0px;position: relative;transition:all .10s ease;} 
#header .menu_btn.lijo div{position:absolute;transition:all .10s ease;} 
#header .menu_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;} 
#header .menu_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;} 
#header .menu_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;} 
#header .nav ul.gnb{margin-bottom:0px;padding-left:0px;display: flex;} 
#header .nav ul.gnb li{margin-bottom:0px;color:#fff;text-align: center;position: relative;} 
#header .nav ul.gnb li a {box-sizing: border-box;display:inline-block; width:170px; transition:.8s ease;text-transform:uppercase;color: #fff;font-size: 14px;} 
#header .nav ul.gnb > li > a {padding: 31px 45px; line-height: 60px;} 
#header .nav ul.gnb li ul.sub{position:absolute;padding-left:0px;opacity:0;visibility: hidden;padding:20px 0; z-index: 999;width: 100%} 
#header .nav ul.gnb li ul.sub li {display: block;position: relative;} 
#header .nav ul.gnb li ul.sub li a{padding:5px; color: #555; font-size: 13px;} 
.hd_bg:hover > .gnb > li > a {color: #555;} 
#header .tnb {float: right; display: inline-block; position: relative;top: 10px; right: 38px;} 
#header .nav ul.gnb li ul.sub {border-right: 1px solid #ddd; height: 390px;} 
#header .nav ul.gnb li ul.sub:hover > #header .nav ul.gnb li ul.sub li a {color: color:#033ea3} 
#header .nav ul.gnb li ul.sub01 {border-left: 1px solid #ddd;} 
#header .nav ul.gnb li ul.sub li a:hover {color:#033ea3;font-weight: 600; transition: all 500ms} 
#header .tnb .tnbWrap li a svg { font-size: 25px; color: #fff;} 
#header .tnb .tnbWrap .login{float: left;margin-right: 50px;} 
#header .tnb .tnbWrap .lang{z-index: 999; float: right; display : inline-block;width:30px; height:30px; cursor:pointer; margin:0 auto; text-align:center;position: relative;} 
#header .tnb .tnbWrap .lang02 {width:110px; background-color:#f5f5f5; display:none; position: absolute;right: 0;top: 47px;box-shadow: 5px 5px 5px rgba(0,0,0,0.3);} 
#header .tnb .tnbWrap .lang02 li {border-bottom: 1px solid #ddd;} 
#header .tnb .tnbWrap .lang02 li:last-child {border-bottom: none;} 
#header .tnb .tnbWrap .lang02 li a{display: inline-block; width: 100%;padding:10px; font-size:12px; font-weight: 500; letter-spacing: 1px;} 
#header > .sub-menu-bar-bg::after { content:""; position:absolute;  top:44px; left:0; 
right:0;  bottom:0; z-index:-1; background-color:green; } 
#header > .menu-box-1-bg::after {  position:absolute; content:"";  top:0; left:0;  width:100%; height:44px; background-color:white; z-index:-1; } 
#header > .menu-box-1 ul > li { position:relative; } 
.top-bar > .menu-box-1 > ul ul {  position:absolute; top:100%; left:0; } 
.top-bar > .menu-box-1 ul > li > a {   padding:10px; } 
@media(min-width:1024px){ 
#header .nav ul.gnb:hover li ul.sub {visibility:visible;opacity:1;transform:translateY(0px);}  
#header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;} 
header.open .hd_bg{position: fixed;width: 100%;background: #f1f1f1;z-index: 99;transition: all .3s;border-top: 1px solid #dcdcdc;} 
#header .nav ul.gnb li ul.sub li a{text-align: center} 
#header .nav .active  {position: relative; } 
#header .nav .active li a {color: #033ea3; } 
#header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px; background-image: linear-gradient(315deg, #033ea3, #033ea3);position: absolute;left: 0;bottom: 0} 
#header .nav ul.gnb li ul.sub{display: block !important}  
} 
  
@media(max-width:1240px){ 
 #header .nav ul.gnb:hover li ul.sub{visibility:visible;opacity:1;transform:translateY(0px);} 
    #header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;}
    header.open .hd_bg{position: absolute;width: 100%;z-index: 9;transition: top 5s;border-top: 1px solid #dcdcdc}
    #header .nav ul.gnb li ul.sub li a{text-align: center}
    #header .nav .active  {position: relative}
    #header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;left: 0;bottom: 0}
    #header .nav ul.gnb li ul.sub{display: block !important}
} 
   
@media(max-width:1024px){
    
#header{position: relative;position: fixed;width: 100%;top: 0;left: 0;padding: 20px 0}
   #header .menu_btn{display:block;top:50%;transform: translateY(-50%)}
    #header .menu_btn.lijo{top: 30%}
   #header .nav ul.gnb{position: absolute;top: 65px;transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block}
   #header .nav ul.gnb li a{text-align: left}
    #header .nav ul.gnb > li > a{padding: 10px 20px}
   #header .nav ul.gnb.surya {transform: translateX(0%);}
   #header .nav ul.gnb li ul.sub{opacity: 1;visibility: visible;display:none;position:relative;padding-top:0px;width:100%;transition:0s;transform: translateY(0px);padding: 0 20px}
   #header .nav ul.gnb li ul.sub:after{display:none;}
   .hd_bg{display: none !important}
}


$(document).ready(function () {
    $('.menu_btn').click(function () {
        $('.menu_btn').toggleClass('lijo');
        $('.gnb').toggleClass('surya');
    });
    $('.gnb li').click(function () {
        $(this).find('.sub').slideToggle();
        var t = $(this).find('.sub');
        $('.sub').not(t).slideUp();
    });
    var max_h = 0;
    $(".sub").each(function () {
        var h = parseInt($(this).css("height"));
        if (max_h < h) {
            max_h = h;
        }
    });
    // 마우스 over 시
$('#header, .gnb, .hd_bg').mouseenter(function () {
        // menu bg
        var menuHeight = $('#header').outerHeight();
        $('.hd_bg').css({
            'top': menuHeight + 'px',
            height: max_h + 30 + 'px',
        });
        $("#header").css('background-color', '#f1f1f1');
        $('#header').addClass('open');
        $('.hd_bg').css('height', '540');
        $('.gnb > li > a').css('color', '#555');
        $('.mobile_open').css('color', '#555');
        $('.container').css('border-bottom', '1px solid #ddd');
        $('#header .tnb .tnbWrap li a svg ').css('color', '#555');
    });
    $('#header, .hd_bg').mouseleave(function () {  
        $('#header').removeClass('open');
        $("#header").css('background-color', '');
        $('.hd_bg').css('height', '0');
        $('.gnb > li > a').css('color', '#fff');
        $('.mobile_open').css('color', '#fff');
        $('.container').css('border-bottom', '1px solid rgba(255,255,255,0.1)');
        $('#header .tnb .tnbWrap li a svg ').css('color', '#fff');
    });
    $('.gnb > li').mouseenter(function () {
        $(this).addClass('active');
        $(this).siblings().removeClass('active')
    });
    $('.gnb > li').mouseleave(function () {
        $(this).removeClass('active');
    });
});