아코디언 이미지 메뉴 만들기

여러 개의 이미지가 접혀있는 아코디언 이미지 메뉴를 만들어 보겠습니다. 이전 아코디언 메뉴 만들기와 비슷한 형식이지만 텍스트 대신 이미지로 채워져 메뉴의 기능과 더불어 디스플레이적 요소까지 가지고 있습니다. 기본적으로 첫 번째 이미지가 열려있고 다른 메뉴에 마우스 커서를 올렸을 때 넓어지면서 메뉴가 열리게 됩니다.

미리보기  |  다운로드

The HTML

 

우선 <div id="section>으로 전체 아코디언 메뉴를 감싸주고 <div class="section">으로 한번 더 감싸줍니다. 각각의 메뉴박스는 <div class="cont">로 싸여있으며 이미지 파일이 들어가있는 <span class="bg">, 마우스 커서가 올려져있지 않을 때 숫자가 보여질 부분은 <span class="title_off">, 마우스 커서가 올려졌을 때 타이틀이 보여질 부분은 <span class="title_on">, 마우스 커서가 없을 때 어두운 커버 레이어로 덮을 부분은 <span class="layer">로 구성되어 있습니다.

 
<div id="section">								

	<div class="section">
		<div class="cont on">
			<span class="bg"><img src="img/01.jpg" /></span>	
			<span class="title_off"><img src="img/cont_title01_out.png" /></span>
			<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
			<span class="layer"></span>
		</div>
        

 

이제 나머지 메뉴 4개를 덧붙여줍니다. 여기서는 첫 번째 메뉴를 열어놓기로 했으므로 첫 번째 메뉴를 감싸고 있는 div 태그에 .on을 추가합니다.

 
<div id="section">								
	
	<div class="section">
				<div class="cont on">					
					<span class="bg"><img src="img/01.jpg" /></span>	
                    <span class="title_off"><img src="img/cont_title01_out.png" /></span>			
					<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
					<span class="layer"></span>
				</div>
                <div class="cont">					
					<span class="bg"><img src="img/02.jpg" /></span>	
                    <span class="title_off"><img src="img/cont_title02_out.png" /></span>			
					<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
					<span class="layer"></span>
				</div>
                <div class="cont">					
					<span class="bg"><img src="img/01.jpg" /></span>	
                    <span class="title_off"><img src="img/cont_title03_out.png" /></span>			
					<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
					<span class="layer"></span>
				</div>
                <div class="cont">					
					<span class="bg"><img src="img/01.jpg" /></span>	
                    <span class="title_off"><img src="img/cont_title04_out.png" /></span>			
					<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
					<span class="layer"></span>
				</div>
                <div class="cont">					
					<span class="bg"><img src="img/01.jpg" /></span>	
                    <span class="title_off"><img src="img/cont_title05_out.png" /></span>			
					<span class="title_on"><a href="#"><img src="img/cont_title_on.png" /></a></span>
					<span class="layer"></span>
				</div>
     </div>
</div>                
        

The CSS

/* main */

#section {
	width:1035px;      // 전체 아코디언 메뉴의 넓이 설정
	margin:0 auto; 
	padding:200px 0 0;
}
#section > div {
	margin-bottom:150px;
}
#section .section {
	height:600px;      // 높이 설정 
}
#section .section .cont {          // 각각의 메뉴박스 기본값 설정
	width:153px;       
	height:600px; 
	overflow:hidden; 
	float:left; 
	position:relative; 
	border-left:solid 1px #f0ede7;
}
#section .section .cont div:first-child {
	border-left:none;
}
#section .section .cont .bg {
	position:absolute; top:0; left:0;
}
#section .section .cont.on {        // 마우스 커서 올렸을 때 넓이 설정
	width:413px;
}
#section .section .cont.on .title_off {
	display:none;
}
#section .section .cont.on .title_on {
	display:block;
}
#section .section .cont.on .layer {       // 마우스 커서 올렸을 때 커버 레이어 감추기
	display:none
}
#section .section .cont .title_off, 
#section .section .cont .title_on {
	position:relative;
	display:block;
	width:153px;
	text-align:center;
	z-index:9999;
	padding-top: 48%;
}
#section .section .cont .title_on {
	width:413px;
	display:none
}
#section .section .cont .layer {
	display:block; 
	width:413px; 
	height:600px; 
	position:absolute; 
	left:0; 
	top:0; 
	z-index:1; 
	background:#333333; 
	filter:alpha(opacity=90); 
	opacity:0.9;
}
			  

 

The Javascript

 

메뉴 위로 마우스 커서를 올리고 내릴 때의 애니메이션을 줍니다.

 
              
$(function() {

	$(".section .cont").mouseover(function() {					
		$(".section .cont").stop().animate({width:"153px"}, 900, 'easeOutCirc').removeClass("on");
		$(this).stop().animate({width:"413px"}, 900, 'easeOutCirc').addClass("on");	
	});

});

미리보기  |  다운로드

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.