헤더 풀다운메뉴 스타일 제이쿼리
본문
<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>
위에가 헤더의 HTML 소스구요
$(document).ready(function(){
$('#header #top_menu').mouseenter(function(){
$('.bottom_menu').addClass("on");
$('.bottom_menu').slideDown();
});
$('#header').mouseleave(function(){
$('.bottom_menu').slideUp();
});
});
위에가 제이쿼리소스에요!
현재 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
이 홈페이지 메뉴처럼요!
제발 부탁드립니다 ㅠㅠㅠㅠㅠ
답변 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>
혹시 추가한 container_wr ul 은 2차메뉴의 ul 인가요?
container_wr ul하면 1차메뉴, 2차메뉴 둘다 선택돼서요!
아 #container_wr 이 두개네요 바텀메뉴를 가르킵니다
id는 한페이지에 2개이상 존재할 수 없으니, id를 바꿔주세요
아래 추가된 제이쿼리가 어떤뜻인지 알수있을까요?
추가한대로 했는데 그 전이랑 똑같아서요 ㅠㅠ css도 보여드릴까요?
.hoverStyle 에 hover될 스타일넣으셨나요?
