티스토리 뷰
일단 아코디언 메뉴를 만들기 전에 빌드업을 해주겠습니다.
(1)편은 toggle button을 이용하여 메뉴 보였다 안보였다 하기
일단 기본 세팅 먼저 해줍니다.
원하는만큼 리스트 채우기
<body>
<header>
Header
</header>
<ul class="menu">
<li>
<div class="menu__title">
Main menu1
</div>
<ul class="menu__submenu">
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
</ul>
</li>
<li>
<div class="menu__title">
Main menu2
</div>
<ul class="menu__submenu">
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
</ul>
</li>
<li>
<div class="menu__title">
Main menu3
</div>
<ul class="menu__submenu">
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
</ul>
</li>
<li>
<div class="menu__title">
Main menu4
</div>
<ul class="menu__submenu">
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
</ul>
</li>
<li>
<div class="menu__title">
Main menu5
</div>
<ul class="menu__submenu">
<li>Sub menu1</li>
<li>Sub menu2</li>
<li>Sub menu3</li>
<li>Sub menu4</li>
</ul>
</li>
</body>
그리고 CSS 기본 세팅
그러면 일단 이런 모양이 됩니다.
그리고 메뉴를 보여줄 토글 버튼을 먼저 만들어 줍니다.
저는 Font Awesome이라는 홈페이지에서 아이콘을 가져올건데 다운로드해서 파일로 넣어줄겁니다.
버튼은 <header>안에 넣어주도록 할게요
이렇게 오른쪽 맨 끝에 위치하게 CSS를 작성해 줍니다.
아래 .toggle__btn.active 클래스는 active되었을 때 X 아이콘이 뜨도록 설정해주었습니다.
그다음 메뉴를 버튼이 있는 오른쪽으로 보내고
잘 보이게 배경은 yellow로 해줬습니다.
padding과 왼쪽 정렬 등 해주었습니다.
그리고 하위 메뉴가 안보이도록 display: none;을 해줍니다.
Main menu에 커서를 올리면 pointer모양이 되도록 설정해줍니다.
이번에는 첫화면에서는 메뉴가 안보이다가
Toggle button을 눌렀을 때 메뉴가 보이도록 하겠습니다.
처음엔 안보여야하니까 display: none;으로 하고
button 클릭시 active 클래스를 추가해주면서 display: block;으로 보이게 하겠습니다.
index.js로 넘어와서 작성해줍니다. (jQuery사용)
addClass() removeClss() 할거 없이
toggleClass() 하나로 가능합니다.
여기에 추가로 토글버튼 클릭해서 메뉴 나오면 햄버거 버튼이 X 버튼으로 바뀌도록 해줍니다.
완성(캡쳐 사진 크기 무시해주세요)
'Front-end 공부하기' 카테고리의 다른 글
| [jQuery] $(this) 가 안될 때 (0) | 2022.09.19 |
|---|---|
| aos 사용하기 - 스크롤시 화면에 나왔다 안나왔다 애니메이션 넣기 (0) | 2022.09.05 |
| [CSS] 맨 위에 붙어있는 menu bar 만들기(전체 메뉴 drop down) - Flex box 이용 (0) | 2022.07.26 |
| [CSS] Flexbox 이해하기 (0) | 2022.07.20 |
| [CSS] display와 position 이해하기 (0) | 2022.07.20 |