[Css] Css로 반응형 사이드바 (메뉴) 만들기: 완벽 가이드

반응형 사이드바를 CSS로 만드는 방법을 알아보겠습니다. 이 글은 쉬운 이해를 돕기 위해 자세히 설명합니다.

1. 메인 메뉴바를 감싸고 있는 div 태그(main-nav) 바깥에 또 div 태그로 하위 메뉴 리스트를 감쌉니다.

이렇게 하면 하위 메뉴 리스트를 따로 제어할 수 있습니다. 예를 들어, 하위 메뉴 리스트를 처음에는 숨기고, 메뉴 버튼을 클릭하면 나타나도록 만들 수 있습니다.

“`html

“`

2. 하위 메뉴 리스트를 감싸는 div 태그(sub-nav)에 CSS 스타일을 적용합니다.

“`css
.sub-nav {
display: none; /* 하위 메뉴 리스트를 기본적으로 숨김 */
position: absolute; /* 하위 메뉴 리스트를 메인 메뉴바 아래에 위치 */
top: 100%; /* 하위 메뉴 리스트를 메인 메뉴바 바로 아래에 위치 */
left: 0; /* 하위 메뉴 리스트를 메인 메뉴바 왼쪽에 위치 */
width: 100%; /* 하위 메뉴 리스트를 메인 메뉴바 너비만큼 넓게 */
background-color: #fff; /* 하위 메뉴 리스트 배경색 */
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 하위 메뉴 리스트에 그림자 효과 */
}
“`

3. 메뉴 버튼을 클릭하면 하위 메뉴 리스트가 나타나도록 JavaScript 코드를 추가합니다.

“`javascript
const mainNav = document.querySelector(‘.main-nav’);
const subNav = document.querySelector(‘.sub-nav’);
const menuButton = document.querySelector(‘.menu-button’); // 메뉴 버튼 선택

menuButton.addEventListener(‘click’, () => {
subNav.style.display = ‘block’; // 하위 메뉴 리스트를 보이게 함
});
“`

4. 화면 크기가 작아지면 하위 메뉴 리스트가 메인 메뉴바 아래로 이동하도록 Media Query를 추가합니다.

“`css
@media (max-width: 768px) { /* 화면 너비가 768px보다 작으면 */
.sub-nav {
position: static; /* 하위 메뉴 리스트를 메인 메뉴바 아래에 위치 */
top: auto; /* 하위 메뉴 리스트를 메인 메뉴바 바로 아래에 위치 */
left: auto; /* 하위 메뉴 리스트를 메인 메뉴바 왼쪽에 위치 */
}
}
“`

이렇게 하면 화면 크기에 따라 하위 메뉴 리스트가 메인 메뉴바 아래로 이동하는 반응형 사이드바를 만들 수 있습니다.

위 코드는 간단한 예시이며, 실제로는 더 많은 CSS 스타일을 적용하여 원하는 디자인을 구현할 수 있습니다.