SIR
펄스나인

[펄스나인] 쉽게쓰는 UI/UX - 플로팅 퀵메뉴

펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 4년 전 · 11364 · 144

링크

http://false9.iwinv.net/bbs/content.php?co_id=fixed_quick (1252)
fixed_quick.png

안녕하세요. 펄스나인 입니다.

활용도가 높은 플로팅 퀵메뉴 입니다.

 

position:fixed 로 우측하단에 고정되어 있고

클릭시 보였다가 사라지는 애니메이션이 포함되어 있습니다.

자세한 내용은 코드내 주석을 참고하세요!

 

아이콘은 구글 머티리얼 아이콘에서 svg 파일을 다운 받아서 사용했으니

https://fonts.google.com/icons 에서 적절히 변경하시면 되겠습니다.

 

사용방법

파일내 코드를 공통되는 페이지 (tail.php 등)에 추가하시면 됩니다.

 

미약하게나마 도움이 되셨으면 좋겠습니다.

감사합니다!

#PC용 #모바일용 #반응형

버전 정보

테스트한 버전 5.4.9
호환 가능 버전 무관

첨부파일

fixed_quick.png (8.5 KB) 0회 2021-08-10 16:42 포인트 차감 10
fixed_quick.zip (2.5 KB) 526회 2021-08-10 16:42 포인트 차감 10
|
글쓰기

댓글 144개

열공중
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사히 잘쓰겠습니다. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~ 복받으세요~
aascii
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
우오!!! 펄스나인님 감사합니다!! 필요했던 거에요!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
ㅎㅎ 타이밍이 좋았네요!
잘 써주십시요 ^^;
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
늘 유용한 스킨 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
항상 좋은 말씀 감사합니다~! :D
릴보이즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
ㅋㅋㅋ 좋네여 깜찍하다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
ㅎㅎㅎ 댓글 감사합니다~
쎈쎈창
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
헐... 대박... 감사합니다.. 펄스나인님!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
코드보시면 아시겠지만 별거없습니다.. ㅎㅎ
저녁 맛있게 드십시요~!
파파란하늘아래
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
늘 감사하고 고맙습니다. ~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
^^ 좋은말씀 감사합니다~
말말티즈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
좋은 스킨 감사합니다!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
좋은말씀 감사합니다 ~!
해해피메이커
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
펄스나인님의 이벤트 게시판을 사용 한 후로는 펄스나인님의 글을 유심히 보게 되었습니다. 너무나 감사합니다. 저는 이벤트 게시판을 행사 소개, 강의 소개 게시판으로 쓰고 있습니다.

참 그럴싸한 멋진 디자인입니다.
여기에 강의 듣고 난 후에 후기도 있으면 좋겠습니다.
아래 링크의 맨 하단에 구매 후기 모양 멋지네요.
안하셔도 됩니다. 그냥 참고하시라고....ㅎ
https://www.yeolimprinting.co.kr/
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
ㅎㅎ 좋은말씀 감사합니다 !
다음 스킨작업에 한번 참고해보겠습니다 ^^
해해피메이커
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
와우~~
감동입니다.
트트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
좋네요~ 감사합니다.^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
항상 감사합니다 ^^
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
멋집니다. 바로 적용했습니다.
좋은 하루 되세요.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
적용해주셔서 감사합니다 ^^
편안한 하루 되십시요!
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
아이콘 변경 방법에 대한 설명을 간단히라도 부탁드려도 될까요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
https://fonts.google.com/icons
들어가셔서 사용하실 아이콘을 클릭하시면
우측에 정보가 나옵니다~
우측 하단에 보시면 파란색 SVG 다운로드 버튼이 있을거에요.
눌러서 다운받으신 후에 파일을 브라우저로 여시고
우클릭 > 소스보기 하셔서 보이는 코드를 넣어주시면 됩니다.

------------

구글에서 제공하는 라이브러리를 로드해서
<span class="material-icons">help_outline</span>
이런형태로 불러와도 되지만
일부 IOS 환경에서는 안보이는 문제가 있어서
위 방법으로 넣으시는것이 좋을것 같습니다~
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
답변 감사합니다.
hhikuki
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다 ^^ 저두 적용하러 갑니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 ! ^^
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
안녕하세요. 저는 메뉴로 넣을게 마땅치 않아 TOP버튼을 함께 고정으로 넣어 봤습니다.
구글링해서 만든 거라 맞는지 모르겠지만 작동은 잘 하는것 같아요.
펄스나인님이 손좀 봐주실 수 있으면 완벽할것 같습니다.. ^^

https://url.kr/g5/bbs/board.php?bo_table=free_90_23z


<div class="quick quick5" onclick="location.href='#';id='MOVE_TOP_BTN'">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>
</div>
<script>
//TOP 버튼
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#MOVE_TOP_BTN').fadeIn();
} else {
$('#MOVE_TOP_BTN').fadeOut();
}
});

$("#MOVE_TOP_BTN").click(function() {
$('html, body').animate({
scrollTop : 0
}, 400);
return false;
});
});
</script>
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
이미 잘 적용하셨는데요 ㅎㅎ
호텔천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
혹시 메뉴에 마우스 오버시 설명 문구 나오게는 어떻게 하면 되는지 알수 있을까요? 메뉴 설명을 넣고 싶어서요. ^^

자문자답) 구글은 모르는게 없네요. ^^
아래와 같이 했습니다.

<div class="quick quick5" title='제일 위로 바로가기' onclick="location.href='#';id='MOVE_TOP_BTN'">
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
네 ㅎㅎ title="" 로 표현이 가능합니다~
해결되셨다니 다행입니다 ^^
크크리스휘
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
멋진 UI 공개해 주셔서 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~ 편안한 하루 되십시요~!!
아아주까리까리
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
최근에 고객들이 요청을 많이 해서 폰트어썸으로 그냥 나오게 했는데,
이렇게 만들어 주시니 넘 감사합니다 ^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
도움이 되신다니 좋네요 ~ ^^
댓글 감사합니다!
아이스웨덴™
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
적용을 해봐야겠습니다. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~!
큐큐디오
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
매번 유용한 자료 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 ^^
엔엔존
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다. 멋집니다.
늘 좋은 소스를 올려주셔서 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
항상 좋은말씀 고맙습니다~!
dajindesign
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
좋게 잘 사용하고 있습니다.
즐건 하루 되세요...
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 ^^
편안한 주말 되십시요~
dajindesign
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
target="_blank" 좀 봐주시면.....
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
onclick="location.href='#';" 부분을
onclick="window.open('https://sir.kr');" 이렇게
window.open('주소'); 로 바꿔주시면 되겠습니다.

추가로 모바일에서 전화걸기로 연결되도록 하려면
onclick="location.href='tel:010-1234-5678';"
이렇게 하시면 되겠습니다~
dajindesign
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다....
얻어만 가는군요~~~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
별말씀을요~
편안한 주말 되세요~
두두등장
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다!!!!!!!!!!!!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다 ^^
사랑스런도깨비
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
멋집니다 ㅜ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
별말씀을요 ^^
댓글 감사합니다!
rlaeodn
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
휴대폰에서 카카오톡과 문자로 갈려면 onclick="location.href='#';" 이부분 뭐라고 넣어야 하나요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
문자쓰기로 바로 보내려면 아래처럼 하시면 되겠습니다.
onclick="location.href='sms:010-0000-0000';"

