https://github.com/devleejb/reactive-header-example

Make Reactive Header using HTML/CSS!
https://github.com/devleejb/reactive-header-example

css html

Last synced: 7 months ago
JSON representation

Make Reactive Header using HTML/CSS!

• Host: GitHub
• URL: https://github.com/devleejb/reactive-header-example
• Owner: devleejb
• Created: 2021-10-29T05:18:31.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-10-29T05:19:49.000Z (over 4 years ago)
• Last Synced: 2025-05-14T07:51:22.948Z (10 months ago)
• Topics: css, html
• Language: HTML
• Homepage:
• Size: 104 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# About Repository

이 저장소는 반응형 헤더 예제 파일을 담고 있습니다.




## Images and Description

![reactive-header-full](images/reactive-header-full.jpg)

- 반응형 헤더의 기본 모습이다.




![reactive-header-full-hover](images/reactive-header-full-hover.jpg)

- 반응형 헤더의 메뉴에 커서가 올라가면 해당 메뉴의 background-color가 코랄 색으로 변경된다.




![reactive-header-small-hover](images/reactive-header-small-hover.jpg)

- 웹 사이트의 width가 800px 이하기 될 경우를 media query를 이용하여 반응형 헤더를 구현하였다.

- 웹 사이트의 width가 조건을 만족하면 우측 상단에 토글 버튼이 생성되고, nav 태그의 flex-direction이 column 방향으로 변경되어 컨텐츠가 세로 방향으로 배치된다. 

- 웹 사이트의 width가 800px 이상일 경우 가운데에 배치되는 ul 태그 내의 li 태그가 inline element로 배치되어 가로로 나열되지만, width가 800px보다 작아지면 li 태그가 block level element로 배치되어 세로로 나열된다.




![reactive-header-small-toggle](images/reactive-header-small-toggle.jpg)

- 오른쪽 상단의 토글 버튼을 클릭하면, 하단의 menu와 contact 아이콘이 사라진다.