게시판
오피스 멀티뷰어 자료실 게시판 최종(업뎃)입니다. 이전 게시판 - https://sir.kr/g5_skin/45425 첨부파일을 다운로드 받아 압축을 풀어준 후 스킨 디렉토...
[펄스나인] 쉽게쓰는 UI/UX - 슬라이드 메뉴
링크
http://false9.iwinv.net/bbs/content.php?co_id=slide_menu1 (1233) https://sir.kr/g5_skin?sca=&sfl=mb_id,1&stx=false9 (381)
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.4.5.5
호환 가능 버전
5.4
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
최신글
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에 덮어씌우시면 될것같아요 *종료일시가 현재보다 ...
게시판
https://sir.kr/qa/419888 게시판 게시글에 마우스 오버시 이미지가있다면 이미지를 미리볼수있게는 못하나요?
게시판
mp4 리스트 동영상 게시판은 첨부파일을 올려서 그걸 읽는 방식보다는 다른 디렉토리에 동영상을 올리고 주소를 추출하여 소스를 작성하는 방식으로 만들었습니다. 왜냐하면 첨부파일로는 ...
최신글
설치방법 -테마폴더 /widget/ 폴더안에 넣어주세요. ex) theme/BS4-Basic/widget 사용방법 <?php echo na_widget('wr-r...
게시판
예전 게시판 - https://sir.kr/g5_skin/45324 의 버전업으로 더 이상 업뎃은 없습니다. 이 게시판은 오직 html+css+자바스크립트 로만 사용하여야 합니다....
댓글 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 등으로 조정 해보세요~
참고로 왼쪽으로 변경하시는 경우
아래로 내용이 길어지거나 브라우저의 세로사이즈가 작아지거나 하면
우측에 스크롤바가 표기될 수 있습니다.
감사합니다~