web/javascript
아코디언 메뉴 만들기
kkangsseul1014
2023. 9. 28. 19:21
아코디언 메뉴(accordion menu)는 웹 또는 모바일 앱 디자인에서 사용되는 UI(사용자 인터페이스) 구성 요소 중
하나입니다 HTML, CSS, JavaScript 등을 사용하여 구현할 수 있습니다. 주로 웹 개발에서 사용되며, 사용자가 클릭하거나 터치하여 메뉴 항목을 펼치고 닫을 수 있습니다.
(일반적으로 각 섹션을 접을 수 있고 펼칠 수 있다)
3개의 이미지가 접혀있는 아코디언 이미지 메뉴를 만들어 보겠습니다
이미지와 텍스트를 배치하고 스크립트에서 ' default ' 와 ' expand ' 클래스를 추가/제거
하여 메뉴에 커서를 올리면 펼쳐지고 영역을 벗어나면 접히는 기능입니다
결과 ::)
See the Pen Untitled by kkang2469 (@kkang2469) on CodePen.
아래 소스코드를 참고해보면 위와 같은 결과가 나옵니다
html
ul 요소로 아코디언 메뉴를 만듭니다
각 li 요소에 배경 이미지를 넣습니다 마우스 커서가 올려져 있지 않을 때
타이틀과 아이콘 이미지가 보이는 부분은 <div class="centerH2"> 클래스이고
마우스 커서가 올려져 있을 때 텍스트와 배경이 보이는 부분은 <div class="whiteBox"> 클래스입니다
<ul class="prd_acd wView">
<!-- 기본노출 -->
<li class="bnr_v_acd01 h800">
<div class="outType">
<div class="centerH2">
<p class="fot">건강을 생각한<br>맛있는 음식</p>
<p class="mt20"><img src="C:/Users/선영/eggdrop/img/ico_brand_more.png" alt="brand"></p>
</div>
</div>
<!-- 마우스오버노출 -->
<div class="inType centerH">
<div class="whiteBox">
<p class="fot">건강을 생각한<br>맛있는 음식</p>
<p class="fot_long">
- 프리미엄 무 항생재 계란만 사용<br>- 고급 버터 사용으로 구운 브리오쉬<br>
- 영양의균형<br>- 합리적인 가격대의 맛있는 음식</p>
</div>
</div>
</li>
<!-- 기본노출 -->
<li class="bnr_v_acd02 h800">
<div class="outType">
<div class="centerH2">
<p class="fot">엄격한 품질 관리와<br>창의적인 메뉴</p>
<p class="mt20"><img src="C:/Users/선영/eggdrop/img/ico_brand_more.png" alt="brand"></p>
</div>
</div>
<!-- 마우스오버노출 -->
<div class="inType centerH">
<div class="whiteBox">
<p class="fot">엄격한 품질 관리와<br>창의적인 메뉴</p>
<p class="fot_long">
- 맛과 조리법에 대한 엄격한 품질관리<br>맛있는 스크램블 에그<br>
- 중독성 있는 특제소스</p>
</div>
</div>
</li>
<li class="bnr_v_acd03 h800">
<!-- 기본노출 -->
<div class="outType">
<div class="centerH2">
<p class="fot">아메리칸 다이너를<br>모티브로 한 공간</p>
<p class="mt20"><img src="C:/Users/선영/eggdrop/img/ico_brand_more.png" alt="brand"></p>
</div>
</div>
<!-- 마우스 오버 -->
<div class="inType centerH">
<div class="whiteBox">
<p class="fot">아메리칸 다이너를<br>모티브로 한 공간</p>
<p class="fot_long">
- 세련된 도시 이미지를 연출할 수 있는 공간<br>
- 매장 전면관 메뉴 패키지의 시크니쳐 디자인을<br>구성하여 디자인에 주력함</p>
</div>
</div>
</li>
</ul>
</div>
</section>
CSS
. prd_acd 클래스에 속성값 flex를 사용하여 가로 가운데 배치합니다
relative 속성값을 통해 위치를 지정합니다
. li 요소에 transition을 속성을 사용해 애니메이션 속도를 조절합니다
.prd_acd {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
position: relative;
top: 0;
left: 0;
width: 100%;
opacity: 0;
}
/* 키프레임 효과를 준다 */
.prd_acd li {
margin: 0px;
transition: all 400ms ease-in-out 0ms;
transition-duration: 0.5s;
cursor: default;
position: relative;
}
.prd_acd li .whiteBox p { -> 텍스트가 해당 너비를 넘기면 자동으로 줄바꿈이 됩니다
line-height: 30px; - 텍스트 간격을 지정합니다
white-space: nowrap;
}
.prd_acd .default {
width: 33%;
color: rgba(255, 255, 255, 0); - 마우스 커서가 올려져 있지 않을 때 타이틀과 아이콘 이미지가 보이는 부분
overflow: hidden; - default 클래스에 넘치는 콘텐츠를 숨깁니다
}
.prd_acd .expand {
width: 100000%;- 마우스 커서가 올려져 있을 때 배경이 보이는 부분
color: #fff;
padding: 0px;
}
/* 아코디언 기본값 / 마우스오버 */
ul.prd_acd li.default .inType { - intype 클래스에 화이트 박스와 텍스트를 숨깁니다
display: none;
}
ul.prd_acd li.expand.default .ouType { outType 클래스에 타이틀과 아이콘 이미지를 숨깁니다
display: none;
}
ul.prd_acd li.expand.default .inType { - 마우스 올려져 있지 않을 때 아이콘이미지 와 텍스트 표시하기
display: block;
}
ul.prd_acd li.expand.default .inType.centerH {- 특정 한 태그의 클래스앞에 최대너비와 높이값을 준다
max-height: 500px;
max-width: 420px;
width: 100%;
background: #fff;
}
ul.prd_acd li.expand.default .inType.centerH .whiteBox { - 클래스 안에 화이트 박스 위치를 지정합니다
color: #222;
padding: 15% 0;
position: relative
}
.h800 {
height: 800px; - li 태그에 높이 값을 줍니다
}
.centerH2 {
position: absolute; - 텍스트를 가로 가운데 배치 합니다
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
.centerH2 .fot {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
.mt20 {
height: 105px; - 아이콘 이미지 높이값 지정하기
}
.bnr_v_acd01 { - 배경이미지 크기에 맞게 가운데 위치로 설정합니다
background: url(C:/Users/선영/eggdrop/img/brand_bnr01.jpg) no-repeat scroll 0 0;
top: 0;
left: 0;
background-position: center;
width: 100%;
-webkit-background-size: cover;
background-size: cover;
z-index: 1;
text-align: center;
}
.bnr_v_acd02 {
background: url(C:/Users/선영/eggdrop/img/brand_bnr02.jpg) no-repeat scroll 0 0;
top: 0;
left: 0;
background-position: center;
width: 100%;
-webkit-background-size: cover;
background-size: cover;
z-index: 1;
text-align: center;
}
.bnr_v_acd03 {
background: url(C:/Users/선영/eggdrop/img/brand_bnr03.jpg) no-repeat scroll 0 0;
top: 0;
left: 0;
background-position: center;
width: 100%;
-webkit-background-size: cover;
background-size: cover;
z-index: 1;
text-align: center;
}
mouseover() / mouseout()
: selecter를 지정하여 mouseover / mouseout 이벤트를 구현한다
js
prd_acd 클래스 를 가진 곳에 스타일 opacity: 1을 주고 보이게 지정합니다
li 태그에 default 값을 추가합니다
$(function () {
window.setTimeout(function () { - 시간이 지나면 해당 함수를 한번 호출 합니다
$('ul.prd_acd').css('opacity', '1');
}, 0);
$('li').addClass('default');
$('li').on('mouseover', function () { - 마우스 커서가 올려져 있을 때 함수를 실행한다
var e = $('ul.prd_acd > li'); - 변수 e 에 prd_acd 클래스 안에 li 를 저장 합니다
if (e.hasClass('expand')) { - 선택된 요소중 클래스 인지 확인 후 반환
e.removeClass('expand');- 선택된 요소를 제거 한다
$(this).addClass('expand'); - prd_acd 요소 앞에 추가 한다
} else { $(this).addClass('expand'); } - 조건이 맞으면 expand 클래스를 추가한다
})
$('li').on('mouseout', function () { - 마우스 커서가 올려져 있지 않을 때 함수 실행
var e = $('ul.prd_acd > li'); 변수 e 에 prd_acd> li 를 저장한다
if (e.removeClass('expand')) { 변수 e 앞에 클래스 를 제거 한다
e.removeClass('expand'); 변수 e 앞에 클래스 제거
$(this).removeClass('expand'); ul.prd_acd > li' 요소에 클래스를 제거 한다
} else { $(this).removeClass('expand'); }
})
})