서브메뉴 사라지는 이유
관련링크
본문
메뉴를 만들어 두셨는데
예를들어 역량 대메뉴 > 보유기술 서브메뉴 페이지를 보고 있는데
소프트웨어 대메뉴에 마우스를 올리면 옆에 서브메뉴들이 나옵니다.
그런데 클릭하려고 하면 사라집니다..
absolut top으로 지정해둬서 마우스오버가 되는거라고 하는데 맞나요..?
그럼 해결방법이 무엇일까요..ㅠㅠ
head.php입니다.
<nav class="gnb">
<a href="#" class="mobile-menu close"><i class="fa fa-times" aria-hidden="true"></i></a>
<ul id="nav">
<?php
foreach ($mainMenu as $k => $v) {
echo "<li>";
echo "<a href=\"{$v->href}\">{$v->title}</a>";
echo "<div class='sub_menu'>";
echo "<ul class='sub_menu02'>";
foreach ($subMenu[$k] as $k2 => $v2) {
echo "<li><a href=\"{$v2->href}\">{$v2->title}</a></li>";
}
echo "</ul>";
echo "</div>";
echo "</li>";
}
?>
</ul>
</nav>
style.css입니다.
#nav{}
#nav li {line-height: 60px; position: relative;}
#nav li + li {border-top: solid 1px #5e5e5e;}
#nav li a {color:#e4e4e4; text-transform: uppercase; font-size: 16px; padding: 0 15px; display: block;}
#nav li .sub_menu02 {display: none; border-top: 1px solid #b7b7b7; position: absolute; z-index: 99; width: 200px; z-index: 99;}
#nav li:nth-child(1) .sub_menu02 {top: 156px;}
#nav li:nth-child(2) .sub_menu02 {top: 216px;}
#nav li:nth-child(3) .sub_menu02 {top: 277px;}
#nav li:nth-child(4) .sub_menu02 {top: 338px;}
#nav li:nth-child(5) .sub_menu02 {top: 399px;}
#nav li:nth-child(6) .sub_menu02 {top: 460px;}
#nav .on .sub_menu02 {display: block;}
#nav li .sub_menu02 li {position: relative; border-top:none;}
#nav li .sub_menu02 li a {display: block; line-height: 45px; padding: 0 15px; color: #fff; border-bottom: 1px solid #b7b7b7; position: relative; font-size: 15px;}
#nav a[href*="co_id=privacy"] {
display: none !important;
}
@media (min-width: 1025px) {
#nav > li:hover > .sub_menu {width: 200px;}
#nav > li:hover > .sub_menu02 {display: block;}
.sub_menu {width: 0; position: fixed; top: 0; height: 100%; left: 240px;}
.on .sub_menu::before {background: url('/home/img/sub_menu.png') #a0a0a0 no-repeat center bottom; box-shadow: inset 2px -5px 5px rgba(0,0,0,0.2); width: 200px; height: 100vh; content: ''; display: block; position: relative; top: 0; z-index: -1;}
.main_header .sub_menu_bg {position: absolute; bottom: 0; z-index: 99;}
}
js입니다
$(function(){
AOS.init();
if($(".mobile-menu").css("display") == 'none'){
// PC메뉴
$lnb = $('.main_header');
$lnb_dep1 = $('#nav li');
$lnb_dep2 = $('#nav li .sub_menu');
$lnb_dep1.hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
});
$lnb.hover(function(){
$lnb_dep2.stop().show();
},function(){
$lnb_dep2.stop().hide();
});
};
답변 1
<style>
#nav{position: relative;}
#nav li {line-height: 60px; }
#nav li + li {border-top: solid 1px #5e5e5e;}
#nav li a {color:#e4e4e4; text-transform: uppercase; font-size: 16px; padding: 0 15px; display: block;}
#nav li .sub_menu{display: none;}
#nav li .sub_menu02 { border-top: 1px solid #b7b7b7; position: absolute; z-index: 99; width: 200px; z-index: 99;}
#nav li:nth-child(1) .sub_menu02 {top: 0px;}
#nav li:nth-child(2) .sub_menu02 {top: 0px;}
#nav li:nth-child(3) .sub_menu02 {top: 0px;}
#nav li:nth-child(4) .sub_menu02 {top: 0px;}
#nav li:nth-child(5) .sub_menu02 {top: 0px;}
#nav li:nth-child(6) .sub_menu02 {top: 0px;}
#nav li .sub_menu02 li {position: relative; border-top:none;}
#nav li .sub_menu02 li a {display: block; line-height: 45px; padding: 0 15px; color: #fff; border-bottom: 1px solid #b7b7b7; position: relative; font-size: 15px;}
#nav a[href*="co_id=privacy"] {
display: none !important;
}
@media (min-width: 1025px) {
#nav > li:hover > .sub_menu {width: 200px;}
#nav > li:hover > .sub_menu02 {display: block; top: 0 !important;}
.sub_menu {width: 0; position: absolute; top: 0 !important; height: 100%; left: 240px; z-index: 9999;}
.on .sub_menu::before {background: url('/home/img/sub_menu.png') #a0a0a0 no-repeat center bottom; box-shadow: inset 2px -5px 5px rgba(0,0,0,0.2); width: 200px; height: 100vh; content: ''; display: block; position: fixed; top: 0; z-index: -1;}
.main_header .sub_menu_bg {position: absolute; bottom: 0; z-index: 99;}
}
</style>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script>
$(function(){
AOS.init();
// 마우스 오버 시 서브 메뉴 보이기
if($(".mobile-menu").css("display") == 'none'){
$('#nav > li').hover(
function() {
let i = $(this).index();
$(this).addClass("on");
$(".submenu").hide();
$("#nav > li").eq(i).find(".sub_menu").show()
},
function() {
$(this).removeClass("on");
$(this).find(".sub_menu").hide()
}
);
}
});
</script>
sub_menu02가 보이고 사라지고 해야하고
sub_menu는 계속 보이게 되어야해서
sub_menu를 sub_menu02로 바꾸고 $(".submenu").hide();를 sub_menu02로 바꿨는데 안됩니다.. 무엇을 잘못한걸까요ㅠㅠ
--------------------------------
지피티로 해결했습니다. 답변주셔서 감사합니다!
제가 드린 내용 잘 보시면 css 값도 바뀌었습니다.
답변을 작성하시기 전에 로그인 해주세요.
