그누보드 퀵메뉴 & TOP 버튼 조합 - 플로팅 퀵메뉴
페이지 정보
본문
유용한 퀵메뉴 소스를 그누보드 고수님께서 공개 해주셔서 URL.KR에 적용해서 사용해 봤는데 특별히 사용할 기능이 없어서
코드 다이어트 차원에서 뺏습니다.
혹시 몰라 백업용으로 이곳에 공개 합니다.
저는 footer.php 파일에 넣어서 사용 했었습니다.
'
출처: https://sir.kr/g5_skin/46735
[code]
<!-- 퀵메뉴 스타일 20210811 { -->
<style>
body {background-color: #f1f1f1; margin:0; padding: 0;}
ul {margin: 0;}
.fixed_quick {
position: fixed;
z-index: 99999;
bottom: 30px; /* 위치 */
right: 30px; /* 위치 */
}
.quick {
border-radius: 40%;
text-align: center;
height: 50px; /* 크기 */
width: 50px; /* 크기 */
box-sizing: border-box;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); /* 그림자 */
cursor: pointer;
transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);
border:0.1px solid rgba(0,0,0,0.1); /* 테두리라인 */
}
.quick svg {transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);}
.quick:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.01); border:0.1px solid rgba(0,0,0,0.5);}
.quick:hover svg {fill: #000;} /* 마우스오버시 svg 아이콘의 fill 변경 */
/* 퀵메뉴 개별 스타일 */
.quick1 {background-color: #F7E600; display: none;}
.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;}
.quick4 svg {margin-top: 13px;}
.quick5 {background-color: #fff; margin-top: 8px;}
.quick5 svg {margin-top: 13px;}
</style>
<!-- } -->
<!-- 아래 제이쿼리는 그누보드/영카트의 경우 로드되어 있으니 빼주시면 됩니다. { -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- } -->
<!-- 퀵메뉴 시작 20210811 { -->
<div class="fixed_quick">
<ul>
<!-- 퀵메뉴1 { -->
<div class="quick quick1" onclick="location.href='#';">
<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>
</div>
<!-- } -->
<!-- 퀵메뉴2 { -->
<div class="quick quick2" onclick="location.href='#';">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#aaa">
<g><rect fill="none" height="24" width="24" y="0" /></g>
<g><path d="M12,2c-4.2,0-8,3.22-8,8.2c0,3.18,2.45,6.92,7.34,11.23c0.38,0.33,0.95,0.33,1.33,0 C17.55,17.12,20,13.38,20,10.2C20,5.22,16.2,2,12,2z M12,12c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2 C14,11.1,13.1,12,12,12z" enable-background="new" /></g>
</svg>
</div>
<!-- } -->
<!-- 퀵메뉴3 { -->
<div class="quick quick3" title='운영자에게 메일 보내기' onclick="location.href='mailto:replypark@naver.com';">
<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="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
</div>
<!-- } -->
<!-- 퀵메뉴4 // 여기는 고정 입니다.{ -->
<div class="quick quick5" title='제일 위로 바로가기' 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>
<div class="quick quick4">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#aaa">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z" />
</svg>
</div>
<!-- } -->
</ul>
</div>
<script>
//클릭액션 quick4 를 클릭하는 경우 나머지 보이기&감추기
$(document).ready(function() {
$('.quick4').click(function() {
$('.quick1').fadeToggle(200);
$('.quick2').fadeToggle(250);
$('.quick3').fadeToggle(300);
});
});
</script>
<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>
<!-- } 퀵메뉴 끝 -->
[/code]
[참고]
문자쓰기로 바로 보내기
[code]
onclick="location.href='sms:010-0000-0000';"
[/code]
전화걸기로 연결
[code]
onclick="location.href='tel:010-0000-0000';"
[/code]
첨부파일
-
quick.html (3.3K)
0회 다운로드 | DATE : 2022-08-04 09:06:14
- 이전글
- 다음글
댓글목록
등록된 댓글이 없습니다.