초보 ] 메뉴바 제이쿼리 코드 질문
본문
풀드롭 메뉴바 인터넷소스보고 그대로 쳣는데 , 메뉴바가 자꾸 나왔다가 바로 들어가버리네요 이유를 모르겠습니다 .
가르쳐주세요 ㅠㅠ
html
<div class="topMenu">
<ul class="menu01">
<li><span>1번 큰메뉴</span>
<ul class="dept01">
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
</ul>
</li>
<li><span>2번 큰메뉴</span>
<ul class="dept01">
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
</ul>
</li>
<li><span>3번 큰메뉴</span>
<ul class="dept01">
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
</ul>
</li>
<li><span>4번 큰메뉴</span>
<ul class="dept01">
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
</ul>
</li>
<li><span>5번 큰메뉴</span>
<ul class="dept01">
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
</ul>
</li>
</ul>
</div>
<div class="none"></div>
</div>
css
.lo_me{max-width: 1200px; margin: 0 auto; padding: 25px;}
.m_logo .main_logo {float: left;}
.topMenu{position: relative; text-align: center; float: right; width: 70%;}
.topMenu::after{content: ""; display: block; clear: both;}
.menu01 > li{float:left; width: 20%; line-height: 40px;}
.menu01 span{font-size: 0.95em;}
.dept01{position: absolute;display: none; width: 20%; border-bottom: 1px solid #000; background: rgba(27, 27, 27, 0.6); border-right: 1px dotted #fff;}
#nop{float: none; padding: 10px 10px;}
.none::after{content: ""; display: block; clear: both;}
제이쿼리
<script>
$(document).on('mouseover', '.topMenu span', function() {
$('.dept01').slideDown(300);
});
$(document).on('mouseover', 'div', function () {
if (!$(this).hasClass('topMenu')) {
$('.dept01').slideUp(300);
}
});
</script>
답변 1
html
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div class="topMenu">
<ul class="menu01">
<li><span>1번 큰메뉴</span>
<ul class="dept01">
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
</ul>
</li>
<li><span>2번 큰메뉴</span>
<ul class="dept01">
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
</ul>
</li>
<li><span>3번 큰메뉴</span>
<ul class="dept01">
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
</ul>
</li>
<li><span>4번 큰메뉴</span>
<ul class="dept01">
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
</ul>
</li>
<li><span>5번 큰메뉴</span>
<ul class="dept01">
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
</ul>
</li>
</ul>
</div>
<div class="none"></div>
</div>
css
.lo_me{max-width: 1200px; margin: 0 auto; padding: 25px;}
.m_logo .main_logo {float: left;}
.topMenu{position: relative; text-align: center; float: right; width: 70%;}
.topMenu::after{content: ""; display: block; clear: both;}
.menu01 > li{float:left; width: 20%; line-height: 40px;}
.menu01 span{font-size: 0.95em;}
.dept01{position: absolute;display: none; width: 20%; border-bottom: 1px solid #000; background: rgba(27, 27, 27, 0.6); border-right: 1px dotted #fff;}
#nop{float: none; padding: 10px 10px;}
.none::after{content: ""; display: block; clear: both;}
js
$(document).on('mouseover', '.topMenu span', function() {
$('.dept01').slideDown(300);
});
$(document).on('mouseover', 'div', function () {
if (!$(this).hasClass('topMenu')) {
$('.dept01').slideUp(300);
}
});
이렇게 넣어서 해보니까 되는데용?
답변을 작성하시기 전에 로그인 해주세요.
