Dop Down Button
basic
디자인 없이 기능만 구현한 코드이다!
먼저 드롭다운 버튼을 만든다.
그리고 드롭다운 메뉴를 만든다.
드롭다운 메뉴의 display를 none으로 설정했다가 드롭다운 버튼에 hover가 발생하면 display를 block으로 설정하여 메뉴가 보이도록 하였다.
apply simple design
간단하게 css를 적용해 보았다.
아이콘을 적용해서 drop down을 유도한다
각 요소가 hover될 때마다 색을 진하게 해서 가시성을 주었다
better design
옆의 화살표를 클릭할 때 드롭다운 메뉴가 펼쳐지도록 하였다
값을 선택하면 버튼의 색깔이 바뀌고 그 값이 반영된다
목록 밖의 부분을 클릭하면 목록이 사라지도록 하였다
반갑습니다.