1. 가장 먼저 https://sir.kr/g5_plugin/9227 의 HOOK 파일을 extend 디렉토리로 업로드합니다. 이 파일이 업로드되어 있지 않으면 이후의 진행은 아무...
[펄스나인] 쉽게쓰는 UI/UX - 슬라이드 메뉴
링크
http://false9.iwinv.net/bbs/content.php?co_id=slide_menu1 (1253) https://sir.kr/g5_skin?sca=&sfl=mb_id,1&stx=false9 (432)
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" 를 넣어주시면 됩니다.
참고사항
관리자모드 > 환경설정 > 메뉴설정 에서
메뉴를 생성 해주셔야 됩니다.

남은 주말 유익하게 보내세요~
감사합니다.
버전 정보
첨부파일
그누보드5 스킨
2,752건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
기존 3차메뉴에서 메뉴추가시 대상항목이 많을 경우 해당 메뉴를 찾기가 귀찮아서 검색부분을 추가했습니다. 나머지는 기존 3차메뉴와 동일합니다. 1. /adm /adm/menu...
관리자 메뉴관리 스킨에 사용자 페이지 메뉴 출력부분을 추가했습니다. http://smart.wwiz.kr/menu_roll.php (데모) ztree 플러그인을 사용합니다. 하...
오피스 멀티뷰어 자료실 게시판 최종(업뎃)입니다. 이전 게시판 - https://sir.kr/g5_skin/45425 첨부파일을 다운로드 받아 압축을 풀어준 후 스킨 디렉토...
Summary Name 인라인 폼메일 Category 최신글 스킨 License MIT License Download https://github.com/gnuboard-skins/...
간단한 기능이 하나 더 추가되었고 1.1.1 버전으로 업그레이드 되었습니다. 이전에 다운받으셨던 분들은 다시 받아주세요~ ------------ Summary Name 폼메일 ...
2021.07.06 slide.css 수정 .sh-side-options 클래스에 background-color:#fff 추가 관리자모드 > 환경설정 > 메뉴설정과 연동되는 슬...
제가 관리하고 있는 업체들중 팝업이 너무 많아..제가 그냥 편히 볼 수 있게 만들어 두었습니다. /adm/newwinlist.php에 덮어씌우시면 될것같아요 *종료일시가 현재보다 ...
댓글 92개
추천 꾹!!
즐거운 주말 되세요!
즐거운 주말 되세요~
잘 사용하겠습니다.
잘 활용하겠습니다
적용해보겠습니다.
좋은 느낌이 옵니다.^^
귀한 자료 공유해 주셔서 감사합니다.
댓글 감사합니다!
감사합니다.
펄스나인님 메뉴를 왼쪽으로 위치하는 방법좀 알려 주실수 있을까요?
왼쪽으로는 보내지는데 닫을때 위치변경을 모르겠습니다...
닫고 열고 하는 부분은 translateX(); 입니다~
translateX(420px), translateX(0px)
왼쪽으로 변경하셨다면
위 부분을 반대로 바꾸시거나 -420px 등으로 조정 해보세요~
참고로 왼쪽으로 변경하시는 경우
아래로 내용이 길어지거나 브라우저의 세로사이즈가 작아지거나 하면
우측에 스크롤바가 표기될 수 있습니다~
현재는 right를 음수로 줘서 스크롤바가 안보이게 되어있습니다~
안되시면 말씀주세요 ^^
답변 주셔서 대단히 감사합니다.
지금 읽어보고 적용 바로하였습니다.
다시한번 감사드립니다.
감사합니다 !
올려주셔서 감사합니다.
유익한 주말 되세요 !
슬라이드는 하나만 적용되나요.
위 내용은 쓰고 있는데 다른내용을 슬라이드 시키려면....
HTML 복사하셔서 클래스명 바꾸고 바뀐 클래스에 맞게 스타일 붙여주시고
열고 닫고 하는 스크립트 복사하셔서 클래스 맞춰주시면 되실거에요.
글로 설명하기는 분량이 좀 많습니다 ㅠ
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>
이렇게 버튼을 만들었습니다
근대 게시판에서는 버튼을 눌러도 슬라이드가 나오지 않고
아무 반응이 없는대 왜 그런지 알수 있을런지요?
콘솔에러는 없는지 확인해보셔야 될것 같습니다.
파일 로드만 잘되고 있다면 크게 문제는 없을거같은데 음
사용자의 모든 상황을 알 수 없는 관계로
명확한 답변이 어렵네요~
게시판 페이지 에서 소스보기 하셔서
슬라이더를 담당하는 코드들이 잘 보이는지부터 확인해보세요.
안보인다면 파일로드가 안된거고 그게아니시면
브라우저에서 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차분류링크를 사용 하려면
대분류 우측에 화살표를 만들고 화살표를 눌렀을때만 하위메뉴가 열리도록 수정작업을 하면 될것 같습니다.
테스트 해보지는 않았습니다 ㅠ
[code]
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)
}
}
}
}
[/code]
+ 흑흑..진짜 죄송한데 이렇게 바꾸니까
3차 메뉴까지 있을 때 2차 메뉴 접고 펴는 게 1차 메뉴에 적용되는데
자식 메뉴의 이벤트가 부모 요소로 적용 안되게 하는 방법이 있을까요?...
stopPropagation() 써봤는데 오류 나네요 ㅠㅠㅠ
++ 와 e.stopPropagation(); 넣는 위치가 잘못된 거였어요 해결했습니다 ㅎㅎㅎㅎㅎㅎ
혹시 테마에서도 사용이 가능한가요?
테마에 삽입해봤는데 모바일은 노출이 되는데 pc에서 노출이 안되어서요 ^^;;
테마에서도 사용이 가능합니다!
구조를 몰라서 정확한 답변이 어렵네요 ㅠ
쪽지로 url 보내주시면 확인해드리겠습니다~
이놈이 숨어있네요. ㅎㅎ 밖으로 빼보도록 하겠습니다.
그럴 수 있습니다..ㅎㅎ
잘 써주시니 감사할 따름 입니다!
도움이 되신다니 좋네요 ㅎㅎ
좋은말씀 감사합니다!
translateX(420px), translateX(0px)
위 부분을 반대로 바꾸시거나 -420px 등으로 조정 해보세요~
참고로 왼쪽으로 변경하시는 경우
아래로 내용이 길어지거나 브라우저의 세로사이즈가 작아지거나 하면
우측에 스크롤바가 표기될 수 있습니다.
감사합니다~