국비지원 20일차

※햄버거 버튼 css로 움직이게 바꾸기 & 버튼 누르면 아래 메뉴 나오기

 

햄버거버튼 결과값.

버튼활용한 메뉴 나오기 결과값.

@햄버거 버튼 css로 바뀌게 하는 법.

-우선 화면상 맨 위에 있는 btm_ham이라는 input:checked 박스 그 밑에 btn_hamberg 태그를 보겠다.

 

1. #btn_ham {display:none:}-우선 input의 checked 박스를 없애준 것이다.

 

2.. btn_hamberg :label태그를 나타내는 것이다. label태그는 input 속성이기 때문에 inline 레벨이라서 그냥 쓰면 크기를 설정해 줘도 영역을 잡질 못한다. 그래서 display:block을 적용해 block 레벨로 바꿔주고 가로*세로 (50xp*50px) 크기를 지정해 버튼 박스 크기를 만들어준다. padding활용해서 안에 여백 10px 안으로 박스들이 적용되게끔 적용하였다.

 

3. label 안에 있는. line을 3개의 박스를 이용해 햄버거 버튼을 만들어줄 것이다.(작대기 3 개각 햄버거처럼 겹쳐있다고 하여 불린다). 우선 공통적으로  width :100% height:5px을 적용해 주면 label 태그의 박스에 padding 값 안으로 위치하게 될 것이다. 그리고 이작대기를 배경색을 검은색으로 지정해 주고 ,. mid라는 박스에 (햄버거박스에 중간 부분) margin 값 위아래로 7.5px 0; 씩 적용하면. line 들 사이사이에 간격을 알맞게 배치될 것이다.. 그리고. line 박스들에게 position:relative(자기 자신 위치기준으로 사방값적용) , top:0 값을 적용해 준다.

  * 아래서 top 이랑 bottom의 line 박스들을 중앙으로 모여지게끔 하는 걸 도와준다. 왜냐하면 우선 버튼을 체크하면 위아래 위치한 line들이 중간으로 1차로 모여져 line이 하나로 뭉쳐 진상태서 몇 초 delay 후 다시 top, bottom 버튼들에게 rotate를 이용해 x 자 로모양을 바꿔주려고 한다. 그러려면 translate 와 rotate 를 같이 쓰면 delay적용을 따로 못하기 때문에 우선 position을 이용해 top, bottom 박스들을 이동시키고 그다음에 transform:rotate 이용해 각도 조절에 delay 따로 걸어서 체크할 시 버튼이 변경되게 해 줄 것이다.

 

4. (check 하면 line 박스에 position을 이용해, 위아래 line 박스들을 mid로 모아지게 한 후 x 자로 변하게 하는 css)

#btn_ham:checked (체크 시) ~ (같은 레벨에 있는). btn_hamberg (박스에) > (자식박스)(. mid, top, bottom) { 적용하는 것.

- line box. top에 top:12.5px (12.5px 정도 top에서 떨어뜨려 mid위치에 오게끔 정해준다.) transform : rotate(45 deg)를 적용해 top 위치 이동한 후 rotate 되게 각각 transition으로 top 0.5 s, transform 0.5s 0.5s ( transform 은 top 이 12.5px 내려온 후 rotate 되게 해 주려고 0.5s delay 설정해 준 것이다) 

 

- mid는 transform : scale(0); transition :transform 0.5s 0.5s; (설정 후 top, bottom 이 rotato 될 시기에 는 mid가 사라지게끔 해준 것이다.)

 

- bottom 은 bottom에서  top:-12.5px (-12.5px 정도 top에서 떨어뜨려 mid위치에 오게끔 정해준다.) transform : rotate(-45 deg)를 적용해 top 위치 이동한 후 rotate 되게 각각 transition으로 top 0.5 s, transform 0.5s 0.5s ( transform 은 top 이 12.5px 내려온 후 rotate 되게 해주려고 0.5s delay 설정해 준 것이다) 

 

*이렇게 각각 설정해 주면 버튼을 체크할 시 위에 처럼 위아래 line 이 mid로 이동한 후 다시 mid박스가 사라지면서 위, 아래 박스가 rotate 되면서 x 자로 변경될 것이다. 

 

-여기서 다시 체크 누르면 체크가 해제되는데 체크가 해제될 때도 x자에서 mid로 하나로 모여지게 되고 다시 햄버거버튼으로 되게 하려면 여기도 transiton을 설정해 줘야 되는데  체크가 해제될 때 적용되는 거니까. line 박스에다가 transition: top 0.5s 0.5s transform 0.5 s  ( 체크해제 됐을 때는 적용되려면 우선 rotate 상태를 해제하는 걸 먼저 실행한 후 mid에서 위. 아래 top:0으로 돌아가는걸 다시 0.5s delay 줘서 나중에 시작되게 하면 체크해제될 때도 체크했을 때와 반대로 천천히 햄버거 버튼으로 바뀔 것이다.

 

 

@버튼 누르면 아래 메뉴 나오기

- 구조는 pan이라는 박스(전체적인 틀) 안에  item_container라는 박스(성별, 가격대, 신발높이 하나하나 포함하는 박스)를 만들어 그 안에 label이라는 탱크에 성별과 〈  (ㄴ, 한자)를 이용해 checked 속성의 버튼 역할하는 label태크를 만들 것이고, 그 밑에 input을 선언한 후 그 아래에 item_list_box 박스를 만들고 그 안에 item_list 를만들것이다( 3개의 item박스가 포함되 있는 구조)

 

1. pan이라는 전체 틀 만들어볼 것이다. 가로 *세로 ( 세로에 calc 100vh - 50px) -전체화면 크기에 위에서 만든 햄버거버튼 크기를 뺴준것이다. 이렇게 하면 그 햄버거버튼을 제외한 나머지 영역을 먹어서 창을 아래로 늘리거나 줄이 거나할 때 세로영역도 크기가 변경될 것이다.)  

 

2. item_container이라는 boder과  box_sizing만 적용해 주고 별도의 가로, 세로 크기는 적용 안 해준다. 자식들의 크기조정으로 크기가 변경되게 한 것.

 

3. label 탱크에 display로 block레벨로 바꿔서 크기 설정 적용되게 해 주고, padding 10px 0;을 주고 label태그네 박스 크기를 조절해 줄 것이다. 그리고 flex (x축 정렬)와 spac-between.으로 양쪽 끝에 요소들 배치해 줄 것이다.

 

4. list_expand 클래스에 transform : rotate (-90 deg) translate (-7px)로 '〈 ' 에각도와 위치 조정해 줄 것이다.

 

5. item_list_box는 ul, li 블록레벨으로써 width 를따로 적용해주지 않아도 부모영역이 적용될 것이다.  height :0으로 평상시에는 박스를 숨겨놓고 버튼 눌렀을 시 height에 110px 적용되면서 생겨나게 해 줄 것이다. 그리고 height 0으로 할시 안에 글자가 박스 밖으로 보일 수 있는데 이건 overflow :hidden으로 감춰줄 수 있다. item_list 각각에 는 padding 20씩 줘서 박스 크기를 조절해 준다.

 

6. input [name="chk"]:checked +. item_list_box { (input에 name:chk 가진 태그가 checked 되면 같은 레벨에 그다음요소인. list_box에 적용되게 해라)

height를 110px를 적용하게 되면 label 버튼을 누를 시 list_box가 펼쳐질 것이다 height 값을 먹어서.