상담문의 플로팅 메뉴로 사이트 우측 하단에 상담문의 버튼을 클릭하면 메뉴가 펼쳐지는 기능을 구현해 봤습니다
주요 기능
- 우측 하단에 고정된 상담문의 버튼
- 클릭 시 Talk, 1:1, FAQ 메뉴가 위쪽으로 펼쳐짐
- 메뉴 열림/닫힘 시 부드러운 애니메이션 효과
- 메뉴 외부 클릭 시 자동으로 메뉴 닫힘
- 위쪽 화살표 버튼으로 페이지 상단으로 스크롤
- 반응형 디자인으로 모바일에서도 적절한 크기
디자인 특징
- 이미지와 동일한 색상 구성 (회색 배경, 노란색 포인트)
- 호버 효과와 클릭 애니메이션
- 그림자 효과로 입체감 표현
- 깔끔한 원형 버튼 디자인
샘플 코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상담문의 플로팅 메뉴</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
min-height: 100vh;
position: relative;
}
.content {
padding: 50px 20px;
max-width: 1200px;
margin: 0 auto;
}
.content h1 {
color: #333;
margin-bottom: 20px;
}
.content p {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
/* 플로팅 메뉴 컨테이너 */
.floating-menu {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}
/* 메뉴 아이템들 */
.menu-items {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
pointer-events: none;
}
.menu-items.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.menu-item {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
color: #FFD700;
font-weight: bold;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.menu-item:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.menu-item.talk {
background-color: #4A4A4A;
}
.menu-item.one-on-one {
background-color: #4A4A4A;
}
.menu-item.faq {
background-color: #4A4A4A;
}
/* 메인 버튼 */
.main-button {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #E8E8E8;
color: #333;
padding: 15px 20px;
border-radius: 30px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
min-width: 120px;
}
.main-button:hover {
background-color: #DEDEDE;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.main-button.active {
background-color: #4A4A4A;
color: #fff;
}
/* 이모티콘과 X 버튼 */
.emoji {
background-color: #FFD700;
color: #333;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
margin-left: 10px;
transition: all 0.3s ease;
}
.close-icon {
color: #FFD700;
font-size: 18px;
font-weight: bold;
margin-left: 10px;
}
/* 위쪽 화살표 */
.arrow-up {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.arrow-up:hover {
transform: translateX(-50%) translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.arrow-up::before {
content: "↑";
font-size: 18px;
color: #666;
}
/* 반응형 */
@media (max-width: 768px) {
.floating-menu {
bottom: 20px;
right: 20px;
}
.main-button {
padding: 12px 16px;
font-size: 13px;
min-width: 100px;
}
.menu-item {
width: 50px;
height: 50px;
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="content">
<h1>샘플 페이지</h1>
<p>이 페이지는 우측 하단의 상담문의 플로팅 메뉴를 테스트하기 위한 샘플 페이지입니다.</p>
<p>우측 하단의 "상담문의" 버튼을 클릭해보세요. Talk, 1:1, FAQ 메뉴가 나타납니다.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
</div>
<!-- 플로팅 메뉴 -->
<div class="floating-menu">
<div class="menu-items" id="menuItems">
<a href="#" class="menu-item talk" onclick="handleMenuClick('Talk')">Talk</a>
<a href="#" class="menu-item one-on-one" onclick="handleMenuClick('1:1')">1:1</a>
<a href="#" class="menu-item faq" onclick="handleMenuClick('FAQ')">FAQ</a>
</div>
<div class="main-button" id="mainButton" onclick="toggleMenu()">
<span id="buttonText">상담문의</span>
<span class="emoji" id="buttonIcon">😊</span>
</div>
<div class="arrow-up" onclick="scrollToTop()"></div>
</div>
<script>
let isMenuOpen = false;
function toggleMenu() {
const menuItems = document.getElementById('menuItems');
const mainButton = document.getElementById('mainButton');
const buttonText = document.getElementById('buttonText');
const buttonIcon = document.getElementById('buttonIcon');
isMenuOpen = !isMenuOpen;
if (isMenuOpen) {
menuItems.classList.add('active');
mainButton.classList.add('active');
buttonText.textContent = '상담문의';
buttonIcon.innerHTML = '×';
buttonIcon.className = 'close-icon';
} else {
menuItems.classList.remove('active');
mainButton.classList.remove('active');
buttonText.textContent = '상담문의';
buttonIcon.innerHTML = '😊';
buttonIcon.className = 'emoji';
}
}
function handleMenuClick(menuType) {
alert(`${menuType} 메뉴를 클릭했습니다!`);
// 여기에 각 메뉴별 실제 동작을 구현하세요
toggleMenu(); // 메뉴 클릭 후 메뉴 닫기
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 메뉴 외부 클릭 시 메뉴 닫기
document.addEventListener('click', function(event) {
const floatingMenu = document.querySelector('.floating-menu');
if (!floatingMenu.contains(event.target) && isMenuOpen) {
toggleMenu();
}
});
// 스크롤 이벤트로 화살표 버튼 보이기/숨기기
window.addEventListener('scroll', function() {
const arrowUp = document.querySelector('.arrow-up');
if (window.scrollY > 300) {
arrowUp.style.opacity = '1';
} else {
arrowUp.style.opacity = '0.5';
}
});
</script>
</body>
</html>