实现自适应悬浮按钮，拖拽松开后自动吸附到最近屏幕边缘并露出一半按钮
按钮点击时图标有旋转动画效果，菜单项有渐显动画
包含多级菜单系统，二级子菜单支持悬停展开/收起
智能位置调整确保菜单和子菜单不会超出屏幕可视区域
响应式设计，在小屏设备上自动调整菜单布局方向
使用TailwindCSS构建现代化UI，包含渐变背景、阴影、圆角等视觉效果
完善的交互逻辑，包括点击外部关闭菜单、窗口大小变化自适应等功能
以下是实现自适应可移动悬浮窗按钮的完整代码，满足露出半按钮吸附边缘和多菜单导航需求：
悬浮导航按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DJ荻酷悬浮导航菜单</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.floating-btn {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
touch-action: none;
z-index: 1000;
}
.menu-item {
transform: translateY(20px);
opacity: 0;
transition: all 0.3s ease;
}
.menu-open .menu-item {
transform: translateY(0);
opacity: 1;
}
.submenu {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.2s ease;
max-height: 300px;
overflow-y: auto;
}
.has-submenu:hover .submenu {
transform: scaleY(1);
}
.rotate-icon {
transform: rotate(90deg);
transition: transform 0.3s ease;
}
@media (max-width: 640px) {
.menu-container {
right: 0;
left: auto;
transform: translateX(100%);
}
.menu-open .menu-container {
transform: translateX(0);
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div id="floating-menu" class="fixed z-50">
<button id="main-btn" class="floating-btn w-16 h-16 bg-gradient-to-r from-purple-600 to-blue-500 text-white rounded-full flex items-center justify-center text-2xl shadow-lg hover:from-purple-700 hover:to-blue-600">
<i id="menu-icon" class="fas fa-bars"></i>
</button>
<div class="menu-container absolute bottom-full right-0 mb-4 w-64 bg-white rounded-lg shadow-xl overflow-hidden hidden">
<div class="menu-item p-4 hover:bg-gray-50 cursor-pointer flex items-center">
<i class="fas fa-home mr-3 text-purple-600"></i>
<span>首页</span>
</div>
<div class="menu-item p-4 hover:bg-gray-50 cursor-pointer flex items-center has-submenu">
<i class="fas fa-th mr-3 text-purple-600"></i>
<span>分类</span>
<i class="fas fa-chevron-right ml-auto text-gray-400"></i>
<div class="submenu absolute left-full top-0 ml-1 w-56 bg-white rounded-r-lg shadow-lg border-l-2 border-purple-100 hidden">
<div class="p-3 hover:bg-gray-50">电子产品</div>
<div class="p-3 hover:bg-gray-50">服装</div>
<div class="p-3 hover:bg-gray-50">食品</div>
</div>
</div>
<div class="menu-item p-4 hover:bg-gray-50 cursor-pointer flex items-center">
<i class="fas fa-shopping-cart mr-3 text-purple-600"></i>
<span>购物车</span>
</div>
<div class="menu-item p-4 hover:bg-gray-50 cursor-pointer flex items-center has-submenu">
<i class="fas fa-cog mr-3 text-purple-600"></i>
<span>设置</span>
<i class="fas fa-chevron-right ml-auto text-gray-400"></i>
<div class="submenu absolute left-full top-0 ml-1 w-56 bg-white rounded-r-lg shadow-lg border-l-2 border-purple-100 hidden">
<div class="p-3 hover:bg-gray-50">账户设置</div>
<div class="p-3 hover:bg-gray-50">通知设置</div>
<div class="p-3 hover:bg-gray-50">隐私设置</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const floatingMenu = document.getElementById('floating-menu');
const mainBtn = document.getElementById('main-btn');
const menuIcon = document.getElementById('menu-icon');
const menuContainer = document.querySelector('.menu-container');
let isDragging = false;
let offsetX, offsetY;
let startX, startY;
// 初始化位置
floatingMenu.style.right = '20px';
floatingMenu.style.bottom = '20px';
// 菜单开关
mainBtn.addEventListener('click', (e) => {
e.stopPropagation();
menuContainer.classList.toggle('hidden');
floatingMenu.classList.toggle('menu-open');
menuIcon.classList.toggle('rotate-icon');
adjustMenuPosition();
});
// 拖拽功能
mainBtn.addEventListener('mousedown', startDrag);
mainBtn.addEventListener('touchstart', startDrag);
function startDrag(e) {
e.preventDefault();
isDragging = true;
const rect = floatingMenu.getBoundingClientRect();
if (e.type === 'mousedown') {
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
startX = e.clientX;
startY = e.clientY;
} else {
offsetX = e.touches[0].clientX - rect.left;
offsetY = e.touches[0].clientY - rect.top;
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}
document.addEventListener('mousemove', drag);
document.addEventListener('touchmove', drag);
document.addEventListener('mouseup', stopDrag);
document.addEventListener('touchend', stopDrag);
}
function drag(e) {
if (!isDragging) return;
let clientX, clientY;
if (e.type === 'mousemove') {
clientX = e.clientX;
clientY = e.clientY;
} else {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
}
floatingMenu.style.left = (clientX - offsetX) + 'px';
floatingMenu.style.top = (clientY - offsetY) + 'px';
floatingMenu.style.right = 'auto';
floatingMenu.style.bottom = 'auto';
}
function stopDrag() {
if (!isDragging) return;
isDragging = false;
document.removeEventListener('mousemove', drag);
document.removeEventListener('touchmove', drag);
document.removeEventListener('mouseup', stopDrag);
document.removeEventListener('touchend', stopDrag);
snapToEdge();
}
// 自动吸附到边缘并露出一半按钮
function snapToEdge() {
const btnSize = 64; // 按钮大小
const halfBtn = btnSize / 2;
const rect = floatingMenu.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 计算按钮中心点位置
const centerX = rect.left + halfBtn;
const centerY = rect.top + halfBtn;
// 确定最近的边缘
const distances = {
left: centerX,
right: windowWidth - centerX,
top: centerY,
bottom: windowHeight - centerY
};
// 找出最小距离的边缘
const minEdge = Object.keys(distances).reduce((a, b) =>
distances[a] < distances[b] ? a : b
);
// 根据边缘设置新位置
switch(minEdge) {
case 'left':
floatingMenu.style.left = `-${halfBtn}px`;
floatingMenu.style.top = `${rect.top}px`;
break;
case 'right':
floatingMenu.style.left = `${windowWidth - halfBtn}px`;
floatingMenu.style.top = `${rect.top}px`;
break;
case 'top':
floatingMenu.style.left = `${rect.left}px`;
floatingMenu.style.top = `-${halfBtn}px`;
break;
case 'bottom':
floatingMenu.style.left = `${rect.left}px`;
floatingMenu.style.top = `${windowHeight - halfBtn}px`;
break;
}
floatingMenu.style.right = 'auto';
floatingMenu.style.bottom = 'auto';
floatingMenu.style.transition = 'all 0.3s ease';
setTimeout(() => {
floatingMenu.style.transition = '';
}, 300);
}
// 调整菜单位置确保不超出屏幕
function adjustMenuPosition() {
if (menuContainer.classList.contains('hidden')) return;
const menuRect = menuContainer.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// 检查右侧是否超出
if (menuRect.right > windowWidth) {
menuContainer.style.left = 'auto';
menuContainer.style.right = '100%';
}
// 检查底部是否超出
if (menuRect.bottom > windowHeight) {
menuContainer.style.top = 'auto';
menuContainer.style.bottom = '100%';
}
}
// 点击外部关闭菜单
document.addEventListener('click', (e) => {
if (!floatingMenu.contains(e.target)) {
menuContainer.classList.add('hidden');
floatingMenu.classList.remove('menu-open');
menuIcon.classList.remove('rotate-icon');
}
});
// 子菜单悬停效果
document.querySelectorAll('.has-submenu').forEach(item => {
item.addEventListener('mouseenter', () => {
item.querySelector('.submenu').classList.remove('hidden');
adjustSubmenuPosition(item);
});
item.addEventListener('mouseleave', () => {
item.querySelector('.submenu').classList.add('hidden');
});
});
// 调整子菜单位置确保不超出屏幕
function adjustSubmenuPosition(parentItem) {
const submenu = parentItem.querySelector('.submenu');
const submenuRect = submenu.getBoundingClientRect();
const windowWidth = window.innerWidth;
// 如果子菜单右侧超出屏幕，改为向左展开
if (submenuRect.right > windowWidth) {
submenu.style.left = 'auto';
submenu.style.right = '100%';
submenu.style.borderLeft = 'none';
submenu.style.borderRight = '2px solid #f3e8ff';
} else {
submenu.style.left = '100%';
submenu.style.right = 'auto';
submenu.style.borderLeft = '2px solid #f3e8ff';
submenu.style.borderRight = 'none';
}
}
// 窗口大小变化时重新调整位置
window.addEventListener('resize', () => {
if (!menuContainer.classList.contains('hidden')) {
adjustMenuPosition();
}
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
