js / html / css 질문

js / html / css 질문

QA

js / html / css 질문

본문

html 

 


<div class="ml_nav">
<div class="main_logo">
<a href="index.html"><img src="./img/logo_small.png" alt="메인로고"></a>
</div>
 
<nav>
<div class="gnb">
<ul class="gnb_1ch_menu">
<li class="g_1ch_m">소개</li>
<li class="g_1ch_m">공간예약</li>
<li class="g_1ch_m">프로그램예약</li>
<li class="g_1ch_m">오픈강의실</li>
<li>커뮤니티</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- ================== Sub_Gnb ================== -->
<div class="sub">
 
<div class="sub_gnb">
<div class="sub_gnb_box">
<ul>
<li><span class="bold_gnb">청년창업랩</span></li>
<li>- 인사말</li>
<li>- 지원안내</li>
<li>- 입주기업</li>
<li>- 오시는 길</li>
</ul>
<ul>
<li><span class="bold_gnb">공간 예약</span></li>
<li>- 공간 소개</li>
<li>- 공간 예약</li>
</ul>
<ul>
<li><span class="bold_gnb">프로그램 예약</span></li>
<li>- 프로그램 소개</li>
<li>- 프로그램 예약</li>
</ul>
<ul>
<li><span class="bold_gnb">오픈강의실</span></li>
<li>- 강의 소개</li>
<li>- 강의 보기</li>
</ul>
<ul>
<li><span class="bold_gnb">커뮤니티</span></li>
<li>- 공지사항</li>
<li>- Q & A</li>
<li>- 포토갤러리</li>
<li>- 자료실</li>
</ul>
</div>
</div>
</div>

 

 

 

 

css

 


 
/* 메뉴바 */
nav{width: 990px; float: left; height: 100px;overflow: hidden;}
.gnb{overflow: hidden; height: 100px;font-size: 1.125em;}
.gnb_1ch_menu{overflow: hidden; padding: 35px 35px; height: 100px;display: block;}
.gnb_1ch_menu > li{height: 50px; float: left;padding: 0px 50px;}
.gnb_1ch_menu .g_1ch_m{margin-right: 20px;}
.gnb::after{content: "";display: block; clear: both;}
 
/* 서브메뉴바 */
.sub_gnb{overflow: hidden; width: 100%; height: 350px; background: rgba(27, 27, 27, 0.6); z-index: 9999; position:absolute; display: none;}
.sub_gnb_box{width: 2000px;margin: 0 auto; overflow: hidden; height: 350px; padding: 30px 0 0 550px;}
.sub_gnb_box > ul{float: left; width: 13%; margin-right: 30px; height: 300px; border-left: 1px solid #fff;}
.sub_gnb_box > ul > li{font-size: 1.07em;color: #fff; margin-bottom: 25px; height: 40px; text-align: center;}
.bold_gnb{font-size: 1.125em; font-weight: bold;}
.sub_gnb::after{content: "" ; display: block; clear: both;}

 

 

javascript

 


<script>
$(document).on('mouseover', '.gnb_1ch_menu', function(){
$('.sub_gnb').slideDown(300);
})
$(document).on('mouseover' ,'div' , function(){
if(! ($(this).hasClass('.gnb_1ch_menu')) || ($(this).hasClass('.sub_gnb'))) {
$('.sub_gnb').slideUp(300);
}
});
</script>
 

 

 

 

1차 메뉴 마우스오버시 2차메뉴 따로 만든 것 아래로 나오게 하고싶습니다 .

스크립트가 문제인건지 자꾸 올라갔다 내려갔다를 반복하고 있습니다 . 

살리는셈 치고 도와주십셔

이 질문에 댓글 쓰기 :

답변 1

보시면..... 두번째 이벤트가 div 태그 전체에 물려있습니다. 

그런데 nav 나 모두 div 의 하위에있고요. 

그러니까 어디를 누르던 슬라이드 업이 되죠... 

슬라이드 업해야 할 div 에 클래스를 부여하시고. 

클래스에 slide up 이벤트를 넣어주세요 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,010
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT