오늘은 jQuery를 이용해서 네비게이션(div>ul>li>ul>li) 만들기를 해볼까 합니다. 수직 형태의 네비게이션과 수평 형태의 네비게이션 동작이 약간 달라서 예제를 두 개 준비 했습니다. 예제의 마크업은 같지만 수직, 수평 네비게이션을 구분하기 위해 클래스 이름을 다르게 지정하고 각각 다른 동작을 입혔습니다. CSS를 사용해서 수직 수평 모양을 지정할 수 있지만 적용하지 않았습니다.

수직 네비게이션 만들기

수직 네비게이션의 요구 조건은 다음과 같습니다.

• 큰 메뉴를 클릭하면 
  • 열려있는 서브 메뉴가 모두 닫히고
  • 클릭한 메뉴의 하위 메뉴가 열리며
  • 클릭한 메뉴의 글꼴이 굵어진다 
• 포커스가 맺히면 클릭한 것처럼 동작한다

수직 네비게이션 예제

수직 네비게이션 HTML

<div class="gnbVr">
	<ul>
		<li><a href="#">#1</a>
			<ul>
				<li><a href="#">#1-1</a></li>
				<li><a href="#">#1-2</a></li>
			</ul>
		</li>
		<li><a href="#">#2</a>
			<ul>
				<li><a href="#">#2-1</a></li>
				<li><a href="#">#2-2</a></li>
			</ul>
		</li>
		<li><a href="#">#3</a>
			<ul>
				<li><a href="#">#3-1</a></li>
				<li><a href="#">#3-2</a></li>
			</ul>
		</li>
	</ul>
</div>

수직 네비게이션 JS

<script type="text/javascript">
$(function(){
	var gnbVr = $('.gnbVr');
	gnbVr.find('>ul>li>ul').hide();
	gnbVr.find('>ul>li>a[href=#]')
		.click(function(){
			gnbVr
				.find('>ul>li>ul:visible')
				.slideUp(200)
				.parent('li')
				.removeClass('active')
				.find('>a')
				.css('fontWeight','');
			$(this)
				.next('ul:hidden')
				.slideDown(200)
				.parent('li')
				.addClass('active')
				.find('>a')
				.css('fontWeight','bold');
			return false;
		})
		.focus(function(){
			$(this).click();
		});
});
</script>

수평 네비게이션 만들기

수평 네비게이션의 요구 조건은 다음과 같습니다.

• 큰 메뉴를 마우스 오버 하면 
  • 열려있는 서브 메뉴가 모두 닫히고
  • 마우스 오버 메뉴의 하위 메뉴가 열리며
  • 마우스 오버 메뉴의 글꼴이 굵어진다
• 포커스가 맺히면 마우스 오버한 것처럼 동작한다
• 메뉴 영역에서 마우스가 떠나면
  • 서브 메뉴가 모두 닫히고
  • 굵은 글꼴을 제거한다

수평 네비게이션 예제

수평 네비게이션 HTML

<div class="gnbHr">
	<ul>
		<li><a href="#">#1</a>
			<ul>
				<li><a href="#">#1-1</a></li>
				<li><a href="#">#1-2</a></li>
			</ul>
		</li>
		<li><a href="#">#2</a>
			<ul>
				<li><a href="#">#2-1</a></li>
				<li><a href="#">#2-2</a></li>
			</ul>
		</li>
		<li><a href="#">#3</a>
			<ul>
				<li><a href="#">#3-1</a></li>
				<li><a href="#">#3-2</a></li>
			</ul>
		</li>
	</ul>
</div>

수평 네비게이션 JS

<script type="text/javascript">
$(function(){
	var gnbHr = $('.gnbHr');
	gnbHr.find('>ul>li>ul').hide();
	gnbHr.find('>ul>li>a')
		.mouseover(function(){
			gnbHr
				.find('>ul>li>ul:visible')
				.slideUp(200)
				.parent('li')
				.removeClass('active')
				.find('>a')
				.css('fontWeight','');
			$(this)
				.next('ul:hidden')
				.slideDown(200)
				.parent('li')
				.addClass('active')
				.find('>a')
				.css('fontWeight','bold');
		})
		.focus(function(){
			$(this).mouseover();
		})
		.end()
		.mouseleave(function(){
			gnbHr
				.find('>ul>li>ul')
				.slideUp(200)
				.prev('a')
				.css('fontWeight','');
		});
});
</script>

오늘은 자세한 설명을 생략하겠습니다. 코드가 너무 길죠? 이렇게 메소드 체이닝이 길어지면 메소드 기준으로 줄을 바꿈으로써 코드 가독성을 높일 수 있습니다.