CSS만으로 탭메뉴를 표현하는 방법

calendar

reload

スポンサーリンク

CSS만으로 탭메뉴를 표현하는 방법

CSS만으로 탭메뉴를 표현하는 방법이 몇 가지가 있지만, 이번에 소개할 내용은 input태그를 이용한 방법입니다.

데모페이지입니다.

DEMO

HTML

input태그와 label태그를 사용해서 탭을 만듭니다.
input의 id와 lable의 for속성이 대응해, label을 클릭하면 inputchecked속성이 붙습니다.
input의 checked속성을 이용해 요소를 표시/숨김으로 설정합니다.

CSS

유사 클래스 :checked

:checked를 써서 탭 전환을 표현합니다.
유사 클래스 :checked는 체크되어있는 라디오버튼(<input type="radio">), 체크박스(<input type="checkbox">), 옵션버튼(<select> 안에 있음 <option>)에 적용됩니다.
기본 구문
(input태그의 「id」또는「class」):checked~(css를 적용하고 싶은 요소) {};

:checked에 관해 자세히 알고 싶은 분은 이곳으로

탭 전환 실행

아래와 같이 태그를 표시/숨김 설정해 줍니다.

초기값은 max-height:0으로 설정되어 숨겨져있지만, #panel-1-ctrlchecked가 되면 아래 css가 적용되어 요소가 보여지게 됩니다.
이번에는 메뉴에 애니메이션을 실행하기 위해 max-height:0을 사용했지만 display:none을 사용해도 좋습니다.

CSS 전문

데모페이지입니다.

DEMO

공유하기

댓글 남기기

  • 이럴경우 접근성이나 웹표준에 문제가 되지는 않나요??

    by pecial 2017년 8월 21일 5:51 오후

    • CSS만으로 표현할 수 있는 방법을 기록한 것으로
      웹표준이나 접근성은 고려하지 않았습니다.
      좀 더 고민해보도록 할게요 ^^ 감사합니다.

      by nanati 2017년 8월 22일 12:37 오전

down 댓글 남기기