헤더 풀다운메뉴 스타일 제이쿼리 채택완료
</p>
<p><div id="header">
<div id="container_wr">
<a href="/" class="hd_logo"><img src="/img/logo.png" alt="" /></a>
<ul id="top_menu">
<li><a href="">1차메뉴-1</a></li>
<li><a href="">1차메뉴-2</a></li>
<li><a href="">1차메뉴-3</a></li>
<li><a href="">1차메뉴-4</a></li>
<li><a href="">1차메뉴-5</a></li>
<li><a href="">1차메뉴-6</a></li>
</ul>
</div>
<div class="bottom_menu">
<div id="container_wr">
<ul>
<li><a href="">2차메뉴 1-1</a></li>
<li><a href="">2차메뉴 1-2</a></li>
<li><a href="">2차메뉴 1-3</a></li>
<li><a href="">2차메뉴 1-4</a></li>
<li><a href="">2차메뉴 1-5</a></li>
<li><a href="">2차메뉴 1-6</a></li>
</ul>
<ul>
<li><a href="">2차메뉴 2-1</a></li>
<li><a href="">2차메뉴 2-2</a></li>
<li><a href="">2차메뉴 2-3</a></li>
<li><a href="">2차메뉴 2-4</a></li>
</ul>
<ul>
<li><a href="">2차메뉴 3-1</a></li>
<li><a href="">2차메뉴 3-2</a></li>
<li><a href="">2차메뉴 3-3</a></li>
<li><a href="">2차메뉴 3-4</a></li>
<li><a href="">2차메뉴 3-5</a></li>
</ul>
<ul>
<li><a href="">2차메뉴 4-1</a></li>
<li><a href="">2차메뉴 4-2</a></li>
</ul>
<ul>
<li><a href="">2차메뉴 5-1</a></li>
</ul>
<ul>
<li><a href="">2차메뉴 6-1</a></li>
<li><a href="">2차메뉴 6-2</a></li>
</ul>
</div>
</div>
</div></p>
<p>
위에가 헤더의 HTML 소스구요
</p>
<p>$(document).ready(function(){
$('#header #top_menu').mouseenter(function(){
$('.bottom_menu').addClass("on");
$('.bottom_menu').slideDown();
});</p>
<p> $('#header').mouseleave(function(){
$('.bottom_menu').slideUp();
});
});</p>
<p>
위에가 제이쿼리소스에요!
현재 1차메뉴를 오버했을때 2차메뉴가 슬라이드돼서 쭉내려오는데까지 성공.
헤더에서 마우스가 벗어났을때 2차메뉴가 슬라이드 업되는것까지 성공.
하지만 2차메뉴를 오버했을때 1차메뉴의 오버스타일이 유지가 됐으면 좋겠는데..
2차메뉴로 마우스를 내리면 1차메뉴의 오버스타일이 사라집니다..
1차메뉴와 2차메뉴를 따로둬서 그런걸까요 ㅠ
따로둬도 1차메뉴 바로 아래있는 2차메뉴를 오버하고있을때 1차메뉴의 오버스타일이 유지됐으면 좋겠습니다..
아래 사진은 차례대로 1차메뉴 오버스타일(빨간 원), 2차메뉴 오버스타일(빨간원)입니다.
현재는 저렇게 따로따로 스타일이 들어가는데.. 1차메뉴 오버스타일과 2차메뉴 오버스타일이 같이 들어갔으면 좋겠어요..ㅠㅠ
https://www.hondakorea.co.kr/motorcycle/main/main.do">https://www.hondakorea.co.kr/motorcycle/main/main.do
이 홈페이지 메뉴처럼요!
제발 부탁드립니다 ㅠㅠㅠㅠㅠ
답변 2개
<script>
$(document).ready(function(){
$('#header #top_menu').mouseenter(function(){
$('.bottom_menu').addClass("on");
$('.bottom_menu').slideDown();
});
$('#header').mouseleave(function(){
$('.bottom_menu').slideUp();
});
//추가
$('#container_wr ul').each(function(i,e){
$(e).hover(function(){
$('#top_menu li').eq(i).addClass('hoverStyle');
},function(){
$('#top_menu li').removeClass('hoverStyle');
})
})
});
</script>
답변에 대한 댓글 4개
id는 한페이지에 2개이상 존재할 수 없으니, id를 바꿔주세요
추가한대로 했는데 그 전이랑 똑같아서요 ㅠㅠ css도 보여드릴까요?
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
container_wr ul하면 1차메뉴, 2차메뉴 둘다 선택돼서요!