최근에 한 독자가 사이트 탐색 메뉴를 jQuery 슬라이드 아웃 메뉴 막대로 대체할 수 있는 방법을 묻고 있었습니다. 이러한 패널은 사용성을 크게 향상시킬 수 있습니다. 모바일 버전사이트. 이 기사에서는 WordPress 테마에 슬라이딩 메뉴 막대를 추가하는 방법을 보여줍니다.
참고: 이 기사는 HTML 및 CSS에 대한 중급 지식을 가정합니다.
WordPress에서 기본 메뉴를 슬라이딩 막대로 바꾸기
여기의 목표는 컴퓨터 사용자가 볼 수 있도록 테마의 표준 메뉴를 유지하면서 작은 화면 해상도의 사용자에게 슬라이드 아웃 메뉴 막대를 표시하는 것입니다. 풀 버전메뉴. 시작하기 전에 다양한 WordPress 테마가 있다는 것을 이해하는 것이 중요합니다. CSS 스타일당신의 디자인에 따라.
우선, 우리는 열어야합니다 텍스트 에디터메모장을 입력하고 생성 새로운 파일. 다음 코드를 복사하여 붙여넣습니다.
(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( 왼쪽: 0 ), "느리게", function() ( $("#toggle" ).html(" 
"); )); ), function() ( $("#팝아웃").animate(( 왼쪽: -250 ), "느림", function() ( $("#toggle").html(" "); )); )); ))(제이쿼리);
바꾸다 example.com너의 ~에게 도메인 이름사이트 및 변경 당신의 테마현재 테마의 실제 폴더로 이동합니다. 파일을 이름으로 저장 슬라이드패널.js컴퓨터에서. 이 코드는 jQuery를 사용하여 슬라이딩 메뉴 막대를 토글합니다. 또한 전환 효과를 애니메이션합니다.
FTP 클라이언트(Filezilla 또는 총사령관) 사이트에 연결합니다. 다음으로 테마의 디렉토리로 이동하여 이미 폴더가 있는 경우 js그런 다음 엽니다. 테마에 이러한 디렉터리가 없으면 해당 디렉터리를 만들고 내부에 slidepanel.js 파일을 업로드하세요.
다음 단계는 메뉴의 아이콘을 디자인하거나 찾는 것입니다. 가장 많이 사용되는 아이콘은 세 개의 줄무늬가 있는 아이콘입니다. 그것은 어떤에서 만들 수 있습니다 그래픽 편집기(예: Photoshop에서) 또는 Google에 존재하는 많은 것 중 하나를 찾으십시오. 이 예에서는 아이콘에 27x23픽셀을 사용합니다. 생성한 후 이름을 menu.png로 변경하고 테마 디렉토리의 이미지 폴더에 업로드합니다.
다음 단계는 슬라이딩 메뉴 모음입니다. 다음 코드를 복사하여 파일에 붙여넣기만 하면 됩니다. 기능.php주제:
wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);
이제 모든 준비 작업이 완료되었으므로 테마의 기본 메뉴를 수정해야 합니다. 일반적으로 대부분의 테마는 파일에 탐색 메뉴를 표시합니다. 헤더.php주제. 우리는 엽니 다 헤더.php다음과 유사한 줄을 찾으십시오.
"기본", "menu_class" => "내비 메뉴")); ?>
문제는 테마 메뉴를 HTML로 감싸서 작은 화면에 슬라이드 아웃 메뉴 막대를 표시하는 것입니다. 우리는 그것을 포장 할 것입니다
example.com을 도메인 이름으로 바꾸고 your-theme을 테마 폴더로 바꿉니다. 변경 사항을 저장합니다.
마지막 단계: CSS 사용큰 화면 사용자에게는 메뉴 아이콘을 숨기고 해상도가 낮은 사용자에게는 표시합니다. 또한 메뉴 아이콘의 위치와 슬라이드아웃의 모양을 조정해야 합니다. 이 CSS 코드를 복사하여 테마의 스타일시트에 붙여넣습니다.
@media 화면 및 (최소 너비: 769px) ( #toggle ( display:none; ) ) @media 화면 및 (최대 너비: 768px) ( #popout ( 위치: 고정; 높이: 100%; 너비: 250px; 배경) : rgb(25, 25, 25); 배경: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; ) #toggle ( float: right; position : 고정; 상단: 60픽셀; 오른쪽: 45픽셀; 너비: 28픽셀; 높이: 24픽셀; ) .nav-menu li ( border-bottom:1px solid #eee; padding:20px; 너비:100%; ) .nav-menu li :hover ( background:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )
테마 메뉴는 다른 CSS 클래스를 사용할 수 있으며 위의 클래스와 충돌할 수 있습니다. Chrome 또는 Firefox의 Inspector를 사용하여 어떤 클래스가 귀하의 클래스와 충돌하는지 알아내면 이 문제를 해결할 수 있습니다. 또한 사이트 디자인에 맞게 패널 모양을 자유롭게 사용자 지정할 수 있다는 점을 잊지 마십시오.
대부분의 개발자가 웹사이트의 맨 위나 바닥글에 사용자 정의 자바스크립트 기반 풀아웃 패널을 추가하기 시작했다는 것을 눈치채셨을 것입니다. 이 패널은 다양한 프로모션, 흥미로운 블로그 게시물 등에 사용자의 관심을 끄는 데 사용됩니다. 이러한 패널이 널리 보급된 주된 이유는 물론 결과에 중점을 두었기 때문입니다. 당신은 이 패널을 좋아하거나 싫어할 수 있지만, 그들이 작업에 달려 있다는 데에는 확실히 동의할 것입니다. 블로그에 슬라이드 아웃 패널을 추가할 수 있는 무료 및 상용 플러그인이 많이 있습니다. 이 기사의 뒷부분에서 다루겠습니다.
무료 플러그인
안녕하세요 바
모든 것을 갖춘 간단하고 겸손한 플러그인 필요한 도구사이트 상단에 패널을 만들기 위해 이러한 패널은 사용자의 관심을 끌 것입니다.
주의 표시줄
중요한 메시지에 사용자의 주의를 기울여야 하는 경우 몇 가지 추가 스타일이 있는 일반 div인 경고 패널을 만들 수 있습니다. 그러나 그러한 패널은 매우 성가시고 귀하의 사이트 사용자는 그것을 좋아하지 않을 것이라는 점을 기억할 가치가 있습니다. 주의 표시줄 플러그인을 사용하면 사이트 탐색에 방해가 되지 않는 멋진 표시줄을 페이지 상단에 표시할 수 있습니다. 풍부한 설정은 개발자가 패널의 레이아웃을 제어하는 데 도움이 됩니다.
쉬운 헤드업 바
플러그인은 사이트 상단에 편리한 알림 표시줄을 추가합니다. 알림에서 클릭 유도문안을 강화하기 위해 링크를 남길 수 있습니다.
알림 도구 모음
블로그 바닥글에 배치되는 패널입니다. 사용자 지정 알림을 표시할 수 있습니다. 플러그인은 정적 도구 모음을 기반으로 합니다.
빠른 알림 표시줄
플러그인을 사용하면 사이트 헤더에 강조 표시된 알림을 만들 수 있습니다. 이러한 알림은 사용자의 관심을 끌 것이므로 간단한 경고에서 특별 제안에 이르기까지 무엇이든 넣을 수 있습니다.
바이퍼 바
플러그인을 사용하면 구독자 수를 늘리는 데 사용할 수 있는 사이트의 헤더 영역에 패널을 추가할 수 있습니다. 플러그인에는 인라인 스타일, Aweber 및 Feedburner와의 통합, 전환 추적, 분할 테스트 등이 포함됩니다.
상용 플러그인
블로그 또는 웹사이트 상단에 사용자 정의 패널을 추가할 수 있는 WordPress 플러그인입니다. 에 대해 다른 알림을 표시할 수 있습니다. 다른 페이지, 모든 페이지에 표시될 표준 패널 등을 설정합니다.
어텐션 그래버
사이트에 알림 패널을 추가할 수 있는 플러그인입니다. 이 플러그인을 사용하면 사용자 정의 텍스트, Twitter 게시물 또는 RSS 피드를 쉽게 표시할 수 있습니다. 또한 알림의 모양을 사용자 지정할 수 있는 방대한 기능 목록이 있습니다.
http://wplift.com/wordpress-notification-bar-plugins/
안녕하세요, 블로그 사이트 독자 여러분. 오늘은 여러 종류의 페이지 링크를 한 번에 구현할 수 있는 다소 기능적이고 편리한 upPrev 플러그인에 대해 이야기하고자 합니다. 각 페이지 하단에서 그의 작업(적어도 이 기사를 작성하는 시점)을 기사와 함께 관찰할 수 있습니다. 유사한 자료 목록이 있는 팝업 패널이 오른쪽에 나타납니다.
플러그인은 유사한 자료뿐만 아니라 동일한 카테고리 또는 태그 아카이브의 이전 기사(위 기사에서 자세히 설명했으며 실제 구현에서 설명했습니다), 이전 자료를 표시할 수 있습니다. 블로그 전체의 형식과 무작위로 가져온 출판물. 또한 게시물을 작성할 때 썸네일을 생성하면 전체에 썸네일을 적용할 수 있습니다.
웹사이트 홍보에서 링크는 현재 어떤 역할을 하나요?
일반적으로 성공적인 프로모션을 위한 사이트 최적화는 작업 1번입니다(2번은 백링크). 내부 요인은 다른 모든 것의 영향을 차단하고 줄일 수 있습니다. 반면에 불가능합니다(특히 키워드내부 링크의 콘텐츠 및 앵커에서).
이제 프로모션에 대한 통합 접근 방식이 주도하고 있으며 연결이 그 중 상당히 중요한 위치를 차지합니다. 최근에는 인포그래픽을 사용하여 무엇이든 시각화하는 것이 유행이 되었습니다. Seo 주제에서 유사한 순서도를 많이 찾을 수 있습니다. 예를 들어 Seoprofi에는 사이트를 홍보하는 방법에 대한 기사가 있습니다. 불행히도, 나는 아직 그런 걸작을 만들 준비가 되지 않았지만 그것들을 참조하면 너무 많은 물을 부을 필요가 없습니다.
선택할 연결 체계? 이전에 잘 작동했던 많은 계획(모든 악명 높은 "링", 구현 방법에 대한 링크)이 더 이상 12년 전에 여전히 관찰되었던 경이적인 결과를 제공하지 않기 때문에 다소 어려운 질문입니다. . 검색 엔진은 또한 자신의 관점에서 명백한 치트가 무엇인지 배우고 고려하지 않으려고 합니다.
Peydrank의 이론에 따르면 일련의 링 형태로 링크하는 것은 이 링에 관련된 사이트 페이지()의 정적 가중치를 심각하게 증가시켜야 합니다.
그러나 이것이 항상 실제로 작동하는 것은 아닙니다. 개별 페이지가 색인에서 빠지면 링이 끊어지거나 마크업을 줄이기 위해 검색이 통계 가중치를 계산하는 고전적인 공식에 심각한 감소 요소를 도입했을 수 있습니다.
사이트 페이지를 연결하는 또 다른 작업은 더 이상 Yandex나 Google을 기쁘게 하는 것이 아니라 방문자를 부탁드립니다. 그가 귀하의 블로그를 시험해 볼 수 있는 기사 하나는 분명히 충분하지 않을 것입니다. 관심을 갖고, 연기하고, 아마도 그를 귀하의 구독자로 만들기 위해 다른 곳으로 그를 초대해야 합니다.
따라서 연결은 다음에도 영향을 미칩니다. 행동 요인 , 검색도 고려하고 있으며 매년 점점 더 많이 사용됩니다. 거의 모든 웹마스터가 이를 이해하고 유사한 자료, 가장 많이 읽힌 출판물 또는 동일한 범주의 기사가 있는 사이트에 블록을 추가합니다. 테마에 다른 변형이 있을 수 있습니다.
당연히 구현 옵션은 내부 연결질량도 있다. 플러그인 없이도 할 수 있지만(예제는 기사에서 찾을 수 있음) 많은 플러그인이 링크용으로 작성되었습니다. 가장 어려운 것은 블로그에서 완벽하게 작동하는 옵션을 선택하는 것입니다.
나는 그들 중 일부를 시도하고 심지어 그들 중 일부에 대한 리뷰를 썼습니다(). 실제로 언급된 플러그인은 관련 게시물을 계산하고 블로그 페이지에 나열하는 데 가장 적합한 플러그인 중 하나입니다.
그러나 그의 데이터는 다른 WordPress 확장 프로그램을 사용할 수 있어 더 화려하거나 허세를 부립니다. YARP에 대한 같은 기사에서 나는 관련 게시물 슬라이더 플러그인으로 데이터를 사용하는 예를 제시했는데, 이를 통해 유사한 게시물을 다음 형식으로 표시할 수 있습니다.
글쎄, 또는 다음과 같이 :
오늘은 우리의 영웅이라고 불리는 upPrev또한 Yet Another Related Posts Plugin 데이터베이스에서 정보를 가져오는 방법을 알고 있으며 매번 바퀴를 재발명할 필요가 없기 때문에 올바르게 수행합니다. 사실, 이 공학의 기적의 가능성을 설명하는 것으로 넘어가자.
upPrev 플러그인과 옵션 연결
나는 다른 방식으로(가장 직접적인 방식이 아닌) 다른 방식으로 갔기 때문에 이러한 스타일을 건드리지 않았습니다. 이에 대해서는 아래 텍스트에서 설명합니다. Sim의 경우 두 번째 탭으로 이동합니다.
이 플러그인이 링크를 생성할 게시물의 수를 선택하십시오. 하지만 조금 더 낮은, 우리는 단지 우리 사이트에 대한 연결 유형 선택. Yet Another Related Posts Plugin 기반을 사용하여 관련 게시물 옵션을 선택했지만(사전 설치되어 있어야 함) 두 번째 또는 세 번째 옵션을 선택하여 링 링크를 설정할 수 있으며 다음을 선택하여 큰 링 링크를 설정할 수 있습니다. 먼저 .
나는 해당 필드에 틱으로 표시된 게시물에 대해서만이 비즈니스를 구성하려고했습니다. 이 패널은 게시물 제목 외에도 게시물의 시작 부분이나 인용 영역을 채우면 여러 단어(해당 번호는 맨 아래에 설정됨)를 표시할 수 있습니다. 그것은 나에게 불필요한 것처럼 보였다.
세 번째 탭은 내가 사용하지 않은 이 패널의 링크에 대한 클릭 수 추적을 설정하는 데 사용됩니다. 그러나 네 번째 탭에서는 여전히 캐시를 활성화했습니다. 다섯 번째 탭에서는 패널이 휴대전화에 표시되지 않도록 했지만 태블릿에 표시되는 것은 반대하지 않았습니다.
뭐, 그게 다야 upPrev 설정은 끝났지만, 이미 Yet Another Related Posts Plugin 설정에서 패널의 모양을 변경했습니다.
슬라이드아웃 내용의 모양 사용자 지정
거기에서 비슷한 게시물을 표시할 템플릿 파일을 선택했습니다(이 확장 프로그램 작업의 본질과 세부 사항은 위의 링크 참조).
저것. 이제 upPrev 플러그인(슬라이딩 패널)에 의해 표시되는 유사한 게시물 목록의 모양은 내 테마 폴더()에서 내 yarpp-template-list.php 파일에 등록된 코드에 의해 제어됩니다. 블로그에서 게시물에 대한 썸네일을 생성하는 경우 지원과 함께 Yet Another Related Posts 플러그인 무기고에서 템플릿을 선택하는 것이 좋습니다.
이 파일의 코드는 다음과 같습니다.
-
have_posts()): $postsArray = array(); 동안 ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
- ".get_the_title()." "; endwhile; echo implode(" "."\n",$postsArray); // 관련 항목의 목록을 쉼표로 구분하여 출력합니다. else:?>
연관된 포스트가 없습니다.
보시다시피 이것은 나가는 패널의 헤더가 있는 곳이므로 버그()를 피하기 위해 이 파일을 BOM 없이 UTF-8 인코딩으로 변환해야 합니다(필요한 경우). 나는 당신에 대해 모르지만 꽤 오랫동안 메인으로 살아왔다. 메모장 편집기++ () 그리고 이 변환은 다음과 같이 수행됩니다.
이 코드는 진부한 HTML 목록() 및 코드의 클래스에 대한 스타일 파일에 지정된 CSS 속성이 모양을 담당합니다. 제 경우에는 이러한 스타일이 다음과 같습니다.
A.oy (색상: #333;글꼴:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto(텍스트 정렬:센터; 패딩:12픽셀 5픽셀 17픽셀 5px;margin: 5px 0;border: dotted 2px #ccc;) li.eto:hover (text-decoration:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial, color:#666;)
Lampochka 클래스는 녹색 체크 표시를 추가합니다. CSS 코드 base64 코드를 사용하여 설정되었습니다(이 코드를 어딘가에 복사했습니다). 관심이 있다면 내 style.css를 살펴보세요. 자, 이제 끝났습니다. 잊어버린 것이 있으면 물어보십시오. 사실, 한 달 전에 이 연결 옵션을 설정했는데 이 시간 동안 이미 머리에서 무언가가 사라졌습니다.
행운을 빕니다! 블로그 페이지 사이트에서 곧 만나요
당신은 관심이있을 수 있습니다
Yet Another Related Posts 플러그인에서 투명한 픽셀 http://yarpp.org/pixels을 제거하고 비문을 변경하는 방법 
내부 링크용 관련 게시물 플러그인을 사용하여 WordPress에서 관련 게시물 목록 만들기(썸네일 포함) 
또 다른 관련 게시물 및 WordPress용 관련 게시물 슬라이더 플러그인으로 웹사이트 행동 통계를 개선하는 방법 
간단한 카운터 및 카테고리 및 페이지 아이콘 - 아름다운 RSS 및 Twitter 카운터, WordPress의 카테고리 및 페이지 아이콘 
내 블로그(웹사이트)의 WordPress 플러그인 사이트용 슬라이더 및 슬라이드쇼 - 어떤 옵션이 있으며 jQuery 슬라이더 스크립트를 사용하는 방법 
Breadcrumb NavXT 플러그인을 사용하는 WordPress의 Breadcrumbs(링크 강화) 
페이지 생성 시 WordPress에서 메모리 소비 줄이기 - 현지화 파일을 대체하는 WPLANG Lite 플러그인 
WP-PageNavi - WordPress 블로그 페이지 탐색 - 설치, 구성 및 수정 모습쪽수 매기기 
달력화! - WordPress용 이벤트 캘린더 
WordPress에서 메일을 보내지 않고 작동하지 않음 비주얼 에디터- Configure SMTP 및 Post Editor Buttons 플러그인이 있는 솔루션
어떻게 탐색 메뉴사이트별, 사용자 프로필 메뉴등을 숨길 수 있으며 클릭하고 호버하면 나타납니다. 어떤 사람들은 페이지의 유용성이 이로 인해 어려움을 겪고 있다고 말할 수 있습니다. 페이지가 깨끗해지면 탐색이 더 쉬워지기 때문에 그렇게 생각하지 않습니다. 사람은 링크의 산에서 혼동되지 않습니다.
오늘은 컬렉션을 준비했습니다 슬라이드 패널, 기본적으로 페이지에 숨겨져 있습니다. 전화하려면 메뉴, 해당 아이콘을 클릭하거나 마우스를 가져가야 합니다. 이 기술은 한 화면에 많은 요소를 표시할 수 없는 모바일 응용 프로그램에서 웹 디자인에 왔습니다. 시간이 지남에 따라 이러한 패널은 웹사이트로 마이그레이션되었습니다. 이 컬렉션은 무엇보다도 모바일 개발자에게 유용할 것입니다. 작은 화면 해상도에서는 다음과 같이 나타납니다. 아웃바운드 탐색, 그리고 일반 대형 모니터에서는 누구나 익숙한 일반 메뉴를 만들 수 있습니다. 따라서 모바일 장치를 사용하는 사람은 오랫동안 사용하는 데 익숙했기 때문에 귀하의 사이트에서 혼동하지 않을 것입니다. 슬라이드 패널, 그의 스마트폰에 있는 모든 애플리케이션이 동일한 원리로 작동하기 때문입니다.
이 컬렉션에는 다음이 포함됩니다. 플러그인, 아래에서만 날카롭게 모바일 사이트와이드 모니터에서는 사용이 부적절합니다. 모든 웹 사이트에 적합한 범용 패널이 있지만. 데모를 보고 필요에 맞는 것을 선택하십시오.
드롭다운 패널은 에서 작동합니다. 이러한 메뉴를 사이트에 구현하는 것은 어렵지 않으며 개발자 사이트는 자세한 지침그들의 제품 사용에.
곧 우리는 Postovoy 웹사이트를 재설계할 계획이며 다음 중 하나를 사용할 것입니다. 제이쿼리 플러그인아래에 제시되어 있습니다.
그래서. 다음은 컬렉션입니다. 20개의 jquery 드롭다운 슬라이드바 플러그인귀하의 사이트에 대한. 의견을 남기는 것을 잊지 마십시오.
스와이프할 수 있는 사이드 메뉴
jquery의 멋진 슬라이드 아웃 탐색 메뉴. 모바일 및 일반 사이트 모두에 이상적입니다.
오프 캔버스 탐색을 위한 전환
3D를 포함한 다양한 애니메이션 효과로 표시되는 슬라이드 패널을 구성할 수 있는 매우 강력한 플러그인입니다. 플러그인에는 14개의 애니메이션 효과가 포함되어 있습니다.
jPanel메뉴
탐색 모음은 스타일로 만들어집니다. iOS 애플리케이션. 모바일 사이트 개발에 도움이 되는 가볍고 빠른 메뉴입니다.
재창조 구글 넥서스메뉴
슬라이딩 패널은 구글 넥서스 메뉴와 유사하게 만들어졌다.
bigSlide - Jquery 슬라이드 탐색 모음
슬라이드 패널은 모바일 사이트와 일반 사이트 모두에 적합합니다. 그것을 호출하려면 세 개의 줄무늬를 나타내는 아이콘을 클릭해야 합니다.
다단계 푸시 메뉴
Jqutry 플러그인은 bigSlide와 유사하게 작동합니다. 아이콘을 클릭하면 패널이 호출됩니다. 이 메뉴의 장점은 다단계 구조를 지원한다는 것입니다.
상자 뚜껑 메뉴
3D 효과가 있는 매우 아름다운 슬라이드 탐색 모음.
애니메이션 테두리 메뉴
화면 모서리에 있는 더하기 기호를 클릭하면 작은 측면 패널아이콘으로. 숨기려면 "-" 기호가 있는 아이콘을 클릭해야 합니다.
스냅.js
슬라이드 패널은 모바일 장치용으로 설계되었습니다. 메뉴는 마우스 커서로 화면을 드래그하거나 켜져 있는 경우 불러옵니다. 휴대 기기, 손가락.
슬라이드 및 푸시 메뉴
|
메니
Jquery 플러그인을 사용하면 사이트에 3D 효과가 있는 멋진 슬라이드 탐색 모음을 구현할 수 있습니다.
mb.jquery
다른 패널과 달리 이동하지 않고 화면 상단에 나타납니다. 블록에는 html, 텍스트 및 일반적으로 원하는 모든 것을 넣을 수 있습니다.
안드로이드 독
패널은 모바일 사이트용으로 날카롭게 처리되었으며 화면 하단에 있습니다. 누르면 링크를 배치할 수 있는 아이콘이 나타납니다.
콘텐츠 슬라이드 바
쿨 슬라이드 패널은 2단 형태로 제작되었습니다. 먼저 메뉴입니다. 두 번째는 콘텐츠다. 이제 이 효과는 디자이너와 웹 개발자 사이에서 매우 인기가 있습니다. 많은 응용 프로그램을 찾을 수 있습니다. 마이크로소프트의 메일러도 비슷한 원리로 작동합니다.확실히 사이트의 페이지, 개폐식 패널에서 자주 만났습니다. 다른 종류의지정된 시간 간격으로 완전 자동에서 위쪽, 아래쪽, 오른쪽 또는 왼쪽을 말하거나 클릭으로 활성화되는 배열. 일반적으로 이러한 패널에서는 당분간 사용자의 눈에 보이지 않는 일부 추가 정보중요하고 그렇게 중요하지 않습니다. 예를 들어, 구독 양식, 소셜 미디어 위젯, 링크, 태그, 연락처 세부 정보 등 간단히 말해서 무엇이든.
존재 큰 금액자바스크립트의 슬라이딩 패널 구현을 위한 기성 솔루션, 다양한 CMS용 모듈 및 플러그인, 별도 jQuery 플러그인, 하지만 꽤, 내 눈을 사로잡았고, 완전히 작동하는 방법에 대해 순수 CSS.
오래전부터 그런 것을 일으키고 싶었고 숨겨진 체크박스를 사용하는 메커니즘은 잘 알려져 있고 이해할 수 있지만 어쩐지 손이 닿지 않았습니다. 그래서 CodePen의 먼지가 많은 창고에서 우연히 발견한 저는 그것을 실험하여 산에 주기로 결정했습니다. 상단 패널순수한 CSS에서는 무슨 일이 일어났는지 밝혀졌습니다)).
우리는 예제를 살펴보고 원본과 비교했으며 이제 누가 그것을 필요로 하는지, 전체가 어떻게 함께 작동하는지 살펴보겠습니다. 다시 한번 말하지만, js는 없고 깨끗한 html과 "마법의" CSS만 있으면 됩니다.
HTML 레이아웃
기본 컨테이너, 콘텐츠 블록 및 패널 열기/닫기 버튼의 세 가지 주요 요소로 구성됩니다.
보시다시피 type=" " 플래그는 기본적으로 숨겨져 있고 비활성화되어 있는 패널 디자인에 있습니다. 태그 첨부