아코디언메뉴
1. 아코디언메뉴
가변높이의 아코디언 메뉴 만들어보자
1.1. 제이쿼리
- 지시문
- HTML
- CSS
- JQ
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
<!DOCTYPE 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>
* { 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;}
$(() => { $('.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
- CSS
- JQ
- JS
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
<!DOCTYPE html>* {$(() => {const depth1 = document.querySelectorAll('.gnb>li');
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
<!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>
* { 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;}
$(() => { $('.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); });});
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; });}