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

그누보드5 스킨

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

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

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

첨부파일

right_slide.zip (3.2K) 344회 다운로드 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
  • 복사

댓글 전체

질문있는데요. 이건 옆단추를 클릭해야 슬라이드되면서 글쓰기 창이 보이는데 거꾸로 기본은 열린채 보이고 클릭하면 닫히게 할 수 없나요?
스타일의 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;
        }

    }
서버는 관계가 없습니다~
상단에 제이쿼리 라이브러리만 호출해주시면 되세요!

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

<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
감사합니다~
왼쪽에서 오픈은 음,,

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

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

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

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

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

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

혹시
이거 방법이 없을까요?
닫기버튼의 액션은 원본기준 아래와같습니다~
$('.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 의 기본 css가 transform: translateX(0px);
이라고 가정하고 답변 드립니다~

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

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

하시면 될것 같습니다~

css는 .close_add {transform: translateX(420px);} 입니다~
계속된 질문에도 시간내주셔서 정말 감사합니다.
제가 바로전에 주신 답변을 잘못 이해해서 소스를 적용했었는데,
처음부터 다시 하나하나 수정해보니, 드디어 원하는대로 정상 작동하네요.
정말 감사합니다.
© SIRSOFT
현재 페이지 제일 처음으로