초보 ] 메뉴바 제이쿼리 코드 질문 채택완료
뮨스비
6년 전
조회 3,611
풀드롭 메뉴바 인터넷소스보고 그대로 쳣는데 , 메뉴바가 자꾸 나왔다가 바로 들어가버리네요 이유를 모르겠습니다 .
가르쳐주세요 ㅠㅠ
html
</p>
<p><div class="topMenu"></p>
<p><ul class="menu01"></p>
<p><li><span>1번 큰메뉴</span></p>
<p><ul class="dept01"></p>
<p><li id="nop">1번작은메뉴</li></p>
<p><li id="nop">1번작은메뉴</li></p>
<p><li id="nop">1번작은메뉴</li></p>
<p></ul></p>
<p></li></p>
<p><li><span>2번 큰메뉴</span></p>
<p><ul class="dept01"></p>
<p><li id="nop">2번작은메뉴</li></p>
<p><li id="nop">2번작은메뉴</li></p>
<p><li id="nop">2번작은메뉴</li></p>
<p></ul></p>
<p></li></p>
<p><li><span>3번 큰메뉴</span></p>
<p><ul class="dept01"></p>
<p><li id="nop">3번작은메뉴</li></p>
<p><li id="nop">3번작은메뉴</li></p>
<p><li id="nop">3번작은메뉴</li></p>
<p></ul></p>
<p></li></p>
<p><li><span>4번 큰메뉴</span></p>
<p><ul class="dept01"></p>
<p><li id="nop">4번작은메뉴</li></p>
<p><li id="nop">4번작은메뉴</li></p>
<p><li id="nop">4번작은메뉴</li></p>
<p></ul></p>
<p></li></p>
<p><li><span>5번 큰메뉴</span></p>
<p><ul class="dept01"></p>
<p><li id="nop">5번작은메뉴</li></p>
<p><li id="nop">5번작은메뉴</li></p>
<p><li id="nop">5번작은메뉴</li></p>
<p></ul></p>
<p></li></p>
<p></ul></p>
<p></div></p>
<p><div class="none"></div></p>
<p></div></p>
<p>
css
</p>
<p>.lo_me{max-width: 1200px; margin: 0 auto; padding: 25px;}</p>
<p>.m_logo .main_logo {float: left;}</p>
<p> </p>
<p>.topMenu{position: relative; text-align: center; float: right; width: 70%;}</p>
<p>.topMenu::after{content: ""; display: block; clear: both;}</p>
<p>.menu01 > li{float:left; width: 20%; line-height: 40px;}</p>
<p>.menu01 span{font-size: 0.95em;}</p>
<p>.dept01{position: absolute;display: none; width: 20%; border-bottom: 1px solid #000; background: rgba(27, 27, 27, 0.6); border-right: 1px dotted #fff;}</p>
<p>#nop{float: none; padding: 10px 10px;}</p>
<p>.none::after{content: ""; display: block; clear: both;}</p>
<p> </p>
<p>
제이쿼리
</p>
<p><script></p>
<p>$(document).on('mouseover', '.topMenu span', function() {</p>
<p>$('.dept01').slideDown(300);</p>
<p>});</p>
<p>$(document).on('mouseover', 'div', function () {</p>
<p>if (!$(this).hasClass('topMenu')) {</p>
<p>$('.dept01').slideUp(300);</p>
<p>}</p>
<p>});</p>
<p></script></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
6년 전
html
</p>
<p><script
src="<a href="https://code.jquery.com/jquery-3.4.1.min.js"" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.4.1.min.js"</a>
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></p>
<p>
css
</p>
<p>.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;}
</p>
<p>
js
</p>
<p>$(document).on('mouseover', '.topMenu span', function() {
$('.dept01').slideDown(300);
});
$(document).on('mouseover', 'div', function () {
if (!$(this).hasClass('topMenu')) {
$('.dept01').slideUp(300);
}
});</p>
<p>
이렇게 넣어서 해보니까 되는데용?
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인