카카오톡이 열리게 하려변 별도 스크립트 작업이 필요할것 같습니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~
멘멘탈단디잡자
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
와우 잘쓰겠습니다^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~ 유익한 주말 되십시요~!
끊어진머리끈
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
잘쓰겠습니다. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~ 편안한 주말 되세요!
카카리스마깡
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 !
bbanjang
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
카카오 아이콘은 svg 소스를 어떻게 가져오나요? 구글 아이콘 사이트에 카카오는 검색해봐도 없어보이던데 ..잘 몰라서 문의드립니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
올려드린 샘플페이지에 들어가있는
카카오 아이콘이 SVG입니다 ㅡ
[code]
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 191.94" width="24" fill="#3A1D1D">
<g>
<polygon class="cls-1" points="76.01 89.49 87.99 89.49 87.99 89.49 82 72.47 76.01 89.49" />
<path class="cls-1" d="M104,0C46.56,0,0,36.71,0,82c0,29.28,19.47,55,48.75,69.48-1.59,5.49-10.24,35.34-10.58,37.69,0,0-.21,1.76.93,2.43a3.14,3.14,0,0,0,2.48.15c3.28-.46,38-24.81,44-29A131.56,131.56,0,0,0,104,164c57.44,0,104-36.71,104-82S161.44,0,104,0ZM52.53,69.27c-.13,11.6.1,23.8-.09,35.22-.06,3.65-2.16,4.74-5,5.78a1.88,1.88,0,0,1-1,.07c-3.25-.64-5.84-1.8-5.92-5.84-.23-11.41.07-23.63-.09-35.23-2.75-.11-6.67.11-9.22,0-3.54-.23-6-2.48-5.85-5.83s1.94-5.76,5.91-5.82c9.38-.14,21-.14,30.38,0,4,.06,5.78,2.48,5.9,5.82s-2.3,5.6-5.83,5.83C59.2,69.38,55.29,69.16,52.53,69.27Zm50.4,40.45a9.24,9.24,0,0,1-3.82.83c-2.5,0-4.41-1-5-2.65l-3-7.78H72.85l-3,7.78c-.58,1.63-2.49,2.65-5,2.65a9.16,9.16,0,0,1-3.81-.83c-1.66-.76-3.25-2.86-1.43-8.52L74,63.42a9,9,0,0,1,8-5.92,9.07,9.07,0,0,1,8,5.93l14.34,37.76C106.17,106.86,104.58,109,102.93,109.72Zm30.32,0H114a5.64,5.64,0,0,1-5.75-5.5V63.5a6.13,6.13,0,0,1,12.25,0V98.75h12.75a5.51,5.51,0,1,1,0,11Zm47-4.52A6,6,0,0,1,169.49,108L155.42,89.37l-2.08,2.08v13.09a6,6,0,0,1-12,0v-41a6,6,0,0,1,12,0V76.4l16.74-16.74a4.64,4.64,0,0,1,3.33-1.34,6.08,6.08,0,0,1,5.9,5.58A4.7,4.7,0,0,1,178,67.55L164.3,81.22l14.77,19.57A6,6,0,0,1,180.22,105.23Z" />
</g>
</svg>
[/code]
저게 마음에 안드시면
구글에서 그냥 카카오로고 SVG 검색하시면 많이 나옵니다!
디디엔
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
예쁘게 잘쓰겠습니다! 감사해요!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 ^^ 잘 써주십시요~
장장광수
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사히 잘쓰겠습니다. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다!
enge
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
쌩코딩으론 해봤어도 그누에서 보게되다니 반갑네용
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
ㅎㅎ 도움이 되셨으면 좋겠습니다~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~!
트트루아이
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감~사합니다
매매리골드
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~
lleesolver
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
유용한 정보 정말 감사드립니다!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다 ^^ 편안한 한주 보내십시요~
인인삼향기
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
좋은 스킨입니다. ㅠㅡㅜ 감사합니다.
궁금한게있는데요 처음부터 메뉴들이 펼쳐져있게 하려면 어떻게 해야될까요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~
파일내 아래 스타일에서 끝에 display:none; 을 제거해주세요~

