[미니 프로젝트] 2. 카테고리 메뉴 만들기

 

 

 

 

 

동반 여행 메뉴 페이지를 만들어 보도록 하겠다.

 

 

 

카테고리 메뉴 만들기

 

 

	<div id="category">
		<nav>
			<ul>
				<li><a href="#">카테고리</a></li>
			</ul>
			<ul>
				<li><a href="trip_Page.html">동반여행</a></li>
			</ul>
			<ul>
				<li><a href="#">펫캘린더</a></li>
			</ul>
			<ul>
				<li id="community"><a href="#">커뮤니티</a>
					<div id="hidden_category">
						<ul>
							<li><a href="#">자유게시판</a></li>
						</ul>
						<ul>
							<li><a href="#">실종신고</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</nav>
		<div id="category_bar">
			<a href="#"><img src="img/icon_arrowright.png"></a>
			<a href="#"><img src="img/icon_arrowleft.png"></a>
		</div>
	</div>

 

 

하단에 있는 category_bar div에는 두 개의 아이콘( > , < )을 넣어주었다.

두 번째 아이콘은 display:none;으로 설정해 숨겨주었다.

 

처음엔 카테고리 메뉴가 펼쳐진 상태이므로 category_bar의 아이콘은 > 이미지로 떠야 하고,

category_bar를 클릭하면 아이콘이 <로 변경되어야 하기 때문이다.

이 부분은 아래 jquery에서 다시 설명하겠다.

 

 

 

 

메인 홈페이지에서 메뉴를 선택해 해당 사이트로 이동하면

왼쪽에 카테고리 메뉴를 고정적으로 보여주기 위해 nav 하위에 ul, li을 작성했다.

 

 

nav와 category_bar은 float:left;로 왼쪽 정렬해주었다.

 

hidden_category는 커뮤니티 메뉴에 마우스 오버했을 때만 나타나도록 하기 위해

기본 세팅은 display:none;으로 설정해주었다.

 

 

//카테고리 hover
$("#category>nav>ul").hover(function() {
	$(this).css("background-color", "#e8f4ea").css("transition-duration","300ms");
}, function() {
	$(this).css("background-color", "white");
});

 

 

카테고리 ul에 마우스 오버했을 때 배경색을 변경해준다.

 

 

 

//커뮤니티 하위메뉴 나타내기
$("#community").hover(function() {
	$("#hidden_category").fadeIn();
},function(){
	$("#hidden_category").css("display", "none");
});

//커뮤니티 하위메뉴 hover
$("#hidden_category>ul").hover(function() {
	$(this).css("background-color", "#e8f4ea").css("transition-duration","300ms");
}, function() {
	$(this).css("background-color", "white");
});

 

 

커뮤니티에 마우스 오버를 하면 숨겨져 있던  하위 메뉴 hidden_category div를 나타나게 했다.

메뉴가 나타날 때는 부트스트랩에서 제공하는 fadeIn을 사용했다.

효과가 있고 없고의 차이가 크기때문에 적절히 잘 사용하는 중이다.

 

 

하위 메뉴 hidden_category div 에도 마우스 오버했을 때 배경색이 바뀌도록 설정했다.

(transition-duration을 통해 천천히 바뀌도록 설정)

 

 

 

//카테고리바 click
	$("#category_bar>a:first").click(function(){
		$("#category>nav").toggle();
		$(this).css("display","none");
		$("#category_bar>a:last").css("display","block");
		$("#category_bar").css("margin-left","30px");
		
	});
	$("#category_bar>a:last").click(function(){
		$("#category>nav").fadeIn();
		$(this).css("display","none");
		$("#category_bar>a:first").css("display","block");
		$("#category_bar").css("margin-left","10px");
	});

 

 

 

> 아이콘을 클릭하면 카테고리 메뉴는 toggle로 인해 사라지고

> 아이콘은 display를 none으로 설정해 숨겨주고

숨겨져 있던 < 아이콘의 display를 block으로 설정해 나타낸다.

 

 

 

똑같이 < 아이콘을 클릭하면 카테고리 메뉴는 toggle로 인해 나타나고

< 아이콘은 display none, > 아이콘은 display block으로 설정한다.

 

 

 

category_bar 클릭하면 카테고리 메뉴 사라짐

 

 

커뮤니티에 마우스 오버하면 하위 메뉴(자유게시판, 실종신고) 나타남

 

 

 

---