5. accordion
1. 아코디언메뉴
가변높이의 아코디언 메뉴 만들어보자
1.1. 제이쿼리
지시문
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul class="gnb">
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
</ul>
</li>
<li>
<a href="#">제품소개</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
<li><a href="#">submenu7</a></li>
</ul>
</li>
<li>
<a href="#">커뮤니티</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
</ul>
</li>
<li>
<a href="#">다운로드</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
.gnb {
width: 20rem;
margin: 2rem auto 0;
text-align: center;
text-indent: 1rem;
}
.gnb > li > a {
display: block;
background: #390;
cursor: pointer;
line-height: 3rem;
border-top: 0.1rem dotted #fff;
color: #fff;
}
.gnb .sub li {
line-height: 3rem;
background: #cf9;
padding: 1rem;
}
.gnb .sub li a {
display: block;
width: 100%;
height: 100%;
color: #222;
}
.gnb .sub li:hover {
background: #cf0;
}
.sub {
height: 0;
transition: height 0.5s;
overflow: hidden;
}
JQ
$(() => {
$('.gnb>li').click(function () {
let tg = $(this);
let subH = $('.sub>li').innerHeight();
let subLen = tg.find('li>a').length;
let subTH = subH * subLen;
$('.sub').removeClass('on').outerHeight(0);
tg.find('.sub').addClass('on').outerHeight(subTH);
});
});
1.2. 자바스크립트
지시문
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<ul class="gnb">
<li>
<a href="#">회사소개</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
</ul>
</li>
<li>
<a href="#">제품소개</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
<li><a href="#">submenu7</a></li>
</ul>
</li>
<li>
<a href="#">커뮤니티</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
</ul>
</li>
<li>
<a href="#">다운로드</a>
<ul class="sub">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
.gnb {
width: 20rem;
margin: 2rem auto 0;
text-align: center;
text-indent: 1rem;
}
.gnb > li > a {
display: block;
background: #390;
cursor: pointer;
line-height: 3rem;
border-top: 0.1rem dotted #fff;
color: #fff;
}
.gnb .sub li {
line-height: 3rem;
background: #cf9;
padding: 1rem;
}
.gnb .sub li a {
display: block;
width: 100%;
height: 100%;
color: #222;
}
.gnb .sub li:hover {
background: #cf0;
}
.sub {
height: 0;
transition: height 0.5s;
overflow: hidden;
}
JQ
$(() => {
$('.gnb>li').click(function () {
let tg = $(this);
let subH = $('.sub>li').innerHeight();
let subLen = tg.find('li>a').length;
let subTH = subH * subLen;
$('.sub').removeClass('on').outerHeight(0);
tg.find('.sub').addClass('on').outerHeight(subTH);
});
});
JS
const depth1 = document.querySelectorAll('.gnb>li');
const sub = document.querySelectorAll('.sub');
depth1.forEach((el, idx) => {
el.addEventListener('click', function () {
let tg = this;
let subH = document.querySelector('.sub>li').clientHeight;
let subLen = tg.children[1].childElementCount;
let subHT = subH * subLen;
console.log(subHT);
tg.querySelector('.sub').classList.remove('on');
subOff();
tg.querySelector('.sub').style.height = subHT + 'px';
});
});
function subOff() {
sub.forEach((el) => {
el.classList.remove('on');
el.style.height = 0;
});
}