반응형 네비바

HTML, CSS

collapse navbar 구현 및 소스코드

다양한 웹사이트에서 쓰이는 반응형 토글식 collapse navbar를 구현해보았다. 필요한 분들이 가져가서 수정할 수 있도록 최소한의 요소들만 사용해서 코드를 작성했다. 반응형 네비바를 구현할때 어려움을 느꼈던 점은 transition이었다. height: 0 ~ height :auto 에서는 transition이 동작하지 않았었다. transition이 height auto와 같은 명시적이지 않은 변화에는 동작하지 않는다는 사실을 스택오버플로우를 통해 알게되었고, 이 지식을 토대로 네비바를 완성했다. 추가해보면 좋을 것들 웹 접근성 추가 (aria-expanded, aria-hidden 등) - 화면에서만 안보일뿐 DOM에는 존재하므로, 별도로 웹 접근성을 추가해주면 좋을 것 같다. 개인 프로젝트에는..

2DC
'반응형 네비바' 태그의 글 목록