[펄스나인] 쉽게쓰는 UI/UX - 슬라이드 DIV > 그누보드5 스킨

최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

    그누보드5 스킨

    좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

    [펄스나인] 쉽게쓰는 UI/UX - 슬라이드 DIV 정보

    레이아웃 [펄스나인] 쉽게쓰는 UI/UX - 슬라이드 DIV

    첨부파일

    right_slide.zip (3.2K) 351회 다운로드 2020-05-24 20:35:33 포인트 차감10
    테스트한 버전5.4.2.5
    호환 가능 버전버전무관함

    본문

    웹사이트에 슬라이드 히든 메뉴를 추가하고 싶을때
    쉽게 추가할 수 있습니다.

    다운받은 파일(폴더)을 그누보드가 설치된 폴더 적당한 위치에 업로드하시고

    tail.php 또는 tail.sub.php 등 하단부에 호출만 해주시면 끝!

     

    
<?php include_once('경로/right_slide/right.php'); ?>
 
//그누 폴더에 업로드한경우
<?php include_once(G5_PATH.'/right_slide/right.php'); ?>

     

     

    폴더를 업로드 하지 않고, 코드만 복사하셔서 써도 되고

    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 포인트는 덤 !

    추천
    68
    #반응형 #모바일용 #PC용

    댓글 전체

    은빛날개 자기소개 아이디로 검색 전체게시물 회원게시물 20.05.28 20:02:56
    질문있는데요. 이건 옆단추를 클릭해야 슬라이드되면서 글쓰기 창이 보이는데 거꾸로 기본은 열린채 보이고 클릭하면 닫히게 할 수 없나요?
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.05.28 20:07:07
    스타일의 translateX 만 반대로 바꿔주시면 됩니다~ 

    
.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);
    }



    아래부분은 적절히 변경하시거나 지워주세요. 

    
