5 아코디언메뉴
1. 아코디언메뉴
가변높이의 아코디언 메뉴 만들어보자
1.1. 제이쿼리
- 지시문
- HTML
- CSS
- JQ
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <title>Document</title>6 </head>7
8 <body>9 <ul class="gnb">10 <li>11 <a href="#">회사소개</a>12 <ul class="sub">13 <li><a href="#">submenu1</a></li>14 <li><a href="#">submenu2</a></li>15 <li><a href="#">submenu3</a></li>16 <li><a href="#">submenu4</a></li>17 <li><a href="#">submenu5</a></li>18 </ul>19 </li>20 <li>21 <a href="#">제품소개</a>22 <ul class="sub">23 <li><a href="#">submenu1</a></li>24 <li><a href="#">submenu2</a></li>25 <li><a href="#">submenu3</a></li>26 <li><a href="#">submenu4</a></li>27 <li><a href="#">submenu5</a></li>28 <li><a href="#">submenu6</a></li>29 <li><a href="#">submenu7</a></li>30 </ul>31 </li>32 <li>33 <a href="#">커뮤니티</a>34 <ul class="sub">35 <li><a href="#">submenu1</a></li>36 <li><a href="#">submenu2</a></li>37 <li><a href="#">submenu3</a></li>38 </ul>39 </li>40 <li>41 <a href="#">다운로드</a>42 <ul class="sub">43 <li><a href="#">submenu1</a></li>44 <li><a href="#">submenu2</a></li>45 </ul>46 </li>47 </ul>48 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>49 </body>50</html>1* {2 margin: 0;3 padding: 0;4}5
6html {7 font-size: 62.5%;8}9
10body {11 font-size: 1.6rem;12}13
14a {15 text-decoration: none;16}17
18ul,19li {20 list-style: none;21}22
23.gnb {24 width: 20rem;25 margin: 2rem auto 0;26 text-align: center;27 text-indent: 1rem;28}29
30.gnb > li > a {31 display: block;32 background: #390;33 cursor: pointer;34 line-height: 3rem;35 border-top: 0.1rem dotted #fff;36 color: #fff;37}38
39.gnb .sub li {40 line-height: 3rem;41 background: #cf9;42 padding: 1rem;43}44
45.gnb .sub li a {46 display: block;47 width: 100%;48 height: 100%;49 color: #222;50}51
52.gnb .sub li:hover {53 background: #cf0;54}55
56.sub {57 height: 0;58 transition: height 0.5s;59 overflow: hidden;60}1$(() => {2 $('.gnb>li').click(function () {3 let tg = $(this);4 let subH = $('.sub>li').innerHeight();5 let subLen = tg.find('li>a').length;6 let subTH = subH * subLen;7 $('.sub').removeClass('on').outerHeight(0);8 tg.find('.sub').addClass('on').outerHeight(subTH);9 });10});1.2. 자바스크립트
- 지시문
- HTML
- CSS
- JQ
- JS
투뎁스의 높이를 스크립트에서 가변적으로 조작하는 아코디언 메뉴를 만들어봅시다.
1<!DOCTYPE html>2<html lang="ko">3 <head>4 <meta charset="UTF-8" />5 <title>Document</title>6 </head>7
8 <body>9 <ul class="gnb">10 <li>11 <a href="#">회사소개</a>12 <ul class="sub">13 <li><a href="#">submenu1</a></li>14 <li><a href="#">submenu2</a></li>15 <li><a href="#">submenu3</a></li>16 <li><a href="#">submenu4</a></li>17 <li><a href="#">submenu5</a></li>18 </ul>19 </li>20 <li>21 <a href="#">제품소개</a>22 <ul class="sub">23 <li><a href="#">submenu1</a></li>24 <li><a href="#">submenu2</a></li>25 <li><a href="#">submenu3</a></li>26 <li><a href="#">submenu4</a></li>27 <li><a href="#">submenu5</a></li>28 <li><a href="#">submenu6</a></li>29 <li><a href="#">submenu7</a></li>30 </ul>31 </li>32 <li>33 <a href="#">커뮤니티</a>34 <ul class="sub">35 <li><a href="#">submenu1</a></li>36 <li><a href="#">submenu2</a></li>37 <li><a href="#">submenu3</a></li>38 </ul>39 </li>40 <li>41 <a href="#">다운로드</a>42 <ul class="sub">43 <li><a href="#">submenu1</a></li>44 <li><a href="#">submenu2</a></li>45 </ul>46 </li>47 </ul>48 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>49 </body>50</html>1* {2 margin: 0;3 padding: 0;4}5
6html {7 font-size: 62.5%;8}9
10body {11 font-size: 1.6rem;12}13
14a {15 text-decoration: none;16}17
18ul,19li {20 list-style: none;21}22
23.gnb {24 width: 20rem;25 margin: 2rem auto 0;26 text-align: center;27 text-indent: 1rem;28}29
30.gnb > li > a {31 display: block;32 background: #390;33 cursor: pointer;34 line-height: 3rem;35 border-top: 0.1rem dotted #fff;36 color: #fff;37}38
39.gnb .sub li {40 line-height: 3rem;41 background: #cf9;42 padding: 1rem;43}44
45.gnb .sub li a {46 display: block;47 width: 100%;48 height: 100%;49 color: #222;50}51
52.gnb .sub li:hover {53 background: #cf0;54}55
56.sub {57 height: 0;58 transition: height 0.5s;59 overflow: hidden;60}1$(() => {2 $('.gnb>li').click(function () {3 let tg = $(this);4 let subH = $('.sub>li').innerHeight();5 let subLen = tg.find('li>a').length;6 let subTH = subH * subLen;7 $('.sub').removeClass('on').outerHeight(0);8 tg.find('.sub').addClass('on').outerHeight(subTH);9 });10});1const depth1 = document.querySelectorAll('.gnb>li');2const sub = document.querySelectorAll('.sub');3depth1.forEach((el, idx) => {4 el.addEventListener('click', function () {5 let tg = this;6 let subH = document.querySelector('.sub>li').clientHeight;7 let subLen = tg.children[1].childElementCount;8 let subHT = subH * subLen;9 console.log(subHT);10 tg.querySelector('.sub').classList.remove('on');11 subOff();12 tg.querySelector('.sub').style.height = subHT + 'px';13 });14});15function subOff() {16 sub.forEach((el) => {17 el.classList.remove('on');18 el.style.height = 0;19 });20}