[HTML & CSS] 토글 사이드 바 / 반응형 메뉴

[토글 사이드 바 만들기]

• 이번에는 전에 만들어본 풀 다운 메뉴와 transition 등을 활용해서 토글 사이드 바를 만들어 봅시다.
• 토글 사이드 바란 화면의 좌 또는 우측에 위치한 사이드 바 메뉴를 의미합니다.
• 사이드 바는 좌측에 위치하고 4개의 1차 메뉴가 존재하고, 1차 메뉴의 마지막 메뉴 아이템에만 또다른 4개의 2차메뉴, 3차메뉴가 존재한다.
• 1차 메뉴를 제외한 2, 3차 메뉴들은 모두 hover를 적용하여 마우스 커서를 올려 놓았을 때만 보이도록 한다.

토글 사이드 바 예시

 

• 예시의 사이드 바를 설명하자면, 각 메뉴에서 2, 3차와 같은 하위메뉴가 존재하면 메뉴의 이름 끝에 [+] 를 붙혀준다.
• 그리고 뒷 배경에 lorem을 통해 텍스트를 길게 썼을 때, 화면을 스크롤해도 사이드 바가 그대로 형태를 유지하도록 하는 것이 주의할 점이다.
• 아래는 새로 만들어낸 토글 사이드 바이다. 

See the Pen toggle sidebar by psm817 (@psm817) on CodePen.

 

• HTML 구조는 최상위에 class가 side-bar인 div 태그를 두고 아래에 아이콘을 관리하는 div 태그와 메뉴를 관리하는 nav 태그로 구분지어있다.
• side-bar에 position: fixed를 지정한 이유는 html 내에 글자가 길어져서 스크롤 작업을 할 때 사이드바는 지정된 위치에 계속 고정시키기 위해서다.
• side-bar의 너비를 250px로 지정하고, left을 -215px로 지정하여 음수 margin을 사용한 이유는 평소에는 사이드 바가 화면의 좌측에 숨어있어야되기 때문이다.
• transition을 사용하여 side-bar를 hover할 때 천천히 나타나는 애니매이션을 추가한다.
• 나머지 1차 메뉴를 비롯하여 하위 메뉴 아이템들을 구성할 때는 후손 선택자를 사용하여 모든 메뉴 아이템 자식들이 바로 상위의 부모 태그를 상속받도록 position: relative를 적용한다.
• 여기서 눈여겨 볼 CSS는 하위 메뉴가 있는 메뉴 아이템들만 텍스트 뒤에 [+]를 추가하는 것이다. 반대로 사용자가 하위 메뉴가 존재하는 메뉴 아이템을 hover 했을 때는 텍스트 뒤에 [-]가 추가된다.
• 해당 선택자를 지정할 때 a:not(:only-child)::after 를 사용한다. 여기서 only-child는 지정 요소가 부모의 유일한 자식 요소인 경우를 말한다.
• 각 메뉴 아이템에서 only-child는 메뉴 1, 2, 3이다. 메뉴 4에는 각 하위 메뉴 아이템들이 있기 때문에 only-child가 아니다.
• 그렇기 때문에 앞에 not을 붙혀 지정 요소가 부모의 유일한 자식 요소가 아닌 경우인 각 메뉴의 4번째 아이템들을 선택하여 after를 적용하고 content를 추가한다.

 

 

[반응형 메뉴 만들기]

• 이번에는 display: flex를 통해 반응형 메뉴를 만들어 봅시다.
• 여기서 말하는 반응형이란, 웹 페이지의 너비에 따라서 메뉴의 형태가 달라지는 것을 의미한다.
• 쉽게 말해 PC 버전, 태블릿 버전, 모바일 버전과 같이 버전별로 메뉴의 형태가 달라지는 모습을 flex를 통해 구현하고자 합니다.
• 해당 메뉴는 1차 메뉴만 존재하고 아래는 반응형 메뉴의 예시이다.

PC 버전 메뉴 예시

태블릿 버전 메뉴 예시

모바일 버전 메뉴 예시

 

• 예시의 메뉴는 반응형을 구현하기 위해서 미디어 쿼리를 사용하였다.
• 미디어 쿼리(Media Query)란 웹 개발에서 사용되는 CSS 기술로써 반응형 웹 디자인의 핵심 요소로 사용된다.
• 미디어 쿼리는 미디어 유형과 미디어 특성을 기반으로 동작한다.
• 미디어 유형은 장치의 종류를 나타내며, 예를 들어 스크린, 프린터, 스피커 등이 있다고 생각하면 좋다.
• 미디어 특성은 장치의 속성이나 상태를 기반으로 하며, 화면 너비, 장치 방향, 픽셀 밀도 등을 포함할 수 있다.
• 미디어 쿼리를 작성할 때는 @media { } 라고 먼저 작성하고 대괄호 안에 적용한 선택자를 작성하면 된다.
• 아래는 새로 만들어낸 반응형 메뉴이다.

See the Pen Untitled by psm817 (@psm817) on CodePen.

 

• HTML은 1차 메뉴때와 동일하게 nav > ul > li*4 > a 의 순서로 코드를 구현했다.
• li 태그에 들어간 1차 메뉴 아이템들을 일렬로 나열하기 위해서 부모인 ul 태그에서 display: flex를 적용하고 justify-content를 사용하여 화면의 가장 오른쪽으로 보내주었다.
• 미디어 쿼리인 @media를 사용하여 max-width: 800px인 조건을 넣어, 화면의 너비가 800px 이하일 때는 justify-content 속성 값을 space-around로 변경하여 화면의 꽉 차도록 메뉴를 배치했다.
• 추가로 @media를 사용하여 max-width: 500px인 조건을 넣어, 화면의 너비가 500px 이하일 때는 flex-direction: column을 추가하여 메뉴 아이템의 방향을 세로(열) 방향으로 변경하여 메뉴를 배치했다.