header sub menu 사라짐 문의드립니다,
관련링크
본문
첫번째 문제는서브메뉴에 양쪽이나 빈곳에 마우스를 올리면 서브메뉴들이 사라집니다.
제이쿼리에 어떤걸 써놓아도 자꾸 사라져요.
두번째는 풀페이지 두번째 섹션부터 헤더 배경이 z-index 값을 수정해도 사라져요
ㅠ 어느 부분을 수정해야하는지 혹시 알수있을까요?
<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>
<a href="#" class="menu_btn">
<div></div>
<div></div>
<div></div>
</a>
<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_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>
<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/certificate/01.php">기업부설연구소</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;?>/">ISO 9001/14001</a></li>
<li><a href="<?php echo G5_URL;?>/">소재부품장비전문기업</a></li>
<li><a href="<?php echo G5_URL;?>/">월드클래스300</a></li>
<li><a href="<?php echo G5_URL;?>/">IP STAR기업</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>
<li><a href="<?php echo G5_URL;?>/">병역지정업체(산업기능요원)선정</a></li>
</ul>
</li>
<li><a href="#">특허</a>
<ul class="sub">
<li><a href="<?php echo G5_URL;?>/">글로벌 IP지원</a></li>
<li><a href="<?php echo G5_URL;?>/">IP STAR기업</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="#">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 class="hd_bg"></div>
</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: absolute; 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: absolute; 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 .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: absolute;width: 100%;background: #f1f1f1;z-index: 8;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: 1;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');
});
});
답변 1
$('#header, .gnb, .hd_bg').mouseenter(function () { }
여기에서 나타나는 html 에서는 마우스오버 했을 떄 보여줄 메뉴가 배경화면 뒤에서 열립니다.
<header>
<div id="header" class="">
<div class="container" style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
</div>
</div>
<div class="hd_bg" style="top: 540px; height: 0px;"></div>
</header>
이것의 위치를 현재와 같이 옮기세요.
위차가 잘못 되어 있습니다.
</header> 태그 바로 앞에 위치 하세요
그러면 아래와 같이 나옵니다
답변 너무 감사합니당! 말씀해주신대로 위치를 옮겼는데 바뀌지가 않아요 ㅠㅠㅠ
새로고침하고 해보세요...
새로고침 하고 하니까 작동을 잘 합니다..
제대로 된 것이 맞습니다..
안되면 캐시 삭제하고 해보세요...
크롬에서 테스트 한 것입니다.
답변을 작성하시기 전에 로그인 해주세요.