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