크롬80버전 결제 이슈, 영카트5 주요패치 확인!

[펄스나인] 쉽게쓰는 반응형 슬라이드 메뉴 > 그누보드5 스킨

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

[펄스나인] 쉽게쓰는 반응형 슬라이드 메뉴 정보

레이아웃 [펄스나인] 쉽게쓰는 반응형 슬라이드 메뉴

첨부파일

첨부파일 right_slide.zip (3.2K) 97회 다운로드 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 포인트는 덤 !

추천37

댓글 전체

질문있는데요. 이건 옆단추를 클릭해야 슬라이드되면서 글쓰기 창이 보이는데 거꾸로 기본은 열린채 보이고 클릭하면 닫히게 할 수 없나요?
스타일의 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 부분의 수치를 반대로 적절히 조정하시면 될거같습니다 ^^
전체 1,816 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT