최신글
그누보드 최신글 스킨을 이용한 메인 배너 스킨입니다. 스킨 적용위치는 상관없으나 head.php 파일의 <div id="container_wr"> 상위에 위치시켜주시면 됩니다....
[펄스나인] 쉽게쓰는 UI/UX - 슬라이드 DIV
웹사이트에 슬라이드 히든 메뉴를 추가하고 싶을때
쉽게 추가할 수 있습니다.
다운받은 파일(폴더)을 그누보드가 설치된 폴더 적당한 위치에 업로드하시고
tail.php 또는 tail.sub.php 등 하단부에 호출만 해주시면 끝!
[code]
<?php include_once('경로/right_slide/right.php'); ?>
//그누 폴더에 업로드한경우
<?php include_once(G5_PATH.'/right_slide/right.php'); ?>
[/code]
폴더를 업로드 하지 않고, 코드만 복사하셔서 써도 되고
DIV 안에 내용이 길어지는경우 별도 스크롤바는 보이지 않으나 스크롤 가능합니다.
들어가있는 폼은 작동안되는 예제 폼 입니다.
안에 내용은 수정하셔서 사용하세요.
파일내 닫기버튼(./right_slide/image/close_btn.png) 과
열기버튼(./right_slide/image/open_btn.png) 의 이미지 경로는
직접 맞춰주셔야 합니다!
열기버튼 대체는 아래와같이 클래스만 넣어주면 됩니다.
<a href="javascript:void(0);" class="sh-side-options-item-trigger-demos">열기</a>
include_once 로 바로 쓰실 수 있도록 style 을 파일내에 포함 시켰고,
범용성을 위해 @media (max-width: 1000px) 를 추가해 두었습니다.
가로폭 조정은 파일내 12~13라인
width: 420px; 와 transform: translateX(420px); 를 같이 수정해주시면 되고
@media 197~198라인 에 동일한 스타일이 있으니 수정하시면 되겠습니다.
감사합니다.
크로스브라우징 : 익스11, 엣지, 웨일, 크롬
버전 : 무관
구동조건 : 제이쿼리 라이브러리
추천은 사랑 입니다 :D
+20 포인트는 덤 !
버전 정보
테스트한 버전
5.4.2.5
호환 가능 버전
버전무관함
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 스킨
2,751건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
최신글
index 화면에서 간단한 상담신청에 유용한 소스입니다. 디자인을 제외하고 글쓰기 폼만 제작 되었으므로 디자인 안에 출력 시킬곳에 아래와 같이 인쿠르드 시키면 됩니다. 압축파일 루...
레이아웃
웹사이트에 슬라이드 히든 메뉴를 추가하고 싶을때 쉽게 추가할 수 있습니다. 다운받은 파일(폴더)을 그누보드가 설치된 폴더 적당한 위치에 업로드하시고 tail.php 또는 tail....
최신글
안녕하세요 두리삼촌 입니다! php5.4이상 및 php7.x 버전등에서 한글이 깨져서 보이는 버그가 발견되 php5.4이상 버전에서도 한글 손상없이 올바르게 보여지도록 일부 파일을...
레이아웃
안녕하세요 두리삼촌 입니다. 기존에 올렸던 유튜브 플레이어와 별다를건 없습니다. OS에 따라 간혹 버퍼링이 생기는 부분을 해결하기 위해 일부 소스코드를 재 수정했습니다. 유튜...
레이아웃
카알주님 게시판 데모 사이트를 그누보드에 맞게 테마로 만들었습니다. 허접하지만 함 봐 주세요. 압죽 파일을 그누보드 설치된 상태에서 테마(theme) 폴더안에 압축 푸시고 관리자 ...
최신글
나리야빌더용 타임라인 위젯입니다. 전에 올려드린 나리야용 타임라인형 최신글에서 나리야빌더용(1.0.3)으로 일부 수정한것입니다. 참고 : https://sir.kr/g5_ski...
게시판
테마 Ariclaw의 게시판 부분만 발취-Bootstrap 기반(반응형) Theme Name: Ariclaw Theme URI: https://colorlib.com/wp/te...
게시판
스킨의 용도 List 페이지에서 바로 입력/수정할수 있도록 함으로써, 중국 현지 공장들의 제품 가격을 리스트 상의 기존 자료들과 비교하면서 새로운 조사 자료들을 업데이트하면서, 조...
최신글
아미니용 공사견적 게시판스킨용 위젯입니다. 아미니용 공사견적 게시판스킨 : https://sir.kr/g5_skin/37021 사용방법은 아미나 위젯사용 방법과 같습니다. <?ph...
댓글 123개
필요하실때 간편하게 써보셔요 ㅎㅎ
감사히 사용하겠습니다
그럼 이번 한주도 즐겁게 보내세요^^
건강 유의하세요~
많은 공부가 되네요!!
감사합니다.^^
잘쓰세요~~
[code]
.sh-side-options {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 12345678902;
transition: 0.3s all ease;
transition: 0.2s all;
padding: 0 0;
width: 420px;
transform: translateX(420px); // 0px 으로 변경하세요.
}
.sh-side-options.open {
transform: translateX(0px); // 420px 으로 변경하세요.
box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);
}
[/code]
아래부분은 적절히 변경하시거나 지워주세요.
[code]
@media (max-width: 1000px) {
.sh-side-options {
/*display: none;*/
}
.sh-side-options {
width: 350px;
transform: translateX(350px);
}
.sh-side-options-container {
bottom: 30px;
left: -95px;
margin-right: 15px;
}
}
[/code]
감사합니다
잘 지내시죠 ? ^^
안그래도 펄스나인님 활동이 보일때마다 반갑게 읽고 있습니다 ^^
건강 유의하세요~
감사합니다 펄스나인님도 겅정 유의하세요~ ^^
안에 내용은 작동안하는 샘플 폼 입니다 ^^
상단에 제이쿼리 라이브러리만 호출해주시면 되세요!
그누 기본이라면 head.sub.php 에 제이쿼리가 호출되고 있을거에요.
없다면 아래코드를 추가하시면 됩니다~
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
잘써주십시요 ^^
왼쪽에서 열리게 하려면 어디를 수정해야 할까요,.?
왼쪽에서 오픈은 음,,
style 의 right 부분은 전부 left로 바꾸시고
translateX 부분의 수치를 반대로 적절히 조정하시면 될거같습니다 ^^
잘쓰세요~!
그런데 제가 초보라 "접수하기"를 누르면 어디론가 메세지를 보내야 하는데
그부분을 어떻게 처리 해야 하나요?
죄송합니다. 제가 초보라 너무 초보적인 질문을 하네요!
슬라이드 안에 있는 폼은,, 그냥 참고만 하시라고 넣어놓은
작동하지 않는 예제폼 입니다 ㅠ.ㅠ
일단 그 부분은 제가 찾아서 공부해보겠습니다.
이렇게 좋은 소스를 공유해주셔서 또다시 감사합니다. ^^
좋은말씀 감사합니다~
스타일 관련한 클래스는 그대로쓰고 열리고 닫히는 부분만
id 로 변경하고 스크립트만 추가해도 될거같긴 합니다~
짬나는대로 한번 보기는하겠습니다만,,
언제 가능하다고 말씀을 드리기가 어렵습니다 ㅠ.ㅠ
잘쓸께요
상담신청을 이렇게 적용하면 좋겠네요~
사용빈도가 많을거 같은데 감사합니다~!
잘 써주시면 좋겠습니다 ^^
유용한 자료 정말 감사합니다.
저 위에 있는 댓글 중 열린채로 보이고 클릭하면 닫히게 하는거에 대한 답변을 보고,
그대로 따라해봤습니다.
열린채로 보이기는 하는데,
2가지가 문제가 있더라고요.
1.
열려있을 때 창 좌측에 쉐도우가 없고, 닫았을 때 메인 화면 우측끝에 쉐도우가 생기기에,
이건
box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);의 순서를 서로 바꿔서 해결하였습니다.
2.
그런데, 열려있는 창의 우측 상단 X를 눌렀을 때 닫히질 않습니다.
열기버튼을 클릭했을때 닫히기는 합니다.
혹시
이거 방법이 없을까요?
[http://sir.kr/data/editor/2110/ee8734c763fbeb78e988f8aeb86b0c29_1634725575_7977.png]
$('.sh-side-options').removeClass('open');
.sh-side-options 에 들어있던 open 클래스를 제거해서
transform: translateX(420px); 으로 만들어줍니다~
-----------------------
transform: translateX(0px); 일때가 열린것,
transform: translateX(420px); 일때가 닫힌것이니
열려있는걸 닫으려면 .sh-side-options 는
transform: translateX(420px); 이 되어야 합니다.
.close_add {transform: translateX(420px);}
위 css 를 한줄 추가하시고
파일 하단의 닫기버튼 액션
$('.sh-side-demos-container-close').on('click', function() { 안에
$('.sh-side-options').removeClass('open'); 을 지우시고
$('.sh-side-options').addClass('close_add'); 를 추가하시면 닫힐것 같네요 ^^
반대로 열기버튼 클릭시에 문제가 될 수도 있으니
열고닫고하는걸 $('.sh-side-options').toggleClass('close_add');
로 해버리면 쉬울것 같습니다.
toggleClass는 해당 클래스를 넣었다가 뺐다가 합니다~
어떻게 수정을 하셨는지 몰라서 테스트는 못해봤으니 해보시고
안되시면 응용해보세요~ 금방 되실것 같네요!
감사합니다.
알려주신대로 적용했더니, 원하는대로 정상 작동하네요.
다시한번 감사드립니다.
한가지 문제(?)가 있긴 합니다.
알려주신대로 적용했더니,
창이 열린채로 보여지고,
좌측 하단의 열기 버튼을 누르면 창이 열리고, 다시 누르면 닫히고,
창이 열렸을 때 상단 우측의 X를 눌러도 창이 닫히는거 까지 작동 잘 되는데...
상단 우측의 X를 눌러서 창을 닫으면,
좌측 하단의 열기 버튼을 눌러도 창이 다시 열리질 않네요.
$('.sh-side-options').removeClass('open'); 를
$('.sh-side-options').addClass('close_add'); 로 바꿔도,
$('.sh-side-options').toggleClass('close_add');로 바꿔도 동일합니다.
이라고 가정하고 답변 드립니다~
열기버튼의 클릭 스크립트를
$('.sh-side-options').toggleClass('close_add');
이걸로 바꾸시고 (열고 닫기 둘다 가능하도록)
닫기버튼의 스크립트를 닫는거만 되도록
$('.sh-side-options').addClass('close_add');
하시면 될것 같습니다~
css는 .close_add {transform: translateX(420px);} 입니다~
제가 바로전에 주신 답변을 잘못 이해해서 소스를 적용했었는데,
처음부터 다시 하나하나 수정해보니, 드디어 원하는대로 정상 작동하네요.
정말 감사합니다.
좋은 결과물 얻으시길 바랍니다~
미리 보고 싶어요-^^
https://sir.kr/g5_skin/45763
감사합니다. 잘쓰겠습니다.