@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;
        }

    }
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.11 17:40:19
    서버는 관계가 없습니다~
    상단에 제이쿼리 라이브러리만 호출해주시면 되세요!

    그누 기본이라면 head.sub.php 에 제이쿼리가 호출되고 있을거에요.
    없다면 아래코드를 추가하시면 됩니다~

    <script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.07.07 17:37:15
    감사합니다~
    왼쪽에서 오픈은 음,,

    style 의 right 부분은 전부 left로 바꾸시고
    translateX 부분의 수치를 반대로 적절히 조정하시면 될거같습니다 ^^
    하늘나누기 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.09.22 10:54:52
    정말 제가 원하던 자료이네요 정말정말 감사합니다.
    그런데 제가 초보라 "접수하기"를 누르면 어디론가 메세지를 보내야 하는데
    그부분을 어떻게 처리 해야 하나요?
    죄송합니다. 제가 초보라 너무 초보적인 질문을 하네요!
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.09.22 18:17:12
    우선 좋은말씀 감사합니다~
    슬라이드 안에 있는 폼은,, 그냥 참고만 하시라고 넣어놓은
    작동하지 않는 예제폼 입니다 ㅠ.ㅠ
    하늘나누기 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.09.22 18:23:25
    네 감사합니다...  폼이라도 어디인가요? 공유 감사합니다.
    일단 그 부분은 제가 찾아서 공부해보겠습니다.
    이렇게 좋은 소스를 공유해주셔서 또다시 감사합니다. ^^
    그때그언니 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.02 08:50:58
    정말 잘쓰고 있는데요 전 여러개 버튼에 각각 하나씩 슬라이드를 할당해서 각각 다른 내용을 보이게 하고 싶습니다. 근데 호출을 클래스로 하다보니 이게 좀 생각보다 어렵더라구요. 어떻게 해야할까요?
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.02 17:33:30
    메뉴용도로 만들어둔거라 여러개 사용은 고려를 하지 못하였습니다 ㅠ

    스타일 관련한 클래스는 그대로쓰고 열리고 닫히는 부분만
    id 로 변경하고 스크립트만 추가해도 될거같긴 합니다~
    그때그언니 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.02 18:09:11
    댓글 감사합니다. 각 버튼별로 상품 설명 같은걸 사이드 메뉴로 보이게 구성했는데 업로드 폴더 이름을 다르게 하고 호출할 때 경로만 다르게 하면 될줄 알았다가 이건 전혀 예측하지 못한 상태라 너무 난감하네요. 죄송한데 크게 힘들지 않은거라면 말씀하신 부분만 코드를 짜 주실수 있을까요? 제가 코딩 쪽으로는 완전 초보라서 제가 수정하는건 전혀 불가능합니다.
    그때그언니 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.02 18:11:47
    혹은 디렉토리 명을 다르게 해서 여러개 업로드를 해도 전 상관없으니까 "열기"로 호출하는 부분에서 A HERF 부분에 경로명을 넣고 해당 파일을 불러오게끔 하는게 저로선 가장 직관적이긴 합니다만.
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.04 00:08:24
    요즘 일이 많아서 스킨작업을 많이 못하고 있는 실정 입니다 ㅠ
    짬나는대로 한번 보기는하겠습니다만,,
    언제 가능하다고 말씀을 드리기가 어렵습니다 ㅠ.ㅠ
    masahide 자기소개 아이디로 검색 전체게시물 회원게시물 21.10.20 19:26:23
    안녕하세요.
    유용한 자료 정말 감사합니다.

    저 위에 있는 댓글 중 열린채로 보이고 클릭하면 닫히게 하는거에 대한 답변을 보고,
    그대로 따라해봤습니다.

    열린채로 보이기는 하는데,
    2가지가 문제가 있더라고요.

    1.
    열려있을 때 창 좌측에 쉐도우가 없고, 닫았을 때 메인 화면 우측끝에 쉐도우가 생기기에,
    이건
    box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);의 순서를 서로 바꿔서 해결하였습니다.

    2.
    그런데, 열려있는 창의 우측 상단 X를 눌렀을 때 닫히질 않습니다.
    열기버튼을 클릭했을때 닫히기는 합니다.

    혹시
    이거 방법이 없을까요?
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 21.10.21 00:47:52
    닫기버튼의 액션은 원본기준 아래와같습니다~
    $('.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는 해당 클래스를 넣었다가 뺐다가 합니다~

    어떻게 수정을 하셨는지 몰라서 테스트는 못해봤으니 해보시고
    안되시면 응용해보세요~ 금방 되실것 같네요!

    감사합니다.
    masahide 자기소개 아이디로 검색 전체게시물 회원게시물 21.10.21 11:06:33
    아.... 정상 작동되는줄 알았는데,
    한가지 문제(?)가 있긴 합니다.

    알려주신대로 적용했더니,
    창이 열린채로 보여지고,
    좌측 하단의 열기 버튼을 누르면 창이 열리고, 다시 누르면 닫히고,
    창이 열렸을 때 상단 우측의 X를 눌러도 창이 닫히는거 까지 작동 잘 되는데...

    상단 우측의 X를 눌러서 창을 닫으면,
    좌측 하단의 열기 버튼을 눌러도 창이 다시 열리질 않네요.

    $('.sh-side-options').removeClass('open'); 를
    $('.sh-side-options').addClass('close_add'); 로 바꿔도,
    $('.sh-side-options').toggleClass('close_add');로 바꿔도 동일합니다.
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 21.10.21 13:54:58
    .sh-side-options 의 기본 css가 transform: translateX(0px);
    이라고 가정하고 답변 드립니다~

    열기버튼의 클릭 스크립트를
    $('.sh-side-options').toggleClass('close_add');
    이걸로 바꾸시고 (열고 닫기 둘다 가능하도록)

    닫기버튼의 스크립트를 닫는거만 되도록
    $('.sh-side-options').addClass('close_add');

    하시면 될것 같습니다~

    css는 .close_add {transform: translateX(420px);} 입니다~
    masahide 자기소개 아이디로 검색 전체게시물 회원게시물 21.10.21 15:01:38
    계속된 질문에도 시간내주셔서 정말 감사합니다.
    제가 바로전에 주신 답변을 잘못 이해해서 소스를 적용했었는데,
    처음부터 다시 하나하나 수정해보니, 드디어 원하는대로 정상 작동하네요.
    정말 감사합니다.
    전체 2,434 |RSS
    그누보드5 스킨 내용 검색

    회원로그인

    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT