전체 드롭다운 메뉴 구현

전체드롭다운 메뉴 혹은 풀다운이라고도 하는듯 하다.

 

상단 메뉴에 마우스를 대면 하위 메뉴 전체가 보이는 메뉴로

 

흔히 관공서 홈페이지나 기업 홈페이지에서 자주 찾을 수 있는 유형

 

 

 

 

예시1) 국립중앙과학관 홈페이지. https://www.science.go.kr/

 

하위메뉴가 많이 없는 편인 웹사이트는

 

상단 메뉴 아래에 흰 공백구역을 일부분 주고 그 공백에 하위 메뉴를 내려줘 메뉴 아래의 컨텐츠를 가리는것을 최소화 하기도 함

 

 

 

예시2) 과기정통부 홈페이지 https://www.msit.go.kr/

 

최근의 추세인듯. 

 

좌측에 상단 메뉴를 요약하는 이미지와 텍스트

 

우측에는 하위 메뉴. 마우스 접근에 따라 전체 배경을 바꾼다던지 텍스트에 밑줄, 폰트색 변경을 사용한 메뉴 강조

 

 

필요한 기능 요약.

 

첫번째로 mouseover와 mouseout OR mouseenter와 mouseleave

 

상단 메뉴에 mouse가 들어오냐와 빠져나감에 따라 하위메뉴가 내려오고 올라오는 기능이 구현.

 

두 기능의 차이는 하위 까지 다 적용시키느냐 시키지 않느냐의 차이

 

 

두번째로 slidedown, slideup

 

slidedown이나 slideup은 아래로 내려오거나 위로 올라오면서 해당하는 값을 display:block 시키거나 display:none 시킨다는 점으로

 

slidedown은 높이 값을 0부터 내가 정한 높이까지, slideup은 높이 값을 내가 정한 높이에서 0으로 변경시킨다

 

 

높이값 0은 display:none,

 

높이값 기본은 display:block으로 이해

 

 

 

그렇기에

 

하위 메뉴에 display:none 설정을 박아둬 일단은 보이지 않게 한 다음

 

mouseover 시 slidedown가 작동해 0부터 원래 높이까지 올라가면 하위 메뉴가 보이고

 

mouseout 시 slideup이 작동해 원래 높이에서 0으로 내려오면 하위 메뉴가 사라지게 되는 원리다.