자바스크립트 드롭다운메뉴
본문
드롭다운 메뉴를 만들고 있습니다. 초보라 어려움이 많네요.
아래 사이트와 같은 메뉴의 형태를 만들려고 합니다.
레이아웃은 아래와 같습니다.
<div id="menu_nav" >
<div id="main_menu">
<ul id="menulist">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</div>
<div id="submenu_all">
<div id="submenu_inner">
<ul class="submenu_column column1" style="background:gray;">
<li><a>서브1</a> </li>
</ul>
<ul class="submenu_column column2" style="background:green;">
<li><a>서브2</a></li>
<li><a>서브2-1</a></li>
<li><a>서브2-2</a></li>
</ul>
<ul class="submenu_column column3" style="background:blue;">
<li><a>서브3</a></li>
<li><a>서브3-1</a></li>
</ul>
</div>
</div>
</div>
아래는 css 입니다.
#submenu_all {
display: none;
}
#submenu_all.active {
display: block;
}
자바스크립트
jQuery(function($){
$('#menu_nav').on('mouseover', '#menulist', showSubAll)
.on('mouseover', '#submenu_all', showSubAll );
$('#menu_nav').on('mouseout', '#menulist', closeSubAll);
.on('mouseout', '#submenu_all', scloseSubAll );
//mouse over 시 active 클래스 추가
function showSubAll(){
var subAll = $('#submenu_all');
if( subAll.is(":hidden") ){
subAll.addClass('active');
}
}
//mouse out 시 active 클래스 제거
function closeSubAll(){
var subAll = $('#submenu_all');
if( subAll.is(":visible") ){
subAll.removeClass('active');
}
}
});
자바스크립트 부분이 잘 안되네요. 메인메뉴 mouse오버시, 서브메뉴 보이는 건 되는데,
서브메뉴가 나왔을때, 서브메뉴 마우스오버시 계속 보이도록 하고 서브메뉴 밖으로 마우스 아웃되면 서브메뉴 사라지고... 이걸 함께 연결하려니 안되네요...
혹시 지금 제가 메뉴 만드는 방법이 깔끔하지 못하게 하는 거라면, 보통 이런 전체 서브메뉴 펼침 만들때, 어떻게 하나요?
조언부탁드립니다...ㅠ
답변을 작성하시기 전에 로그인 해주세요.
