[스타벅스 클론코딩] 드롭다운 메뉴 - 위에서 아래로 내려오는 효과
메뉴에 마우스를 올렸을 때 메뉴 드롭 다운이 위에서 아래로 스르륵 내려오는 효과를 주고싶다!
( 아래 사진은 짤 만드는 방법을 몰라서...ㅎㅎ 저런식으로 만들 생각이다!)
현재는 마우스를 올리면 메뉴 드롭다운이 뙇! 하고 아무런 효과 없이 나타난다..!
1. display 사용
먼저 서브 메뉴 (드롭다운했을 때 보여지는 메뉴) 를display : none으로 해주고
hover를 했을때 서브메뉴의 display를 block으로 보여주게 했다.
그런데 transition이 작동하지 않는다.
이유는 display를 사용하면 transition이 먹질 않는다고 한다..!!ㅠㅡㅠ
2. opacitiy 사용
다음으로 쓴 방법은 opacity를 사용했다.
서브 메뉴를 opacity :0 으로 줘서 안보이게 해주고 hover시 opacity : 1로 줘 다시 보여주게 만들었다.이러면 transition이 작동은 한다..! 그런뎋ㅎㅎ 
서브 메뉴가 있을법한 위치에 마우스를 올리면 메뉴가 보여진닿ㅎㅎㅎㅎ
당연한듯 opacitiy는 요소를 투명하게만 해주는거라..ㅠㅠㅠㅠ
3. max-height 사용
위에서 아래로 스르륵 내려오게 하는 방법을 찾앗따..! 위에서 아래로 내려오게 height에 transition을 주는게 아니고서브 메뉴의 max-height를 0px로 줘서 영역을 없애고, hover했을 때 max-height를 100vh로 주고 transtion으로 이 과정을 느리게만 해주면 마우스를 올렸을 때 위에서 아래로 스르륵~ 하고 내려오는 효과를 줄 수 있다..!!!!!
height를 요소보다 크게 줘도 딱 요소만큼만 차지하기 때문에 max-height를 100vh로 완전 크게 줘버렸다ㅎㅎ
이렇게 해도 되는 이유가 height는 디폴트 값으로 auto이기 때문이라는데..? 사실 이해를 잘 하지 못했다... 이 부분은 좀 더 찾아보도록 해야겠다..!!