.quick1 {background-color: #F7E600; display: none;}
.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 {background-color: #fff; margin-top: 8px; display: none;}

감사합니다!
인인삼향기
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다~
엘엘뤼아르
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
감사합니다
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
댓글 감사합니다~!
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
사용 방법을 잘모르겠는데 자세히좀 알려주실수 있으신가요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
설치를하거나 하는게 아닙니다~
코드를 보시고 사용하실곳에 붙여넣으시면 됩니다~
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
메인화면에 넣으려고하면 어떤 파일을 하면 될까요?!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
맨위쪽에 첨부파일(아래캡쳐참고)을 다운로드하셔서
[http://sir.kr/data/editor/2112/504f71c12ebf6fab1568f89993d642c2_1640759261_321.png]
압축을 푸시면 html파일이 하나 있습니다.
html파일을 메모장이나 편집기로 열으셔서 보이는 코드를
보이고자하시는 페이지에 추가하시면 되겠습니다~

감사합니다.
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
위 처럼 뜨는 이유가 있을까요?
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
[http://sir.kr/data/editor/2112/f31a22e311981b91562d50018b9e45ff_1640759761_7643.jpg]
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
에러가 날만한 코드가 없습니다 ㅠ
php관련 코드는 없고 단순한 html에 스크립트만 있는지라.
코드를 어떤파일에 넣으신걸까요?
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
혹시 문자 아이콘 으로 되어 있는 부분을 클릭하면 top 버튼처럼 동작 되도록 할수가 있나요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
제이쿼리를 활용하시면 되겠습니다~
사용방법은 $(window).scrollTop(0); 으로 구글검색 해보시면
예제가 많이 있습니다 ~!
지용준
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
혹시 마우스 오버시 자동으로 펼쳐 지도록 할수 있을까요?!
그리고 접히는건 3초 정도 뒤 자동으로 접히게?! 가능할까요?
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
스크립트에 click 을 hover 로 바꺼주심 될것 같습니다 ㅡ
헛헛둘헛둘
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
아이고 선생님 너무 감사합니다. 근데 제가 잘 몰라서 여쭙습니다.

지금 이 자료는 화면 맨 아래에 기본키가 되어있고..누르면 메뉴들이 아래로 접히게 되는데요

저는 메인 키가 위에있고( 누르면 메뉴들이 위로 접히게 ) 하고 싶습니다.

메인키를 위로 올리면 될거같은데..스크립트를 어떻게 변화시켜야할까요~

조용히 여쭙습니다~~
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전
안녕하세요!
파일내 21라인의 스타일을 아래와같이 변경해주시고
[code]
/* 퀵메뉴 개별 스타일 */
.quick1 {background-color: #F7E600; }
.quick1 svg {margin-top: 13px;}

.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick2 svg {margin-top: 13px;}

.quick3 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 svg {margin-top: 13px;}

.quick4 {background-color: #fff; margin-top: 8px; display: none;}
.quick4 svg {margin-top: 13px;}
[/code]

맨마지막에 스크립트를
[code]
<script>
$(document).ready(function() {
$('.quick1').click(function() {
$('.quick2').fadeToggle(200);
$('.quick3').fadeToggle(250);
$('.quick4').fadeToggle(300);
});
});
</script>
[/code]
이렇게 바꿔주시면 반대로 되지않을까 합니다!

즉 1번 외에 다른버튼들은 css로 미리 숨겨두고
1번 클릭시 스크립트에서 2,3,4번을 토글한다는 내용입니다~

감사합니다.
헛헛둘헛둘
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
펄스나인님! 여쭤볼께 있는데요

반대로

첨엔 모든 메뉴가 닫혀 있다가..클릭하면 열리게 할수 있는건가요?

지금은 첨부터 메뉴가 열려있다가 클릭시 닫히는 구조인데...
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
css에서 display: none 으로 숨기고 보이고 하게끔 처리되어 있습니다.
css및 버튼의 액션을 반대로 주시면 될것 같습니다~
헛헛둘헛둘
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
아 display: none 를 반대순서로만 하면 되는군요~ 감사합니다.
aksvf31rf
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
와 천재입니다 천재 .. 펄스나인님 혹시
이모티콘 중앙에있는것들이 살짝 왼쪽으로 쏠려있는데 이건 어케수정해요??
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
좋은말씀 감사합니다.
위치변경은 파일 27라인쯤에

/* 퀵메뉴 개별 스타일 */
.quick1 svg {margin-top: 13px;}
.quick2 svg {margin-top: 13px;}
.quick3 svg {margin-top: 13px;}
.quick4 svg {margin-top: 13px;}

부분이 있는데 여기에
margin-left: ??px 를 추가해주시면 되겠습니다~

예) .quick1 svg {margin-top: 13px; margin-left:2px;}
aksvf31rf
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
해결됬습니다 정말감사합니다 진짜잘쓸게요
너무필요했는데 이런거 구축도 해주시고 정말 완벽합니다 건강하세요!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
도움이 되시는것같아서 기분이 좋아졌습니다 ㅎㅎ
좋은 말씀 감사합니다! 즐코딩 되세요~
허허걱김선생
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
너무 멋있는 퀵 메뉴네요.
혹시 이걸 제가 만든 이미지 한개만 넣을 수 있을까요?
항상 떠있는 배너 처럼 사용하려구요.
그리고 위치 조정은 어떻게 해야 할까요?

좋은 프로그램
감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
위치 변경은 주석으로 표기를 해두었습니다.
코드 우선 보시면 왠만한건 표기를 다 해두었으니 쉽게 하실 수 있을것 같습니다.

[http://sir.kr/data/editor/2206/34d99c5603dff110cf4dcf41f5e7ac1b_1656571626_5052.png]

질문 하신대로 한개만 떠있게 하시는거면

<!-- 퀵메뉴1, 2, 3 -->
<!-- } -->

부분을 모두 삭제해주시고

<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick4">
여기
</div>
<!-- } -->

위 부분 안에 이미지 넣어주시면 될것 같고

열리고 닫히는게 필요가없으니 아래쪽에 //클릭액션 이하
<script></script> 부분 지워주시면 될것 같습니다.

감사합니다.
허허걱김선생
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
아미나와도 충돌 없이 잘 되네요.
정말 가지고 싶었던 거에요. ^^;;

감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
다행이네요 ^^
감사합니다!
김마린2
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
[http://sir.kr/data/editor/2207/6df474bd68d26e33c31f9134b5b501c6_1658624652_8037.jpg]

안녕하세요 펄스나인님~
아래 카톡같이 배경흐림과 아이콘옆에 텍스트를
붙여주고싶은데 어떻게하면 좋을까요ㅜ
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
이런거는 필요에의한 커스텀이라 직접 처리를 하셔야 될것 같습니다.
대강 구성을 드리자면

.quick 에 position: relative; 를 추가하고
<div class="quick"> 안에 <span></span> 으로 텍스트를 추가한 다음

.quick span {position: absolute; top:0px; left:-100px;} 을 추가해서
top과 left 로 위치를 잡아주시면 될것 같습니다.
나나야웹
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
잘쓰겠습니다. 감사합니다.
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
댓글 감사합니다~
공공승현
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
정말 좋은 스킨이에요 :)
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
좋은말씀 감사합니다 ^^
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
댓글 감사합니다 !
행행복의길
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
너무 멋집니다!!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
^^ 감사합니다!
나나무르
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
항상 좋은 스킨 제공해주셔서 감사합니다!!
펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
요새 좀 뜸해서 ㅠㅠ
조만간 올라오겠습니다~!
댓글 감사합니다!
워프스타
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
감사드립니다
허허걱김선생
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

아이콘이 마음에 들지 않아서 이미지를 삽입했는데요.

모바일과 pc에서 위치랑 이미지 크기를 다르게 하기를 원하는데

어떻게 해야 할 지 막막합니다.

스타일을 두개(모바일,pc) 넣었더니

한가지 로만 적용이 되는데

조언 좀 얻을 수 있을까요?

감사합니다. (__)

펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

안녕하세요~
작업 하신 url을 봐야 답변 드릴 수 있을것 같습니다!

그누초초보
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
감사합니다~ 딱 찾던 소스인데 응용해서 수정했습니다^^
근데 한페이지 내에 플로팅이 두개일 경우 별도처리를 해야하는데 그게 어렵네요ㅠㅠ한개는 클릭 시 페이지 상단으로 이동하는 소스인데 이 플로팅 클릭시에도 페이지 상단으로 같이 이동하면서 펼쳐져서요ㅠㅠ아무리 찾아봐도 안보이는데 이럴경우 js 어떻게 수정해야할까요?ㅠㅠㅠjs에 약해서 봐도 모르겠어요ㅠㅠ
오렌지디자인웹팀
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

감사합니다~! 잘쓰겠씁니다!

펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

댓글 감사합니다 ^^

오렌지디자인웹팀
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
퀵메뉴
초초록물고기
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

좋은 스킨 공유 감사합니다.^^

혹시 카카오톡 이미지는 어떤 경로로 변경가능한지 알려주실 수 있나요?

구글 폰트 및 아이콘에 들어가도 나오지 않네요 ㅜ

펄스나인
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

이미지를 말씀하시는거면
구글에서 카카오톡 으로 검색하지면 많이 나오실거에요
html에 svg로 들어가있는데 <img src 로 하셔도 됩니다 ^^

초초록물고기
프로필 보기이 회원 글보기이 회원의 댓글보기
 1년 전

펄스나인님

6개월째 혼자 하다가... 도저히 안 되어서 도움요청드려요:)

혼자 해결하고 싶었는데...능력이 안 되네요..

카카오톡 이미지를..네이버 밴드이미지로 하고 싶습니다.

이미지링크는 아래 링크에서 무료로 제공해주어서요..

부탁 좀 드립니다.ㅜㅜ

항상 고맙습니다.

<img src="data:image/png;base64,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">

 

 

엘엘뤼아르
프로필 보기이 회원 글보기이 회원의 댓글보기
 1개월 전

감사합니다.

이전글목록다음글
댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누보드5 스킨

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

태그 필터 (최대 3개) 전체 PC용 모바일용 반응형
+
이전 첫 페이지 다음
🐛 버그신고