CSS 기반 콘텐츠 아코디언을 만드는 방법
오늘의 튜토리얼에서 우리는 어떻게 우리가 CSS3를 사용하여 가로 및 세로 콘텐츠 아코디언. 이 작업을 수행 할 수있는 많은 jQuery 플러그인이 있지만 방문자가 Javascript를 끄면 아코디언이 올바르게 작동하지 않습니다. 귀하의 아코디언이 순수하게 CSS에 있다면 그것은 모든 방문자에게 효과적입니다..
우리는 수평의 과 수직선 콘텐츠 아코디언. 제목 텍스트를 클릭하면 슬라이드가 열리고 전체 내용이 표시되며 빠른 미리보기 (스크린 샷)가 어떻게 생겼는지 보여줍니다.
네가 본 것처럼? 코딩을 시작하자.!
1. HTML과 내용 준비하기
우선 아코디언을위한 HTML을 만들 것입니다..
구조체에는 컨테이너가 필요합니다. div 그런 다음 섹션 아코디언의 각 슬라이드에 대해 이 예에서는 5 개의 슬라이드가 있습니다. 각 슬라이드에는 제목과 단락이 있습니다..
회사 소개
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
서비스
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
블로그
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
포트폴리오
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
접촉
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
이제 아코디언 스타일을 시작할 수있는 슬라이드가 있습니다..
2. CSS 스타일링
먼저 우리는 스타일을 포함 할 필요가있다. div 아코디언의 이렇게하면 각 슬라이드와 각 헤드 라인을 표시하는 방법에 대한 아이디어를 얻을 수 있습니다..
/ * 아코디언 상자 정의 * / .accordion width : 830px; 오버플로 : 숨김; 여백 : 10px 자동; 색상 : # 474747; 배경 : # 414141; 패딩 : 10px;
다음으로 각 슬라이드의 헤드 라인을 만듭니다..
.아코디언 섹션 float : 왼쪽; 오버플로 : 숨김; color : # 333; 커서 : 포인터; 배경 : # 333; 여백 : 3px; .accordion 섹션 : 마우스 오버 배경 : # 444;
섹션에서 어두운 회색으로 배경색을 설정하여 방문자가 슬라이드를 표시하기 위해 클릭하는 제목으로 사용합니다. 이 섹션은 헤드 라인과 콘텐츠 모두에 사용됩니다. 즉, HTML을 적게 사용하고 슬라이드의 제목을 콘텐츠의 헤드 라인으로 다시 사용할 수 있음을 의미합니다..
.아코디언 섹션 p 디스플레이 : 없음;
현재 모든 슬라이드가 닫히기 때문에 슬라이드가 열릴 때까지 단락이 숨겨져 있는지 확인해야하므로 단락의 표시를 none으로 설정하십시오.
.아코디언 섹션 : position : relative; 글꼴 크기 : 24px; color : # 000; font-weight : bold; .accordion 섹션 : nth-child (1) : after content : '1'; .accordion 섹션 : nth-child (2) : after content : '2'; .accordion 섹션 : nth-child (3) : after content : '3'; .accordion 섹션 : nth-child (4) : after content : '4'; .accordion 섹션 : nth-child (5) : after content : '5';
슬라이드가 닫히면 헤드 라인 하단에 숫자 슬라이드가 표시됩니다. 이를 위해 CSS를 사용하여 섹션 헤드 라인 뒤에 내용을 추가합니다. :후 가상 클래스 선택자.
이제 아코디언에서 슬라이드를 표시하기 위해 click 이벤트를 만들 수있는 슬라이드의 제목을 만들었습니다. 그러나 문제가 있습니다. CSS에는 click 이벤트가 없습니다.이 이벤트는 일반적으로 jQuery를 사용하여 아코디언을 생성하므로 헤드 텍스트에 click 이벤트를 첨부 할 수 있습니다.
우리는 CSS의 click 이벤트를 모방해야합니다. :목표 가상 클래스 선택자.
3. 사용하기 :목표 의사 클래스 선택자
:목표 조각 식별자를 스타일화할 수 있습니다. 때로는 페이지의 앵커 태그를 사용하여 페이지의 특정 위치를 가리키는 경우도 있습니다. 링크를 클릭하면 신분증 앵커 태그에있는 태그가 대상이되며이 태그를 사용하여 스타일을 지정할 수 있습니다. :목표 선택자.
이것을 아코디언에 추가하려면 제목을 가리키는 링크를 추가해야합니다. 신분증 슬라이드.
회사 소개
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. 성교육을 중지하십시오. 아침, 아침, 저녁, 새끼 고양이는 새끼를 낳는다. Curabitur 시설 Rhincus 에로스 장소입니다. Aliquam semper mauris amet justet tempor nec lacinia magna molestie. Etiam placerat congue dol vitae adipiscing. 알록달록 한 그림책, 바로 그 책. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enimput sed. 예테보리가 아니고, 새끼를 낳습니다. Nam vehicula elementum nulla sed 결과. Phasellus eu erat enim. eL lorem에있는 magna 비 질량 극장의 절경.
.아코디언 섹션 : target background : #FFF; 패딩 : 10px; .accordion 섹션 : 대상 : 마우스 오버 배경 : #FFF; .accordion 섹션 : target h2 width : 100 %; .accordion 섹션 : target h2 a color : # 333; 패딩 : 0; .accordion 섹션 : target p display : 블록; . 아코디언 섹션 h2 a 패딩 : 8px 10px; 디스플레이 : 블록; 글꼴 크기 : 16px; font-weight : normal; color : #eee; 텍스트 장식 : 없음;
위의 코드는 아코디언의 나머지 부분에 맞게 슬라이드 크기를 변경하고 배경색을 흰색으로 변경합니다. 단락이 숨겨져 이제는 단락을 표시해야합니다..
이제 아코디언 헤드 라인을 클릭하면 슬라이드의 스타일이 변경되어 슬라이드의 내용을 표시합니다..
4. 수평 아코디언
위 코드는 일반적인 아코디언을 생성 할 것이므로 이제 가로 및 세로 아코디언 간의 차이점에 대한 CSS 변경을 시작할 수 있습니다. 이 두 아코디언에는 동일한 기능이 있지만 헤드 라인 스타일은 다를 수 있습니다..
.수평 단면 폭 : 5 %; 높이 : 250px; -moz-transition : 폭 0.2 초 완화; -webkit-transition : 너비가 0.2s 인 편이성; -o-transition : 폭 0.2s 완화; 트랜지션 : 폭 0.2s 완화;
먼저 폭 5 %로 헤드 라인 섹션의 그래서 그것은 닫힌 슬라이드입니다. 섹션은 슬라이드의 제목과 내용이기 때문에 전환 속성을 사용하여 내용을 표시하는 애니메이션을 추가해야합니다.
/ * 슬라이드 번호 배치 * /. 수평 섹션 : top : 140px; 왼쪽 : 15px;
슬라이드의 번호 위치는 닫힌 헤드 라인의 위치와 동일하며 수직 헤드 라인과 다르게 배치됩니다.
/ * 닫힌 슬라이드의 머리말 * /. 수평면 h2 -webkit-transform : rotate (90deg); -moz-transform : rotate (90deg); -o-transform : 회전 (90도); 변형 : 회전 (90도); 너비 : 240px; 위치 : 상대적; 왼쪽 : -100 픽셀; 상단 : 85px; / * 열린 슬라이드 위에 마우스를 올렸을 때 * / .horizontal : target width : 73 %; 높이 : 230px; .horizontal : target h2 top : 0px; 왼쪽 : 0; -webkit-transform : rotate (0deg); -moz-transform : rotate (0deg); -o-transform : rotate (0deg); 변형 : rotate (0deg);
위의 코드는 아코디언의 나머지 부분에 맞게 슬라이드 크기를 변경합니다. 헤드 라인이 세로로 회전하여 헤드 라인을 따라 갔지만 슬라이드가 열린 상태에서 텍스트를 다시 0도까지 회전하여 텍스트를 다시 수평으로 바꿀 필요가 있습니다.
5. 수직 아코디언
수직 아코디언은 수평 아코디언과 동일한 방식으로 작동하지만 신장 대신에 폭 텍스트 정렬을 변경할 필요가 없습니다..
.세로 섹션 너비 : 100 %; 높이 : 40px; -webkit-transition : 높이 0.2s 용이함; -moz-transition : 높이 0.2s 용이함; -o-transition : 높이 0.2s 용이함; 전환 : 높이 0.2s 용이함; / * 슬라이드 높이 설정 * /. 수직 : target height : 250px; 너비 : 97 %;
에 목표 우리가 변화시킬 수직 아코디언의 사건 신장 슬라이드를 표시 할 헤드 라인.
.수직 단면 h2 위치 : 상대적; 왼쪽 : 0; 상단 : -15px; / * 슬라이드의 숫자 위치 설정 * /. 수직 섹션 : top : -60px; 왼쪽 : 810px; . 수직 섹션 : 대상 : left : -9999px;
위 내용은 위치 닫힌 슬라이드의 제목 텍스트 닫힌 슬라이드를 사용하여 위치 아코디언의 오른쪽에있는 번호의. 슬라이드가 열려있을 때 표제가 설정되면 표제에서이 번호를 숨겨야하므로 화면 왼쪽에서 위치가 바뀝니다.
이제 아코디언 헤드 라인을 클릭하면 슬라이드의 스타일이 변경되어 슬라이드의 내용을 표시합니다..
편집자 주 : 이 게시물은에 의해 작성됩니다 폴 언더우드 Hongkiat.com. Paul은 영국 Bristol의 PHP 웹 개발자입니다. 웹 개발에 대한 자습서를 작성합니다. 주요 주제에는 PHP, jQuery, CSS3 및 HTML5가 있습니다. 그는 또한 Paulund.co.uk에서 유용한 코드 스 니펫을 기록합니다..
