본문 바로가기
javascript/jQuery

[JAVASCRIPT/JQUERY]반응형 탭메뉴 (웹에서는 탭메뉴 - 모바일에서는 셀렉트메뉴)

by 알찬 퍼블리셔 2019. 4. 8.
728x90
반응형

탭메뉴를 반응형으로 구현하는 방법 중 하나입니다.

 

화면이 작아지는 모바일에서 탭메뉴는 한줄로 표현하기 어려워 집니다.

 

 

jQuery 를 이용해 탭메뉴를 선택했을때 셀렉트 메뉴 선택 option 도 달라지도록 설정해

큰화면으로 보다가 화면이 줄어들어 탭메뉴에서 select 로 변경되어도 선택한 메뉴가 유지되도록 합니다. 

 

모바일에서는 select 형태로 보이고 

 

웹에서는 tab 메뉴 형태로 보입니다. 

 

 

 

 

 

 

또다른 반응형방법

[CSS/CSS 응용] - [CSS]한줄로 길게 늘어트리기 (가로로 스크롤 되도록)

728x90
반응형

댓글