반응형 모바일 튜토리얼
우리가 모바일로 볼 때 웹의 구조가 달라지면 더욱 편리하게 볼 수 있다. 그것을 위해 위예시 처럼 웹의 크기에 따라 나타나는게 달라지는 것을 구현해보자.
version 1
html
<header class="top-bar visible-on-md-up">탑바</header>
<header class="mobile-top-bar visible-on-sm-down">모바일 탑바</header>css
/* 768px 이상 에서만 보임 */
@media ( max-width:767px ) {
.visible-on-md-up {
display:none;
}
}
/* 767px 이하 에서만 보임 */
@media ( min-width:768px ) {
.visible-on-sm-down {
display:none;
}
}version 2
html
<header class="top-bar hidden md:block">탑바</header>
<!--
hidden -> display: none;
md:block -> @media (min-width: 768px) {display: block;}
-->
<header class="mobile-top-bar md:hidden">모바일 탑바</header>
<!--
md:block -> @media (min-width: 768px) {display: none;}
-->반응형 모바일 탑바 구현
위 내용을 바탕으로 웹의 너비가 768px이상일 때에는 이런 모습으로 존재하다가
웹의 너비가 767px이하로 줄어들게 되면 아래 모습으로 변하는 탑바를 구현해보자.
html
<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>
<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->
<!-- 테일윈드 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 테일윈드 치트시트 : https://nerdcave.com/tailwind-cheat-sheet -->
<!--평소 탑바-->
<header class="top-bar hidden md:block h-12 fixed inset-0 bottom-auto bg-gray-500 text-white">
<!--
클래스 이름: top-bar
hidden md:block -> 평소에는 hidden => display:none;으로 두었다가
미디어쿼리를 이용해 md:block => @media (min-width: 768px) { display: block; }
768px이상이 되면 display: block;으로 바꿈
fixed -> 스크롤 내려도 그 자리에 있도록 display: fixed;
h-12 -> 높이 설정한 후,
inset-0 bottom-auto -> top:0, left:0, right:0, bottom:auto로 만들어 위에 바처럼 고정되게 만든다.
bg-gray-500 -> 배경색 회색으로
text-white -> 글자 흰색으로
-->
<div class="container mx-auto h-full flex">
<!--
container -> 웹의 너비에 따라 너비가 바뀜
mx-auto -> 가운데로
flex -> display: flex;
h-full -> 높이를 부모 높이의 100%
-->
<a href="#" class="top-bar__logo flex items-center ml-3">
<!--
클래스 이름: top-bar__logo
display속성은 flex로 하고 수직 가운데 정렬 한다.
왼쪽 margin값 부여
-->
<span><i class="far fa-lemon"></i></span>
<!--띄어쓰기-->
<span class="font-bold">DESIGN LEMON</span>
</a>
<div class="flex-grow"></div>
<!--남은 공간을 모두 사용하도록-->
<nav class="top-bar__menu-box-1">
<!--
클래스 이름: top-bar__menu-box-1
-->
<ul class="flex h-full">
<!--
display속성 flex로 한후 높이 100%로
-->
<li class="hover:bg-white hover:text-gray-500">
<!--hover시 배경색은 하얀색 글자색은 회색으로-->
<a href="#" class="h-full flex items-center px-4">
<!--높이는 부모의 100%, flex로 만들어 수직 가운데 정렬한후,
padding값 부여-->
<span><i class="fas fa-home"></i></span>
<!--띄어쓰기-->
<span class="font-bold">HOME</span>
</a>
</li>
<li class="hover:bg-white hover:text-gray-500">
<!--hover시 배경색은 하얀색 글자색은 회색으로-->
<a href="#" class="h-full flex items-center px-4">
<!--높이는 부모의 100%, flex로 만들어 수직 가운데 정렬한후,
padding값 부여-->
<span><i class="fas fa-id-card"></i></span>
<!--띄어쓰기-->
<span class="font-bold">ABOUT ME</span>
</a>
</li>
<li class="hover:bg-white hover:text-gray-500">
<!--hover시 배경색은 하얀색 글자색은 회색으로-->
<a href="#" class="h-full flex items-center px-4">
<!--높이는 부모의 100%, flex로 만들어 수직 가운데 정렬한후,
padding값 부여-->
<span><i class="fas fa-newspaper"></i></span>
<!--띄어쓰기-->
<span class="font-bold">ARTICLES</span>
</a>
</li>
<li class="hover:bg-white hover:text-gray-500">
<!--hover시 배경색은 하얀색 글자색은 회색으로-->
<a href="#" class="h-full flex items-center px-4">
<!--높이는 부모의 100%, flex로 만들어 수직 가운데 정렬한후,
padding값 부여-->
<span><i class="fas fa-people-arrows"></i></span>
<!--띄어쓰기-->
<span class="font-bold">SNS</span>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!--모바일 탑바-->
<header class="mobile-top-bar fixed md:hidden fixed inset-0 bottom-auto h-12 bg-gray-500 text-white">
<!--
클래스 이름: mobile-top-bar
md:hidden -> 미디어쿼리를 이용해 md:hidden => @media (min-width: 768px) { display: none; }
768px이상이 되면 display: none;으로 바꿈
fixed -> 스크롤 내려도 그 자리에 있도록 display: fixed;
h-12 -> 높이 설정한 후,
inset-0 bottom-auto -> top:0, left:0, right:0, bottom:auto로 만들어 위에 바처럼 고정되게 만든다.
bg-gray-500 -> 배경색 회색으로
text-white -> 글자 흰색으로
-->
<div class="container mx-auto h-full flex">
<!--
container -> 웹의 너비에 따라 너비가 바뀜
mx-auto -> 가운데로
flex -> display: flex;
h-full -> 높이를 부모 높이의 100%
-->
<div class="flex-1"></div>
<!--
flex: 1 1 0%;
점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있게 만든다.
-->
<a href="#" class="mobile-top-bar__logo flex items-center">
<!--
클래슬 이름:mobile-top-bar__logo
flex로 만들고 수직 가운데 정렬
-->
<span><i class="far fa-lemon"></i></span>
<!--띄어쓰기-->
<span class="font-bold">DESIGN LEMON</span>
</a>
<div class="flex-1 flex justify-end">
<!--
flex: 1 1 0%;
점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있게 만든다.
그리고 거기서 옆에 메뉴 버튼을 끝으로 보낸다.
전체적으로 보면
<div/>(너비 늘어남) <div/>(로고) <div/>(너비 늘어남 메뉴 끝으로)
이런 구조이다.
-->
<span class="mobile-top-bar__btn-show-side-bar flex items-center mr-3">
<!--
클래스 이름: mobile-top-bar__btn-show-side-bar
flex로 만들어 수직 가운데 정렬한 후에 오른쪽 마진값을 부여
-->
<i class="fas fa-bars"></i>
</span>
</div>
</div>
</header>
<div class="h-12"></div>
<!--section을 fixed인 위 탑 바가 가리므로 탑 바의 높이 만큼 별도의 엘리먼트를 만든다.-->
<section class="section-1">
<div class="container mx-auto">
<!--
container -> 웹의 너비에 따라 너비가 바뀜
mx-auto -> 가운데로
-->
<div class="mx-3">
<!--양옆에 마진 값 부여-->
Lorem...
</div>
</section>
<!-- 폰트 -->
<style>
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 400;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 700;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 300;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}
html>body {
font-family: 'LotteMartDream', sans-serif;
}
</style>css
body {
min-height:500vh;
background-image:linear-gradient(to bottom, #787878, #afafaf);
color:white;
}
/* 최소 높이를 500vh로
배경이미지
글자색은 하얀색으로*/
사이드 바 구현
팝업 구현을 참고하여 이번에는 클릭하면 오른쪽에서 메뉴가 나오는 사이드바를 구현해보자.
추가해야 할 코드
html
<div class="mobile-side-bar md:hidden fixed inset-0 z-50 invisible opacity-0">
<!--
-- mobile-side-bar --
md:hidden -> 웹의 너비가 768이상이면 display를 hidden으로 만든다. 이것을 써주는 이유는
써주지 않았을 때, 사이드바가 평소에 가로 스크롤을 만든다.
invisible opacity-0 -> 평소에 visibility:hidden, opacity:0으로 만들어 보이지 않고 건드릴 수 없게 만들어둔다.
fixed inset-0 -> 스크롤에 영향을 받지 않아야 하므로 position:fixed로 만들고 top, left, right, bottom을 모두 0으로 만들어
배경을 가득 채우도록 만든다.
z-50 -> z-index:50의 의미로 가장 위 레이어를 차지하도록한다.
-->
<div class="mobile-side-bar__content flex flex-col w-80 h-full bg-white ml-auto">
<!--
-- mobile-side-bar__content --
flex로 만들고 방향은 세로방향으로 한다.
너비를 w-80으로 부여, 높이는 100%로 한다.
배경색은 하얀색으로 만들고 margin-left를 auto로 만들어 왼쪽에 붙게 한다.
-->
<div class="mobile-side-bar__head flex-shrink-0 p-3">
<!--
-- mobile-side-bar__head --
flex-shrink-0 -> 너비(flex방향이 세로이므로 높이)가 줄어들지 않게 한다.
p-3 -> padding값 부여
-->
<!-- 닫는 X버튼 -->
<div class="mobile-side-bar__btn-close ml-auto w-8 h-8 relative cursor-pointer">
<!--
margin-left를 auto로 만들어 오른쪽에 붙게 만들고 정사각형 모양으로 만든후 작대기 두개를 포함시키기 위해
position속성을 relative로 만든다.-->
<div class="absolute bg-black inset-x-0 h-1/5"></div>
<div class="absolute bg-black inset-x-0 h-1/5"></div>
<!--
postion속성을 absolute로 만든후에 left, right를 0, 높이를 1/5. 20%로 만들고 배경색을 검정색으로 칠한다.
-->
</div>
<!--------------->
</div>
<div class="mobile-side-bar__body flex-grow">
<!--
-- mobile-side-bar__body --
flex-grow -> 유연한 박스로 만들어 남은 공간을 모두 차지하도록 만든다.
-->
<nav class="mobile-menu-box-1">
</nav>
</div>
</div>
</div>
css
@media (max-width: 767px) {
html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
overflow:hidden;
}
}
/*
767px이하가 되면 html의 스크롤바를 숨긴다.
사이드바를 transform으로
*/
.mobile-side-bar {
transition: visibility 0.3s, opacity 0.3s;
/*사이드바 나타날 때 서서히 나타나도록 애니메이션 부여*/
background-color:rgba(0,0,0,0.5);
/*배경색을 흐린 색으로*/
}
.mobile-side-bar.active {
/*사이드바에 active클래스가 추가되면*/
visibility:visible;
opacity:1;
/*나타나게 만든다.*/
}
.mobile-side-bar__content {
transform:translateX(100%);
/*사이드바의 콘텐츠가 오른쪽에서 나타나는 애니메이션을 만들기 위해서 평소에는 오른쪽으로 너비의 100%만큼
가있게 만든다.*/
transition: transform 0.3s;
/*나타날 때 애니메이션 부여*/
}
.mobile-side-bar.active .mobile-side-bar__content {
/*사이드바에 active클래스가 부여되면 그 후손인 콘텐츠에게*/
transform:translateX(0);
/*원래 자리로 돌아오게 만든다.*/
}
/*X버튼 작대기 하나는 45도 회전, 다른 하나는 -45도 회전*/
.mobile-side-bar__btn-close > div {
top:40%;
transform:rotate(-45deg);
}
.mobile-side-bar__btn-close > div:last-child {
transform:rotate(45deg);
}JS
console.clear();
// 모바일 탑바 초기화
function MobileTopBar__init() {
$('.mobile-top-bar__btn-show-side-bar').click(function() {
/*모바일 탑바의 메뉴 버튼을 클릭하면*/
MobileSideBar__show();
/*사이드바를 나타내는 함수를 실행*/
});
}
// 모바일 사이드바 초기화
function MobileSideBar__init() {
$('.mobile-side-bar, .mobile-side-bar__btn-close').click(function() {
/*사이드바 또는 사이드바 콘텐츠 안에있는 X버튼을 클릭하면*/
MobileSideBar__hide();
/*사이드바를 숨기는 함수를 실행*/
});
$('.mobile-side-bar__content').click(function() {
return false;
/*사이드바를 클릭했을 때 숨겨지는 것은 맞지만 콘텐츠를 클릭했을 때 숨겨지면 안되기 때문에
사이드바 콘텐츠의 클릭을 비활성화 시킨다.*/
});
}
// 모바일 사이드바 노출
function MobileSideBar__show() {
$('.mobile-side-bar').addClass('active');
/*사이드바에게 active클래스를 추가시킨다.*/
$('html').addClass('mobile-side-bar-actived');
/*html에게 스크롤을 없애는 클래스를 추가시킨다.*/
}
// 모바일 사이드바 숨김
function MobileSideBar__hide() {
$('.mobile-side-bar').removeClass('active');
/*사이드바에게 active클래스를 제거시킨다.*/
$('html').removeClass('mobile-side-bar-actived');
/*html에게 스크롤을 없애는 클래스를 제거시킨다.*/
}
/*함수 실행*/
MobileTopBar__init();
MobileSideBar__init();사이드바 콘텐츠 내부 메뉴 구성
이번에는 멀티 메뉴를 활용하여 콘텐츠 내부에 멀티 메뉴를 구현해보자.
우선 메뉴만 먼저 구현해보자.
html
<!-- 모바일에서 기기의 해상도 능력에 상관없이 절대적인 크기로 나오도록 -->
<!-- 예를들어, pc에서의 300px이 모바일 에서도 똑같은 크기로 나오도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->
<!-- 테일윈드 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 테일윈드 치트시트 : https://nerdcave.com/tailwind-cheat-sheet -->
<!--
기본 마크업
.mobile-menu-box-1 > ul(1차 메뉴) > li(1차 메뉴 아이템) > a(1차 메뉴 아이템 링크) + ul(2차 메뉴)
> li(2차 메뉴 아이템) > a(2차 메뉴 아이템 링크) + ul(3차 메뉴) > li(3차 메뉴 아이템) > a(3차 메뉴 아이템 링크)
-->
<div class="mobile-menu-box-1">
<ul>
<li>
<a href="#">1차 메뉴 아이템 01</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li>
<a href="#">2차 메뉴 아이템 4</a>
<ul>
<li>
<a href="#">3차 메뉴 아이템 1</a>
</li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
<li><a href="#">3차 메뉴 아이템 5</a></li>
</ul>
</li>
<li>
<a href="#">2차 메뉴 아이템 5</a>
<ul>
<li><a href="#">3차 메뉴 아이템 1</a></li>
<li><a href="#">3차 메뉴 아이템 2</a></li>
<li><a href="#">3차 메뉴 아이템 3</a></li>
<li><a href="#">3차 메뉴 아이템 4</a></li>
<li><a href="#">3차 메뉴 아이템 5</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 02</a>
<ul>
<li><a href="#">2차 메뉴 아이템 1</a></li>
<li><a href="#">2차 메뉴 아이템 2</a></li>
<li><a href="#">2차 메뉴 아이템 3</a></li>
<li><a href="#">2차 메뉴 아이템 4</a></li>
<li><a href="#">2차 메뉴 아이템 5</a></li>
</ul>
</li>
<li>
<a href="#">1차 메뉴 아이템 03</a>
</li>
<li><a href="#">1차 메뉴 아이템 04</a></li>
<li><a href="#">1차 메뉴 아이템 05</a></li>
<li><a href="#">1차 메뉴 아이템 06</a></li>
<li><a href="#">1차 메뉴 아이템 07</a></li>
<li><a href="#">1차 메뉴 아이템 08</a></li>
<li><a href="#">1차 메뉴 아이템 09</a></li>
<li><a href="#">1차 메뉴 아이템 10</a></li>
</ul>
</div>
<!-- 폰트 -->
<style>
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 400;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 700;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
font-family: 'LotteMartDream';
font-style: normal;
font-weight: 300;
src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}
html>body {
font-family: 'LotteMartDream', sans-serif;
}
</style>css
.mobile-menu-box-1 > ul ul {
display:none;
background-color:rgba(120,120,120,0.3);
}
/* 첫 자식인 ul태그(1차 메뉴 아이템)을 제외한 나머지 후손들 (2차,3차 메뉴 아이템)들은 평소에
display:none;으로 존재하지 않게 만들어둔다.
그리고 배경색을 불투명하게 만*/
.mobile-menu-box-1 ul > li.active > ul {
display:block;
}
/* 메뉴 박스 안에 있는 li태그를 클릭하면 그 바로 아래 자식인 ul태그(display: none;인 상태)의
display속성을 block으로 만들어 나타나게 만든다.*/
.mobile-menu-box-1 ul > li > a {
display:block;
padding:20px;
}
/* 메뉴 네모칸 디자인
a는 inline이므로 padding값을 부여하기 위해서 display속성을 block으로,
내부에 padding값 20px씩 부여*/
.mobile-menu-box-1 ul > li.active > a:not(:only-child) {
color:red;
text-decoration:underline;
}
/* 메뉴 박스 안에 있는 li태그 중에 클릭해서 active클래스가 추가되면 그 내용이 들어있는 a태그의 색을
빨간색으로 바꾸고 밑줄도 생기게 한다. 하지만 a태그는
:not(:only-child)유일한 자식이 아니어야 한다. 이 말인즉슨 그 a태그는 형제를 가지고 있어야 한다.
구조가 ul > li > a + ul이므로 그 의미는 그 메뉴가 하위 메뉴 아이템을 가지고 있어야한다는 조건이다.
하위 메뉴가 없는 메뉴 아이템들은 클릭해도 이 효과가 적용되지 않는다.*/
.mobile-menu-box-1 ul > li > a::after {
float:right;
}
/* a의 자식인 after태그의 위치를 오른쪽 끝으로 옮긴다.*/
.mobile-menu-box-1 ul > li > a:not(:only-child)::after {
content:"[+]";
}
/* 하위 메뉴 아이템이 있는 메뉴 아이템의 a::after태그는 [+]라는 문구를 집어넣는다.*/
.mobile-menu-box-1 ul > li.active > a:not(:only-child)::after {
content:"[-]";
}
/* 하위 메뉴 아이템이 있으면서 클릭해서 active클래스가 추가된 메뉴 아이템의 a::after태그는 [-]라는 문구를 집어넣는다.*/
.mobile-menu-box-1 ul > li > a:only-child::after {
content:">";
}
/* 하위 메뉴 아이템이 없는 메뉴 아이템의 a::after태그에 >라는 문구를 집어넣는다.*/JS
//메뉴를 제어하는 함수
function MobileMenuBox1__init() {
$('.mobile-menu-box-1 ul > li').click(function() {
/**/
let $this = $(this);
$this.siblings('.active')/*형제들 중에 active를 가지고 있는 태그를 찾고*/
.find('.active')/*그 후손 중에 active를 가지고 있는 태그를 찾아서*/.removeClass('active');/*active클래스를 제거한다.*/
$this.siblings('.active')/*형제들 중에 active를 가지고 있는 태그를 찾고*/.removeClass('active');/*active클래스를 제거한다.*/
/*한 요소를 클릭하고 다른 요소를 클릭했을 때, 원래 요소는 다시 닫혀야 하기에 클릭하면 다른 요소와 그 후손들에게 있는 active클래스를 모두 제거한다.*/
if ( $this.hasClass('active') ) {
/*클릭당한 요소가 active클래스를 가지고 있다면*/
$this.find('.active').removeClass('active');
/*클릭당한 요소의 후손 중 active클래스를 가지고 있는 요소의 active클래스를 제거하고*/
/*한 요소를 클릭하고 2차,3차 메뉴까지 클릭하고 그 요소를 닫을 때 후손 요소들도 같이 닫혀야 하기에 후손 요소의 active클래스를 제거한다.*/
/*이 코드가 아래 코드보다 먼저 있어야 한다. 클릭당한 요소의 active클래스가 먼저 제거된다면 이 코드는 적용되지 않기 때문이다.*/
$this.removeClass('active');
/*클릭당한 요소도 active클래스를 제거한다.*/
}
else {
/*active클래스를 가지고 있지 않다면*/
$this.addClass('active');
/*active클래스를 추가한다.*/
}
});
/*클릭하면 active클래스*/
$('.mobile-menu-box-1 ul').click(function() {
return false;
});
/*리스트를 클릭했을 때, 그 부모인 상위 아이템이 클릭 이벤트가 전파되어 닫혀버리는 상황을 방지하기 위해 (ul > li > ul > li) ul의
클릭을 비활성화 시킨다.*/
}
MobileMenuBox1__init();
이 코드를 사이드바 콘텐츠 내부에 넣어보자
하지만 위의 경우 2차,3차 메뉴를 클릭하고 다시 메뉴를 접어도 그 2차, 3차 메뉴는 열린 채로 있다. 이것을 해결하기 위해
MobileSideBar__init() 또는 MobileTopBar__init() 함수에 모든 active클래스를 제거해주는 코드를 추가한다.
$('.mobile-menu-box-1').find('.active').removeClass('active');
🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