드랍다운 메뉴 질문 채택완료
초보라 헤매는게 많네요 ㅠㅠ
https://www.aptners.com/homepage/
위 사이트에서
드랍다운 메뉴에서 메뉴글자 a태그에 마우스오버했을떄 드랍다운메뉴가 내려오고,
그 상태로 드랍다운 메뉴로 마우스 이동 시 그대로 머물러있는거까지 성공했습니다 ..
그런데 드랍다운메뉴 내 외에 메뉴글자 a태그에서 마우스가 떠나면(드랍다운 메뉴가 아닌 메뉴 흰부분으로 갔을때) 드랍다운이 없어지게 하고싶은데 잘 안되네요 ,,,
http://www.aegisep.co.kr/aegisep/
이건 제가 메뉴 참고한 사이트입니다 ,,!
도움 부탁드립니다 ㅠㅠ
아래 소스코드입니다 !
</strong></p>
<p><script>
$(function(){
$('#navHead').hover(function(){
$('#navColor').css('background','#fff');
$('#logoImg').attr("src", "<?php echo G5_THEME_URL?>/img/logo.png");
$('#mainNav a').css('color','#333','font-weight','600');
$('#nav').css('border','solid 1px #eee');
$(this).hover(function(){
},function(){
$('#dropdownSub').css('display','none');
$('#navColor').css('background','none');
$('#logoImg').attr("src", "<?php echo G5_THEME_URL?>/img/logo_wh.png");
$('#mainNav a').css('color','#fff');
$('#nav').css('border','none');
});
});</p>
<p> $('#mainNav a').hover(function(){
$(this).css('color','#3b7298');
},function(){
$(this).css('color','#333');
});</p>
<p>
$('#dropdownSub').hide();
$('#mainNav a').hover(function(){
$('#dropdownSub').slideDown(200);
$('#dropdownSub').hover(function(){
},function(){
$('#dropdownSub').css('display','none');
})
});</p>
<p><script></p>
<p><strong>
답변 1개
억지로 맞추려면 지금 소스에서 적당히 수정하면 가능은 하겠지만, 불필요한 소스가 많아 보입니다..ㅠ
원하시는 방향으로 수정을 하기 위해서는 일단 html구조가 "메뉴바 div" 안에 서브메뉴#dropdownSub 가 들어있어야하고,
메뉴 링크에 마우스 오버시 #dropdownSub 슬라이드 다운
"메뉴바 div" 에서 마우스가 떠날시 #dropdownSub 슬라이드 업 하는 형식으로 참고사이트는 작업이 돼있습니다.
위에 써주신 참고사이트의 해당 부분 스크립트 코드입니다.
</span></p>
<p><span style="font-size:10pt;">$(document).ready(function(){</span></p>
<p><span style="font-size:10pt;">$('.nav > li > a').mouseover(function(){ </span></p>
<p><span style="font-size:10pt;">$('.drop_menu').slideDown(300); </span></p>
<p><span style="font-size:10pt;">}); </span></p>
<p><span style="font-size:10pt;">$('.menuDrop_box').mouseleave(function(){</span></p>
<p><span style="font-size:10pt;">$('.drop_menu').hide(); </span></p>
<p><span style="font-size:10pt;">}); </span></p>
<p><span style="font-size:10pt;">});</span></p>
<p><span style="font-size:10pt;">
hover를 많이 사용하시는데,
</span></p>
<pre>
<span style="font-size:10pt;"><code> $('#dropdownSub').hover(function(){
},function(){
$('#dropdownSub').css('display','none');
})</code>
</span></pre>
<p><span style="font-size:10pt;"><code>
아래처럼 사용이 가능하세요
</span></p>
<p><span style="font-size:10pt;"><code>$('#dropdownSub').mouseleave(function(){</code></span></p>
<p><span style="font-size:10pt;"><code>$('#dropdownSub').hide();</code></span></p>
<p><span style="font-size:10pt;"><code>});</code></span></p>
<p><span style="font-size:10pt;"><code>
그리고,
</span></p>
<pre>
<span style="font-size:10pt;"><code>$('#navHead').hover(function(){
$('#navColor').css('background','#fff');
$('#logoImg').attr("src", "<?php echo G5_THEME_URL?>/img/logo.png");
$('#mainNav a').css('color','#333','font-weight','600');
$('#nav').css('border','solid 1px #eee');
$(this).hover(function(){
},function(){
$('#dropdownSub').css('display','none');
$('#navColor').css('background','none');
$('#logoImg').attr("src", "<?php echo G5_THEME_URL?>/img/logo_wh.png");
$('#mainNav a').css('color','#fff');
$('#nav').css('border','none');
});
});</code></span></pre>
<p><span style="font-size:10pt;">
이런 부분은 제일 상위 div에 클래스만 addClass, removeClass 로 처리해주시고 css에서 스타일을 주시면 소스가 간결해지실거에요!
css는 예를들어
</p>
<p><span style="font-size:10pt;">#<code>navHead<strong>.on</strong> #navColor { background-color:#fff; }</code></span></p>
<p>이런식으루요!
로고이미지 같은 부분은 백그라운드로 처리해주시면 CSS로 이미지변경이 가능하니까 처리가 되실거구요
</span></p>
<pre>
<span style="font-size:10pt;"><code>$('#navHead').hover(function(){
$(this).addClass('on');
},function(){
$(this</code><code>).removeClass('on');
});
</code></span></pre>
<p><span style="font-size:10pt;">
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인