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

그누보드5 스킨

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

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

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

첨부파일

slide_menu.zip (5.7K) 260회 다운로드 2021-07-06 09:53:38 포인트 차감10
테스트한 버전5.4.5.5
호환 가능 버전5.4

본문

2021.07.06 slide.css 수정

.sh-side-options 클래스에 background-color:#fff 추가

 

관리자모드 > 환경설정 > 메뉴설정과 연동되는 슬라이드 메뉴 입니다.

 

모바일 및 PC에서 사용할 수 있고,

특히 모바일에서 활용도가 높을것 같습니다.

 

사용방법

 

첨부파일의 압축을 푸신 후 slide_menu 폴더를 그누보드가 설치된 경로에 업로드 해주시고,

하단부나 상단부 등 공통되는 부분에 아래 코드를 추가해 주세요.

<?php include_once(G5_PATH.'/slide_menu/slide_menu.php'); ?>

 

클릭시 메뉴가 열려야 하므로 클릭할 수 있는 버튼이나 링크를

적절한 위치에 추가 하신 후 class="sh-side-options-item-trigger" 를 넣어주시면 됩니다.

 

참고사항

 

관리자모드 > 환경설정 > 메뉴설정 에서

메뉴를 생성 해주셔야 됩니다.

 

3537874131_1625374431.279.png

 

남은 주말 유익하게 보내세요~

감사합니다.

추천
33

댓글 전체

적용해서 사용해보니까 정말 좋습니다. 감사드려요.
펄스나인님 메뉴를 왼쪽으로 위치하는 방법좀 알려 주실수 있을까요?
왼쪽으로는 보내지는데 닫을때 위치변경을 모르겠습니다...
좋은말씀 감사합니다!

닫고 열고 하는 부분은 translateX(); 입니다~
translateX(420px), translateX(0px)

왼쪽으로 변경하셨다면
위 부분을 반대로 바꾸시거나 -420px 등으로 조정 해보세요~

참고로 왼쪽으로 변경하시는 경우
아래로 내용이 길어지거나 브라우저의 세로사이즈가 작아지거나 하면
우측에 스크롤바가 표기될 수 있습니다~

현재는 right를 음수로 줘서 스크롤바가 안보이게 되어있습니다~
안되시면 말씀주세요 ^^


답변 주셔서 대단히 감사합니다.
지금 읽어보고 적용 바로하였습니다.
다시한번 감사드립니다.
한개이상 사용하시려면 음..
HTML 복사하셔서 클래스명 바꾸고 바뀐 클래스에 맞게 스타일 붙여주시고
열고 닫고 하는 스크립트 복사하셔서 클래스 맞춰주시면 되실거에요.

글로 설명하기는 분량이 좀 많습니다 ㅠ
1. slide_menu 업로드 그누보드설치경로 업로드완료

2. 그누보드설치경로/index.php 에
<?php include_once(G5_PATH.'/slide_menu/slide_menu.php'); ?>
추가

3.class="sh-side-options-item-trigger" 이거는어디서넣는건지 ㅠㅠ? 제가 잘몰라서 설명가능할까요
우선 버튼이나 링크가 하나 있어야 눌렀을때 열리겠죠~?
적절한 위치에 링크나 버튼을 하나 만들어 주시고
해당 링크나 버튼에 클래스를 추가해 주시면 되겠습니다.

class="sh-side-options-item-trigger" 요게 들어가야
눌렀을때 슬라이더가 열립니다!
버튼이나 링크를 아래처럼 만들어주시면 되겠습니다.

링크일때
<a href="javascript:void(0);" class="sh-side-options-item-trigger">열기</a>
버튼일때
<button type="button" class="sh-side-options-item-trigger">열기</button>

그리고 /index.php 에 인클루드를 하게되면
메인페이지 외에는 슬라이더가 포함되지 않으니 모든 페이지에서 열려야되면
공통으로 들어오는 페이지 tail.php 등에 넣어주시면 되겠습니다.

감사합니다.
안녕하세요 너무 좋은자료 잘쓰고 있습니다^^
하나 질문이 있어 글올립니다

