전체 드롭다운메뉴 문의드립니다.
본문
전체 드롭다운 메뉴를 하려고 하는데 막히는게 있어서 이곳에 한번 문의드려봅니다.
대메뉴 누르면 전체 서브메뉴가 아래 한번에 나오는데요. 서브메뉴들에 마우스를 대면 그대로 유지를 하는데 회색바탕쪽으로 마우스를 가면 서브메뉴가 사려져서요. 회색바탕에 마우스가 가도 안사라지게 하고 싶은데 잘 안되네요. 문의드려봅니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>모바일 네비게이션을 만들수 있다.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header clearfix">
<div class="logo">
<h1><a href="index.html">LOGO</a></h1>
</div>
<nav class="gnb">
<ul class="clearfix">
<li><a href="#">회사소개</a>
<ul class="submenu">
<li><a href="#">CEO인사말</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
<li><a href="#">제품소개</a>
<ul class="submenu">
<li><a href="#">스폰지</a></li>
<li><a href="#">필터</a></li>
<li><a href="#">그 외 제품</a></li>
</ul>
</li>
<li><a href="#">응용분야</a>
<ul class="submenu">
<li><a href="#">자동차</a></li>
<li><a href="#">필터2</a></li>
<li><a href="#">기타</a></li>
</ul>
</li>
<li><a href="#">고객지원</a>
<ul class="submenu">
<li><a href="#">공지사항</a></li>
<li><a href="#">견적의뢰</a></li>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</nav><!--.nav-->
<div id="barMenu">
<div class="bar"></div>
</div>
</div><!--.header-->
</div><!--.row-->
</div><!--.container-->
<div id="gnbBg"></div>
</header>
<section id="banner"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 초기화하는 함수(script의 reset)
// 시작하자마자 이 함수를 시작하라.
winSzin();
function winSzin(){
let winW = $(window).width();
console.log(winW)
// submenu 숨기기
if(winW >= 960){
$(".header .submenu").hide();
}
}
// 너비값이 체크하기
$(window).resize(function(){
winSzin();
});
$(".gnb > ul > li").mouseover(function(){
// console.log(winW);
winW = $(window).width();
if(winW >=960){
$(".gnb > ul > li").find(".submenu").stop().slideDown();
$("#gnbBg").stop().slideDown(500);
}
});
$(".gnb > ul > li").mouseout(function(){
winW = $(window).width();
if(winW >=960){
$(".gnb > ul > li").find(".submenu").stop().slideUp();
$("#gnbBg").stop().slideUp(500);
}
});
// 모바일 네비게이션 클릭했을 때
$("#barMenu").click(function(e){
e.preventDefault();
// barMenu를 클릭했을 때
$(".gnb").toggleClass("open")
// .gnb에 open 클래스를 넣는다.
});
// width 960이하일 때 메뉴 클릭했을 때 submenu 나오게하기
$(".gnb > ul >li > a ").click(function(e){
if(winW < 960){
// 960보다 같거나 작으면 > 충돌나기 때문에 작다 표시만 한다.
e.preventDefault();
// 임시 링크 걸린 것 해지
$(".header .gnb>ul>li>.submenu").stop().slideUp();
// 새로운 것을 클릭하면 무조건 slideUp되고
$(this).next("ul").stop().slideToggle();
// 지금 선택한 아이의 다음의 아이(ul = submenu)stop했다가 slidetoggle 열고 닫아라.
}
});
</script>
</body>
</html>
css
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #333;
}
li{
list-style: none;
}
a{
color: #333;
text-decoration: none;
}
.clearfix::before,.clearfix::after{
content: "";
display: block;
clear: both;
}
#header{
width: 100%;
height: 95px;
/* gnbBg의 기준점 */
position: relative;
border-bottom: 1px solid #193a6f;
}
#banner{
width: 100%;
height: 600px;
background: url(../img/banner.png) center center no-repeat;
/* 비율에 맞춰서 이미지 확대 단점:화면을 줄이면 이미지가 잘림*/
background-size: cover;
}
.container{
width: 1280px;
height: inherit;
margin: 0 auto;
/* background-color: rgba(0,0,0,0.1); */
}
.row{
padding: 0 28px;
}
/* media */
/* pc 네비게이션 */
@media(min-width:960px){
.header{}
.header .logo{
/* 쌤이 맞춰놓은 사이즈 */
width: 184px;
height: 95px;
/* background-color: #ccc; */
display: flex;
align-items: center;
justify-content: center;
float: left;
}
.header .gnb{
float: right;
}
.header .gnb > ul{}
.header .gnb > ul > li{
width: 136px;
padding: 35px 0;
float: left;
/* 가상요소 기준점 */
position: relative;
}
/* li 가상요소 */
.header .gnb > ul > li::after{
content: "";
position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 3px;
background-color: #193a6f;
/* 마우스 오버 시 파란 줄 나오게하기 */
transform: scaleX(0);
transition: all 0.3s;
}
.header .gnb > ul > li:hover::after{
/* 마우스 오버 시 파란 줄 나오게하기 */
transform: scaleX(100%);
}
.header .gnb > ul > li > a{
display: block;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.header .gnb > ul > li > .submenu{
position: absolute;
left: 0;
top: 95px;
/* background-color: #ccc; */
width: 100%;
z-index: 10;
display: none;
}
.header .gnb > ul > li > .submenu > li{}
.header .gnb > ul > li > .submenu > li > a{
display: block;
font-size: 16px;
font-weight: 500;
text-align: center;
padding: 20px 0;
}
#gnbBg{
width: 100%;
height: 192px;
background-color: #f5f5f5;
position: absolute;
left: 0;
top: 95px;
z-index: 9;
display: none;
}
}
@media(max-width:1300px){
.container{width: 100%;}
}
@media(max-width:1024px){}
/* 모바일 네비게이션 */
@media(max-width:960px){
.row{
padding: 0 20px;
}
.header{}
.header .logo{
width: 100%;
height: 95px;
display: flex;
justify-content: center;
align-items: center;
}
.header .gnb{
/* container에 기준점 미리 잡아놓음 */
position: absolute;
left: -300px;
width: 250px;
height: calc(100vh - 95px);
background-color: #fff;
transition: 0.5s;
}
.header .gnb.open{
left: 0;
}
.header > .gnb > ul{
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
.header > .gnb > ul > li{
width: 100%;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
}
.header > .gnb > ul > li > a{
display: block;
font-size: 16px;
font-weight: bold;
padding: 15px 30px;
}
.header > .gnb > ul > li > .submenu{
display: none;
height: auto;
}
.header > .gnb > ul > li > .submenu > li{
border-top: 1px solid #dbdbdb;
}
.header > .gnb > ul > li > .submenu > li > a{
display: block;
font-size: 14px;
padding: 10px 60px;
}
#barMenu{
width: 40px;
height: 25px;
/* background-color: #ccc; */
/* container에 이미 realative 기준점 있음*/
position: absolute;
top: 30px;
left: 20px;
cursor: pointer;
}
#barMenu .bar{
width: 40px;
height: 4px;
background-color: #1d1d1f;
/* bar::before, after 기준점 */
position: relative;
}
#barMenu .bar::before, #barMenu .bar::after{
content: "";
position: absolute;
width: 40px;
height: 4px;
background-color: #1d1d1f;
left: 0;
top: 10px;
}
#barMenu .bar::after{
top: 20px;
}
}
답변 2
위 부분을 이렇게 수정해보세요!$(".gnb > ul > li").mouseout(function(){$("#gnbBg").mouseout(function(){
너무 감사합니다. ^^
오픈 시점을 대메뉴를 감싸고 있는 wrap 에 적용해서 그렇습니다.
답변을 작성하시기 전에 로그인 해주세요.
