[펄스나인] 쉽게쓰는 UI/UX - 슬라이드 DIV
웹사이트에 슬라이드 히든 메뉴를 추가하고 싶을때
쉽게 추가할 수 있습니다.
다운받은 파일(폴더)을 그누보드가 설치된 폴더 적당한 위치에 업로드하시고
tail.php 또는 tail.sub.php 등 하단부에 호출만 해주시면 끝!
[code]
<?php include_once('경로/right_slide/right.php'); ?>
//그누 폴더에 업로드한경우
<?php include_once(G5_PATH.'/right_slide/right.php'); ?>
[/code]
폴더를 업로드 하지 않고, 코드만 복사하셔서 써도 되고
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 포인트는 덤 !
버전 정보
첨부파일
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 123개
필요하실때 간편하게 써보셔요 ㅎㅎ
감사히 사용하겠습니다
그럼 이번 한주도 즐겁게 보내세요^^
건강 유의하세요~
많은 공부가 되네요!!
감사합니다.^^
잘쓰세요~~
[code]
.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);
}
[/code]
아래부분은 적절히 변경하시거나 지워주세요.
[code]
@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;
}
}
[/code]
감사합니다
잘 지내시죠 ? ^^
안그래도 펄스나인님 활동이 보일때마다 반갑게 읽고 있습니다 ^^
건강 유의하세요~
감사합니다 펄스나인님도 겅정 유의하세요~ ^^
안에 내용은 작동안하는 샘플 폼 입니다 ^^
상단에 제이쿼리 라이브러리만 호출해주시면 되세요!
그누 기본이라면 head.sub.php 에 제이쿼리가 호출되고 있을거에요.
없다면 아래코드를 추가하시면 됩니다~
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
잘써주십시요 ^^
왼쪽에서 열리게 하려면 어디를 수정해야 할까요,.?
왼쪽에서 오픈은 음,,
style 의 right 부분은 전부 left로 바꾸시고
translateX 부분의 수치를 반대로 적절히 조정하시면 될거같습니다 ^^
잘쓰세요~!
그런데 제가 초보라 "접수하기"를 누르면 어디론가 메세지를 보내야 하는데
그부분을 어떻게 처리 해야 하나요?
죄송합니다. 제가 초보라 너무 초보적인 질문을 하네요!
슬라이드 안에 있는 폼은,, 그냥 참고만 하시라고 넣어놓은
작동하지 않는 예제폼 입니다 ㅠ.ㅠ
일단 그 부분은 제가 찾아서 공부해보겠습니다.
이렇게 좋은 소스를 공유해주셔서 또다시 감사합니다. ^^
좋은말씀 감사합니다~
스타일 관련한 클래스는 그대로쓰고 열리고 닫히는 부분만
id 로 변경하고 스크립트만 추가해도 될거같긴 합니다~
짬나는대로 한번 보기는하겠습니다만,,
언제 가능하다고 말씀을 드리기가 어렵습니다 ㅠ.ㅠ
잘쓸께요
상담신청을 이렇게 적용하면 좋겠네요~
사용빈도가 많을거 같은데 감사합니다~!
잘 써주시면 좋겠습니다 ^^
유용한 자료 정말 감사합니다.
저 위에 있는 댓글 중 열린채로 보이고 클릭하면 닫히게 하는거에 대한 답변을 보고,
그대로 따라해봤습니다.
열린채로 보이기는 하는데,
2가지가 문제가 있더라고요.
1.
열려있을 때 창 좌측에 쉐도우가 없고, 닫았을 때 메인 화면 우측끝에 쉐도우가 생기기에,
이건
box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);의 순서를 서로 바꿔서 해결하였습니다.
2.
그런데, 열려있는 창의 우측 상단 X를 눌렀을 때 닫히질 않습니다.
열기버튼을 클릭했을때 닫히기는 합니다.
혹시
이거 방법이 없을까요?
[http://sir.kr/data/editor/2110/ee8734c763fbeb78e988f8aeb86b0c29_1634725575_7977.png]
$('.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').toggleClass('close_add');
이걸로 바꾸시고 (열고 닫기 둘다 가능하도록)
닫기버튼의 스크립트를 닫는거만 되도록
$('.sh-side-options').addClass('close_add');
하시면 될것 같습니다~
css는 .close_add {transform: translateX(420px);} 입니다~
제가 바로전에 주신 답변을 잘못 이해해서 소스를 적용했었는데,
처음부터 다시 하나하나 수정해보니, 드디어 원하는대로 정상 작동하네요.
정말 감사합니다.
좋은 결과물 얻으시길 바랍니다~
미리 보고 싶어요-^^
https://sir.kr/g5_skin/45763
감사합니다. 잘쓰겠습니다.