CSS, Jquery 세로 메뉴 만들기(서브 메뉴)

CSS, Jquery 세로 메뉴 만들기(서브 메뉴)

 

 

1. hover 이벤트 이용해서 세로 메뉴 만들기

 

$(this).find(".sub_menu")

→ 내가 뭘 클릭할지 모르기 때문에 find로 찾아준다.

→ this : 위에서 언급한 것(.header_menu>li)

<ul id="quickmenu">
	<li><a href="#">Home</a>
		<ul class="sub_menu_list">
			<li><a href="#">홈</a></li>
			<li><a href="#">바로가기</a></li>
		</ul>
	</li>
	<li><a href="#">Blog</a>
		<ul class="sub_menu_list">
			<li><a href="#">일상</a></li>
			<li><a href="#">공부</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a>
		<ul class="sub_menu_list">
			<li><a href="#">네이버</a></li>
			<li><a href="#">티스토리</a></li>
		</ul>
	</li>
</ul>

#quickmenu{
	width: 200px;
}
		
#quickmenu>li{
	width: 200px;
	line-height: 30px;
	text-align: center;
	background-color: pink;
	margin-right: 5px;
}
				
.sub_menu_list{
	display: none;
}
				
.sub_menu_list li{
	background-color: skyblue;
}
		
#quickmenu li:last-child{
	margin-right: 0;
}

<script>
	$(document).ready(function(){		
		$('#quickmenu li').hover(function(){
			$(this).find('.sub_menu_list').slideDown();
		}, function(){
			$(this).find('.sub_menu_list').slideUp();
		});	
	});
</script>

 

→ CSS 만으로도 세로 메뉴 이벤트 구현 가능