tab content , tab menu, 탭 메뉴 만들기

상단 메뉴를 클릭하면 하단의 내용 content 부분이 보여지는 탭 메뉴입니다.

 

 

1. 간단하면서 기본적인 tab menu 만들기

 

See the Pen tab by wao816 (@hy16) on CodePen.

 

코드펜에서 탭메뉴 스크립트를 찾아보다가 data-link 를 이용해서 만든 스크립트도 있어서 참고용으로 추가해봤다.

참고한 사이트 주소 ->  https://codepen.io/cssjockey/pen/jGzuK

 

See the Pen tab menu by wao816 (@hy16) on CodePen.

 

 

3. 탭 스크립트 + 마우스 클릭,호버 이벤트를 응용하여 만들어본 예시입니다.

 

 

See the Pen MWbyqNZ by wao816 (@hy16) on CodePen.