tail.php 파일에 이렇게 해서
메인과 서브 페이지는 잘 나오고 있습니다.
<?php include_once(G5_PATH.'/slide_menu/slide_menu.php'); ?>

버튼은 tail.php 파일에 오른쪽 따라다니는 메뉴에
<a href="javascript:void(0)" class="sh-side-options-item-trigger open_btns"><div class="call">
<h1><i class="xi-comment-o"></i></h1>
<h2>상담신청</h2>
    </div> </a>

이렇게 버튼을 만들었습니다

근대 게시판에서는 버튼을 눌러도 슬라이드가 나오지 않고
아무 반응이 없는대 왜 그런지 알수 있을런지요?
게시판 설정에서 다른 tail 을 로드하고 있지는 않은지,
콘솔에러는 없는지 확인해보셔야 될것 같습니다.
파일 로드만 잘되고 있다면 크게 문제는 없을거같은데 음

사용자의 모든 상황을 알 수 없는 관계로
명확한 답변이 어렵네요~

게시판 페이지 에서 소스보기 하셔서
슬라이더를 담당하는 코드들이 잘 보이는지부터 확인해보세요.
안보인다면 파일로드가 안된거고 그게아니시면

브라우저에서 F12를 누르시고 
여는 버튼을 클릭했을때 Console 탭에서 에러는 없는지 확인해보세요.
파일아래쪽에 닫기 버튼 스크립트가 있습니다.

$('.sh-side-demos-container-close').on('click', function() {
    $('.sh-side-options').css('transition', 'all 600ms cubic-bezier(0.86, 0, 0.07, 1)');
    $('.sh-side-options').removeClass('open');
    $('.bgs').hide();
});

복사하셔서 .sh-side-demos-container-close 부분을
메뉴에 해당하는 클래스로 바꿔주시면 될것같습니다.
대분류를 눌렀을때 열리는 형태라 안되실거같고
말씀주신대로 1차분류링크를 사용 하려면
대분류 우측에 화살표를 만들고 화살표를 눌렀을때만 하위메뉴가 열리도록 수정작업을 하면 될것 같습니다.
js파일 152라인의 function u() { } 부분 전체를 아래 코드로 바꾸시면 될것 같습니다.
테스트 해보지는 않았습니다 ㅠ


function u() {
    var w = m;
    for (var d = 0; d < w.length; d++) {
        var v = w.eq(d);
        if (d == r) {
            if (c.ie7 == false) {
                v.toggleClass("DB_select").find(">ul").slideToggle(c.motionSpeed)
            } else {
                v.toggleClass("DB_select").find(">ul").slideToggle(c.motionSpeed)
            }
        }
    }
}
잘 적용되네요 ㅎㅎ 수정 코드까지 알려주시고 감사합니다!!

+ 흑흑..진짜 죄송한데 이렇게 바꾸니까
3차 메뉴까지 있을 때 2차 메뉴 접고 펴는 게 1차 메뉴에 적용되는데
자식 메뉴의 이벤트가 부모 요소로 적용 안되게 하는 방법이 있을까요?...
stopPropagation() 써봤는데 오류 나네요 ㅠㅠㅠ

++ 와 e.stopPropagation(); 넣는 위치가 잘못된 거였어요 해결했습니다 ㅎㅎㅎㅎㅎㅎ
너무 멋찐 메뉴이네요. 감사합니다.
혹시 테마에서도 사용이 가능한가요?
테마에 삽입해봤는데 모바일은 노출이 되는데 pc에서 노출이 안되어서요 ^^;;
댓글 감사합니다~
테마에서도 사용이 가능합니다!
구조를 몰라서 정확한 답변이 어렵네요 ㅠ
쪽지로 url 보내주시면 확인해드리겠습니다~
닫고 열고 하는 부분은 translateX(); 입니다.
translateX(420px), translateX(0px)

위 부분을 반대로 바꾸시거나 -420px 등으로 조정 해보세요~

참고로 왼쪽으로 변경하시는 경우
아래로 내용이 길어지거나 브라우저의 세로사이즈가 작아지거나 하면
우측에 스크롤바가 표기될 수 있습니다.
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

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