See the Pen Pure CSS, Horizontal Arccodion by moksunung (@moksunung) on CodePen.
위 예제는 http://codepen.io 에 작성했습니다.
순수 CSS만을 활용하여 아코디언 메뉴(펼침 텝메뉴) 만들기.
* 원리 설명
1. 같은 name으로 묶인 radio 타입의 input은 그 인풋들 중 단 하나만 체크되는 원리를 이용합니다.
2. input 이 체크 되었는지 여부를 확인하여 선택할 수 있는 CSS 가상선택자 :checked 를 사용해 어떤 input이 체크 되었는지 확인합니다.
3. 만약 어떤 input에 체크되었다면 동등한 깊이(depth)의 엘리먼트. 즉, 형제격이면서 인접한 엘리먼트를 선택할 수 있는 선택자 + 를 사용하여 형제이면서 인접한 .contents 를 선택합니다. (사전에 html을 코딩할 때에도, 형제 선택자로 선택할 것임을 염두에 두고 코딩해야합니다.)
4. .contents 엘리먼트 박스는 사전에 미리 넓이를 0으로 설정해 놓았으므로 화면에 보여지지 않습니다. 따라서 메뉴를 클릭했을 때, 해당 .contents 엘리먼트 박스가 보이도록 하기 위해서, html상에서 직전에 인접해 있는 input이 checked 되었을 때, .contents 엘리먼트 박스의 넓이 width가 특정 값을 가지도록 input:checked + .contents { width: 넓이; } 처럼 코딩합니다.
5. 예제를 감싸고 있는 최상위 상자 엘리먼트 .wrap 의 넓이에 딱 맞춰 .contents가 나타나도록 하기 위해 넓이 .wrap 엘리먼트에서 에서 버튼 5개(각각 50px)의 총 넓이 250px를 뺀 값을 적용해줍니다.
(예제에서 사용한 width: calc(100% - 250px); 코드는, 제가 예제를 만들 때 화면을 꽉 채우는 풀스크린 원페이지 아코디언 사이트를 만들기 위해 사용한 것이므로 신경쓰지 않으셔도 됩니다.)
6. 모든 메뉴버튼은 같은 name으로 설정된 input[type=radio] 이므로 메뉴로 사용하는 버튼 이외에 다른 메뉴를 선택하면, 선택되어있는 input의 선택이 해제되어 해당 .contents 박스의 넓이는 다시 0으로 돌아가는 원리를 이용해 닫는 버튼(closer)를 만들어줍니다.
* 여러 메뉴가 동시에 열려질 수 있도록 하려면 input type 을 radio가 아닌 checkbox 로 변경하여 응용하면 됩니다.
위의 예제의 html과 css 탭에 필요해 보이는 곳에 주석을 달아놨으니, 참고하시면 이해하는데 도움이 될 것 같습니다.
이번에 필요한 일이 있어 가로 아코디언을 구현했지만, 내용을 이해하고 CSS를 통해 디자인만 달리해주면 세로 아코디언 메뉴도 가능합니다. 아래에 예제를 남기도록 하겠습니다. html 의 label인 버튼 요소의 위치들만 변경한 후, 디자인만 바꾼 것입니다. 세로로 애니메이션을 구현하기 위해서 조금 다른 코드를 넣기도 했습니다. 아래에 예제를 한번 더 포함해서 올리니 관심있으신분은 뜯어보세요 ^^ 원리는 동일합니다.
See the Pen Pure CSS, Vertical Arccodion by moksunung (@moksunung) on CodePen.
스크립트를 사용하지 않고 CSS만으로 구현했을 때의 장점은 방문자의 자원을 절약할 수 있고, 자바스크립트가 실행되지 않는 환경에서도 정상적으로 기능을 한다는 것입니다. 다만 CSS3는 낮은 버전의 브라우저에서 정상작동 되지 않는 경우가 있어, 사용된 코드를 http://caniuse.com 에서 어느정도 선에서 사용할 수 있는지 확인해야 합니다.
질문은 댓글로 달아주시면 확인해보겠습니다.
